因此,在我研究了大约3-4个月的HTML和CSS之后,我正在开发我的第一页。 问题是页脚粘贴在幻灯片上。似乎无法弄清楚如何将其粘贴到页面底部。 此外,如果您发现任何其他错误或者您有任何其他提示,请提及它们。
的index.html
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>x</title>
<link href="css/css.css" rel="stylesheet" />
<link href="css/sshow.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="shadow">
<header id="top">
<nav id="top-mic">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Despre noi</a></li>
<li><a href="#">Locatie</a></li>
</ul>
</nav>
<a href="#"><img src="img/logo.jpg" alt="davnic" id="logo" width="288" height="115"></img></a>
<div id="top-mare-wrap">
<nav id="top-mare">
<ul>
<li><a href="#">Acasa</a></li>
<li><a href="#">Buton1</a></li>
<li><a href="#">Buton2</a></li>
<li><a href="#">Buton3</a></li>
<li><a href="#">Buton4</a></li>
</ul>
</nav>
</div>
</header>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/img3.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<script src="js/sshow.js"></script>
<footer class="site-footer">
x
<img src="img/location_1.png" />
</footer>
</div>
</body>
</html>
sshow.css
.mySlides {
display: none;
}
.slideshow-container {
clear: both;
max-width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.active {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
css.css
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
#container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#container:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
.footer {
clear: both;
margin-top: 4000px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #F28A00;
text-align: center;
}
我观察到如果我从sshow.css删除位置:相对,它可以工作,但幻灯片显示的按钮显然会消失。 也试过这个css:
html {
box-sizing: border-box;
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Roboto, Arial;
height: 4000px;
width: 100%;
padding-bottom: 6rem;
margin: 0;
font-size: 1.1em;
min-height: 100%;
position: relative;
}
header {
color: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid #ADADAD;
}
#container {
margin: 0 auto;
padding: 0;
color: #ffffff;
}
#top-mic {
background-color: #F28A00;
margin: 0;
padding: 0;
margin-bottom: 14px;
}
#top-mic ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#top-mic li {
float: right;
padding: 8px 30px;
}
#top-mic li a {
display: block;
text-decoration: none;
color: #ffffff;
text-align: center;
font-size: 0.6em;
font-weight: bold;
transition: color 0.25s ease;
margin-right: 55px;
}
#top-mic li a:hover {
color: #ADADAD;
}
#logo {
float: left;
margin-left: 240px;
margin-right: 130px;
}
#top-mare-wrap {
margin: 0 auto;
}
#top-mare {
padding: 0;
margin: 0;
margin-bottom:60px;
}
#top-mare ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-mare li {
display:inline;
}
#top-mare li a {
margin-top: 42px;
margin-left: 40px;
padding-right: 20px;
display: inline-block;
text-decoration: none;
color: #ADADAD;
text-align: center;
font-size: 2.1em;
font-weight: bold;
transition: color 0.25s ease;
}
#top-mare li a:hover {
color: #F28A00;
}
#test {
color:black;
}
.footer {
clear:both;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
非常感谢。
答案 0 :(得分:1)
尝试在页脚之前关闭div。页脚在幻灯片放映中,但我没有对代码进行测试。
答案 1 :(得分:0)
试试这个:
<强> CSS:强>
.footer {
border-style: groove;
border-width: 0px;
border-top-width: 1px;
border-top-color: white;
background-color: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 25px;
}
底部总是有这个页脚,黑色背景和上面的小宽度。高度为25px。您可以在CSS中设置此页脚的样式。另请注意,position
已修复。
编辑: 我没有测试你的代码,确保div正确关闭。
答案 2 :(得分:0)
使用position: fixed
作为页脚元素。