HTML/CSS网页顶部令人讨厌的白色条
我有一些HTML和CSS代码的网页,我正在建设。我终于想出了如何做幻灯片,但现在我有一个恼人的白色栏在我的主页顶部(幻灯片上方),我无法摆脱 以下是我的HTML代码:HTML/CSS网页顶部令人讨厌的白色条,html,css,Html,Css,我有一些HTML和CSS代码的网页,我正在建设。我终于想出了如何做幻灯片,但现在我有一个恼人的白色栏在我的主页顶部(幻灯片上方),我无法摆脱 以下是我的HTML代码: <!DOCTYPE html> <html> <head> <title>R. J. Farah Engineering</title> <link rel="stylesheet" type="text/css" href=
<!DOCTYPE html>
<html>
<head>
<title>R. J. Farah Engineering</title>
<link rel="stylesheet" type="text/css" href="rjfe.css">
</head>
<body>
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
<div class="menu_box fade-in menu">
<div id="menu">
<ul>
<li><a href="rjfe.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="#">work</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
</body>
</html>
我已经尝试过调整页面上幻灯片的位置,因为坦白说,这就是我所能想到的…我不知道是什么导致了这一点
这仍然没有结束,但这里有一个正在运行的白条的屏幕截图!:
抱歉,看起来很糟糕——我还没有实际的照片,只是填充物,没有真正的标志
提前谢谢 包含幻灯片的
ul
仍具有默认的上边距。移除它应该可以解决问题
.cb-slideshow
margin-top:0;
}
你有
<div class="box fade-in logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
但看起来应该是这样的
<div class="box-fade-in-logo">
<img src="../rjfe/logo.png" style="width:270px;height:128px;">
</div>
类和id应始终为一个工作或多个带破折号或下划线的单词。试试这个。希望它能起作用在css中列出多个类时,只需删除逗号即可 这就是你的问题所在改变这个
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
致:
你的问题解决了
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
float: top;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
float: left;
float: top;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box .fade-in .menu #menu ul li{
background-color: transparent;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
background: transparent;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/annoying_white_bar.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(./annoying_white_bar.png)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 12s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}
@PHPglue我现在要试试。如果它有效,我会把它贴在“回答我自己的问题”上,并相信你。非常感谢@PHPglue抱歉,不起作用。这仅适用于id属性。您可以使用空格来表示class属性的多个类名。感谢您的澄清,我肯定会记住这一点。您的修复程序很有效,对于未来的程序员,我已将其标记为正确。但是,当我添加此项时,我的菜单将变得不可浏览,并且在幻灯片淡入时淡出。想法?@silentphoenix你看过我的解决方案吗?@shunya我看过,(对不起,我现在才看到XD),它也会导致同样的问题。菜单变得不可用。是的,我刚刚注意到它修复了一个问题,但创建了一个新的one@silentphoenix菜单对我仍然有用。我只看到应用shunya的解决方案时出现的点击和褪色问题。假设你的意思是将相同的属性应用于多个类,那是不正确的。这就是逗号的意思。删除逗号意味着您希望第二个类是第一个类的子类。是的@TreeTree你是对的。但是删除逗号就是删除顶部的白色条,但正如你所说,这不是正确的方法。
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.box {
width: 270px;
height: 128px;
position: absolute; bottom: 0px; right: 0px;
float: top;
float: left;
border: 1px solid transparent;
background: transparent;
}
.fade-in.logo {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box {
width: 270/2px;
height: 128/4px;
position: absolute; top: 0px; left: 0px;
float: left;
float: top;
border: 1px solid transparent;
background: transparent;
}
.fade-in.menu {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.menu_box .fade-in .menu #menu ul li{
background-color: transparent;
}
/*Menus*/
#menu ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
list-style: none;
z-index: 0;
background: transparent;
}
#menu li
{
list-style-type: none;
z-index: 0;
}
#menu a
{
display: block;
width: 5em;
color: black;
text-decoration: none;
text-align: center;
z-index: 0;
}
#menu a:hover
{
background-color: #6666AA;
z-index: 0;
}
#menu li
{
list-style-type: none;
float: left;
margin-right: 0.5em;
z-index: 0;
}
.cb-slideshow .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -9999;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/annoying_white_bar.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 18s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 18s linear infinite 0s;
}
.cb-slideshow li div h4 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 100px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(./annoying_white_bar.png)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(./annoying_white_bar.png);
animation-delay: 12s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes fadey {
0% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
figure#slideshow {
width: 80%;
margin: 0 auto;
position: relative;
}
figure#slideshow img {
position: absolute;
left: 0; top: 0;
width: 100%;
height: auto;
opacity: 0;
}
figure#slideshow img:first-child {
position: relative;
}