个人中心
gpt4 book ai didi

html - 部分彼此重叠

转载 作者：行者123 更新时间：2023-11-28 06:47:49 25 4
gpt4 key购买 nike

这是我目前正在制作的网站的 html。

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="java.js"></script>



</head>

<body>

    <!-- Nav -->

  <header>


    <div id="header_wrap">
            <div id="header">
                <div class="nav">
                    <a href="javascript:void(0)">Work</a>
                    <a href="javascript:void(0)">About</a>
                    <a href="javascript:void(0)">Contact</a>
                </div>
                <div class="mobile_nav"></div>
                <div class="mobile_nav_menu">
                    <div class="mobile_menu">
                        <span>Work</span>
                        <span>About</span>
                        <span>Contact</span>
                    </div>
                    <div class="mobile_close">

                    </div>
                </div>
            </div>
        </div>


</header>



    <section class="logo">

        <div id="cf">
          <img class="bottom" src="img/logo-black.jpg" ; />
          <img class="bottom" src="img/logo-blue.jpg" ; />
          <img class="bottom" src="img/logo-red.jpg" ; />
          <img class="top" src="img/logo-green.jpg" ;/>

        </div>

    </section>

    <section class="about">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



    </section>

  </body>

<footer>

</footer>

这是网站的CSS。 

/* This Resets All Styles */

* {
    margin: 0;
    padding: 0;
}
/*Navigation*/
#header_wrap {
    z-index: 2;
    width: 100%;
    height: 40px;
    position: fixed;
}
#header {
    max-width: 75%;
    min-width: 320px;
    margin: 0 auto;
    text-align: left;
    padding: 10px;
    font-size: 25px;
    line-height: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #fff;
}
#header:after {
    clear: both;
    content: '';
    display: block;
}
#logo {
    float: left;
    font-size: 12px;
    font-weight: 100;
}
.nav {
    float: right;
    height: 40px;
    padding-top: 20px;
}
.nav a {
    display: block;
    float: left;
    margin-left: 20px;
    font-weight: 300;
    color: #fff;
    padding-bottom: 5px;
}
.nav a:hover {
    border-bottom: 1px solid #fff;
}
.mobile_nav {
    display: none;
    width: 24px;
    height: 24px;
    background: url(http://i.piccy.info/i9/c366d5ab31a3ca2f5b5f5110434b31a9/1399749144/965/744267/mobile_nav.png) no-repeat;
    float: right;
    cursor: pointer;
    margin-top: 2px;
}
.mobile_nav_menu {
    z-index: 3;
    width: 220px;
    height: 100%;
    position: fixed;
    padding: 11px 22px 0 0;
    top: 0;
    right: -270px;
    background: url(http://i.piccy.info/i9/90d5aef311fc1a9853cce72695cdfe36/1399749183/4243/744267/mobile_nav_bg.png) no-repeat;
}
.mobile_menu {
    float: right;
    font-weight: 400;
    font-style: normal;
    color: #656565;
    font-size: 15px;
    line-height: 32px;
    text-align: right;
    padding-bottom: 12px;
    width: 56px;
}
.mobile_menu span {
    cursor: pointer;
    color: #656565;
    padding-bottom: 2px;
}
.mobile_menu span:hover {
    transition: all .25s ease-in-out;
    border-bottom: 2px solid #fff;

}
.mobile_close {
    cursor: pointer;
    float: right;
    width: 24px;
    height: 24px;
    background: url(http://i.piccy.info/i9/88575af4eb3ecd766a58a62971d3631e/1399749221/1231/744267/x_close.png) no-repeat;
    background-size: 24px 24px;
    clear: right;
}
/*/Navigation*/
@media (max-width: 600px) and (min-width: 320px) {
    .nav {
        display: none;
    }
    .mobile_nav {
        display: block;
    }
}
@media (min-width: 601px) {
    .nav {
        display: block;
    }
    .mobile_nav {
        display: none;
    }
    .mobile_nav_menu {
        display: none;
    }
}


/*Image Fader*/

section {
    display: block;
    height:100%;
    width:100%;
    box-sizing:border-box;
}

#cf img {
  position:absolute;
  left:0;
    width:100%;
    height:auto;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

@-webkit-keyframes
@keyframes cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a img:nth-of-type(1) {
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  animation-delay: 0;
}


div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/*About section*/

.about{
  width:100%;
  margin:0 20;
}

.about p {
  left:0;
    width:100%;
    height:auto;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

我想我知道问题出在哪里，但没有解决办法。就好像我把它拿走一样，它破坏了其他部分。

#cf img {
  position:absolute;

这部分在这里。如果我接受它，一切都是一个接一个。我只是不明白，如果我以那个 div 为目标，它为什么会影响其余部分。

还有其他问题，但这是我无法解决的主要问题。

谢谢，

扎克

编辑-

这是与图像一起使用的 javascript。

  /* image fader */

$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#cf2 img.top").toggleClass("transparent");
});
});

我正在尝试对图像进行交叉淡入淡出。有更好的方法吗？

最佳答案

将你的#cf 与具有相对位置的父 div 绑定(bind)

<section class="logo">
      <div id="cf_parent">   
        <div id="cf">
          <img class="bottom" src="img/logo-black.jpg" ; />
          <img class="bottom" src="img/logo-blue.jpg" ; />
          <img class="bottom" src="img/logo-red.jpg" ; />
          <img class="top" src="img/logo-green.jpg" ;/>
        </div>
      </div>
    </section>

将此添加到您的 CSS 中

#cf_parent{
   position:relative;
}

关于html - 部分彼此重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33947649/

25 4 0
文章推荐： c++ - Asio tcp 套接字上的未初始化读取错误
文章推荐： javascript - 了解 window.onerror
文章推荐： c++ - ProtocolBuffer 无法定义数据，尽管它已被接收
文章推荐： c++ - for 循环中的 static_cast
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com