在HTML / CSS网页顶部的恼人的白条

时间：2015-09-12 00:41:55

标签： html css

我正在为我正在构建的网页提供一些HTML和CSS代码。我终于想出了如何进行幻灯片放映，但现在我在主页顶部（幻灯片放映上方）有一个令人讨厌的白条，我无法摆脱它。

这是我的HTML代码：

<!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>

我的CSS：

@-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;
    margin: 10px;
    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;
    margin: 10px;
    float: left;
    border: 1px solid transparent;
    background: transparent;
}
.fade-in.menu {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

/*Menus*/
#menu ul
{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style: none;
    z-index: 0;
}

#menu li
{
    list-style-type: none;
    z-index: 0;
}

#menu a
{
    display: block;
    width: 5em;
    color: black;
    background-color: transparent;
    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/pattern.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(../rjfe3/img1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../rjfe3/img2.jpg);
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../rjfe3/img3.jpg);
    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;
}

我已经尝试调整幻灯片在页面上的位置，因为坦率地说，这是我能想到的所有内容......我不知道是什么原因造成的。

此仍然未启动，但此处是操作中的白条的屏幕截图！：

https://plus.google.com/u/0/+JosephFarahthefinalfrontier/posts/Vub3imwq1oq?pid=6193420991011414498&oid=105312277509825242261

对不起它看起来很可怕 - 我还没有实际的图片，只是填充物，没有真正的标志。

提前致谢!!

3 个答案:

答案 0 :(得分：2)

包含幻灯片显示的ul仍具有默认的上边距。删除它应该解决它。

.cb-slideshow
    margin-top:0;
}

答案 1 :(得分：2)

当您在css中列出多个类时，您需要做的就是删除逗号。

这就是你的问题所在。

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -9999; 
}

为：

.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;
}

答案 2 :(得分：-2)

你有

<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>

class和id应始终为一个work或多个带有破折号或下划线的单词。试试这个。希望它有效

相关问题
最新问题