html - 如何在只有标头的网站上添加页脚类型文本？
问题描述
如何在只有标头的网站上添加页脚类型的文本（包括版权免责声明的文本）？每次我添加一个页脚，该页脚堆叠在标头之外，使屏幕可滚动。目的是获得包含在标头中的版权（和隐私条款的链接）（最终目标的图像附在下面）。
我已经通过附加的图片展示了我的进步。
目的是根据屏幕尺寸不同地显示版权行：
- 对于桌面版：添加到与新闻通讯表单下方对齐的左下角（见附图）
- 对于移动设备：位于社交徽标下方（见附图）
到目前为止我的进展：以下是我设法实现的。任何指针将不胜感激！
这些是桌面和移动设备上的当前视图：
这是我想要实现的：
- 在桌面上：我想在桌面上实现什么
- To be on mobile：我想在手机上实现的——忽略版权背后的蓝色丑陋背景
HTML：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>X</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/coming-soon.min.css" rel="stylesheet">
</head>
<body>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="mp4/bg.mp4" type="video/mp4">
</video>
<div class="masthead">
<div class="masthead-bg"></div>
<div class="container h-100">
<div class="row h-100">
<div class="col-12 my-auto">
<div class="masthead-content text-white py-5 py-md-0">
<h1 class="mb-3">Register</h1>
<p class="mb-5">Building a X.
We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
<div class="input-group input-group-newsletter">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter email..." aria-label="Enter email..." aria-describedby="basic-addon">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">Notify Me!
</button>
</div
</div>
</div>
<p class="footer-text">© 2018 X Ltd. All Rights Reserved</p>
</div>
</div>
</div>
</div>
<div class="social-icons">
<ul class="list-unstyled text-center mb-0">
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-medium"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-unstyled-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
</ul>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/coming-soon.min.js"></script>
</body>
</html>
html {
height: 100%
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Merriweather;
font-weight: 700
}
body {
height: 100%;
min-height: 35rem;
position: relative;
font-family: 'Source Sans Pro';
font-weight: 300
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: 0
}
@media (pointer:coarse) and (hover:none) {
body {
background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
background-position: cover
}
body video {
display: none
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #cd9557;
opacity: .7;
z-index: 1
}
.masthead {
position: relative;
overflow: hidden;
padding-bottom: 3rem;
z-index: 2
}
.masthead .masthead-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
}
.masthead .masthead-content h1 {
font-size: 2.5rem
}
.masthead .masthead-content p {
font-size: 1.2rem
}
.masthead .masthead-content p strong {
font-weight: 700
}
.masthead .masthead-content .input-group-newsletter input {
font-size: 1rem;
padding: 1rem
}
.masthead .masthead-content .input-group-newsletter button {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1rem
}
@media (min-width:768px) {
.masthead {
height: 100%;
min-height: 0;
width: 40.5rem;
padding-bottom: 0
}
.masthead .masthead-bg {
min-height: 0;
transform: skewX(-8deg);
transform-origin: top right
}
.masthead .masthead-content {
padding-left: 3rem;
padding-right: 10rem
}
.masthead .masthead-content h1 {
font-size: 3.5rem
}
.masthead .masthead-content p {
font-size: 1.3rem
}
}
.social-icons {
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
}
.social-icons ul {
margin-top: 2rem;
width: 100%;
text-align: center
}
.social-icons ul>li {
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
}
.social-icons ul>li>a {
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
@media (min-width:768px) {
.social-icons {
margin: 0;
position: absolute;
right: 2.5rem;
bottom: 2rem;
width: auto
}
.social-icons ul {
margin-top: 0;
width: auto
}
.social-icons ul>li {
display: block;
margin-left: 0;
margin-right: 0;
margin-bottom: 2rem
}
.social-icons ul>li:last-child {
margin-bottom: 0
}
.social-icons ul>li>a {
transition: all .2s ease-in-out;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
.social-icons ul>li>a:hover {
background-color: #002e66
}
}
.btn-secondary {
background-color: #cd9557;
border-color: #cd9557
}
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
background-color: #ba7c37!important;
border-color: #ba7c37!important
}
.input {
font-weight: 300!important
}
.footer-text {
padding: 10px;
color: #fff
}
CSS：
html {
height: 100%
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Merriweather;
font-weight: 700
}
body {
height: 100%;
min-height: 35rem;
position: relative;
font-family: 'Source Sans Pro';
font-weight: 300
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: 0
}
@media (pointer:coarse) and (hover:none) {
body {
background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
background-position: cover
}
body video {
display: none
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #cd9557;
opacity: .7;
z-index: 1
}
.masthead {
position: relative;
overflow: hidden;
padding-bottom: 3rem;
z-index: 2
}
.masthead .masthead-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
min-height: 35rem;
height: 100%;
background-color: rgba(0, 46, 102, .8);
transform: skewY(4deg);
transform-origin: bottom right
}
.masthead .masthead-content h1 {
font-size: 2.5rem
}
.masthead .masthead-content p {
font-size: 1.2rem
}
.masthead .masthead-content p strong {
font-weight: 700
}
.masthead .masthead-content .input-group-newsletter input {
font-size: 1rem;
padding: 1rem
}
.masthead .masthead-content .input-group-newsletter button {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1rem
}
@media (min-width:768px) {
.masthead {
height: 100%;
min-height: 0;
width: 40.5rem;
padding-bottom: 0
}
.masthead .masthead-bg {
min-height: 0;
transform: skewX(-8deg);
transform-origin: top right
}
.masthead .masthead-content {
padding-left: 3rem;
padding-right: 10rem
}
.masthead .masthead-content h1 {
font-size: 3.5rem
}
.masthead .masthead-content p {
font-size: 1.3rem
}
}
.social-icons {
position: absolute;
margin-bottom: 2rem;
width: 100%;
z-index: 2
}
.social-icons ul {
margin-top: 2rem;
width: 100%;
text-align: center
}
.social-icons ul>li {
margin-left: .75rem;
margin-right: .75rem;
display: inline-block
}
.social-icons ul>li>a {
display: block;
color: #fff;
background-color: rgba(0, 46, 102, .8);
border-radius: 100%;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
@media (min-width:768px) {
.social-icons {
margin: 0;
position: absolute;
right: 2.5rem;
bottom: 2rem;
width: auto
}
.social-icons ul {
margin-top: 0;
width: auto
}
.social-icons ul>li {
display: block;
margin-left: 0;
margin-right: 0;
margin-bottom: 2rem
}
.social-icons ul>li:last-child {
margin-bottom: 0
}
.social-icons ul>li>a {
transition: all .2s ease-in-out;
font-size: 1rem;
line-height: 2rem;
height: 2rem;
width: 2rem
}
.social-icons ul>li>a:hover {
background-color: #002e66
}
}
.btn-secondary {
background-color: #cd9557;
border-color: #cd9557
}
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
background-color: #ba7c37!important;
border-color: #ba7c37!important
}
.input {
font-weight: 300!important
}
.footer-text {
padding: 10px;
color: #fff
}
解决方案
对于遇到这个问题的其他人：
使用 Bootstrap 的“mastfoot”。
具体来说，在标头 div 之外创建以下 div：
<div class="mastfoot">
<div class="inner-mastfoot">
© 2018 X Ltd. All Rights Reserved. • <a href="/legal">Legal</a> • <a href="/contact">Contact</a>
</div>
</div>
然后定义 'mastfoot' 和 'inner-mastfoot' 样式如下：
对于移动视图：
.mastfoot {
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
}
.inner-mastfoot {
font-size: 0.8rem;
text-align: center
}
对于桌面视图：
@media (min-width:768px) {
.mastfoot {
color: #999 !important;
color: rgba(255, 255, 255, .5) !important;
position: absolute !important;
bottom: 10px !important;
margin-left: 4rem !important;
margin-right: 10rem !important;
z-index: 2
}
.inner-mastfoot {
font-size: 0.8rem;
text-align: left !important
}
}
推荐阅读
- hapijs - hapi js 社交登录会话管理
- java - 我正面临（线程“主”java.lang.NullPointerException 中的异常），而我正在尝试删除链表中的节点
- javascript - 如何将函数道具从 DataGrid 传递到自定义 GridToodbar 按钮？
- r - 如何从 R 脚本调用 tar_make()？
- python - 如何添加同一产品的不同尺寸？
- angular - 为什么我收到“此构造函数与 Angular 依赖注入不兼容”
- amazon-web-services - 无需配置访问/密钥的 AWS CLI
- php - 无法为我的 Laravel 项目在生产环境中建立数据库连接
- cmake - 如何卸载 cmake 3.2.3 或如何找到 cmake 的目录...谢谢
- laravel - 如何从laravel中的表单提交的Controller中获取多个复选框值？