网页模仿

码云链接：https://gitee.com/tinqiao/codes/47edbyt0f3w19anopc6iv83#index.html

百度云链接：https://pan.baidu.com/s/1tBxNJymCnjyYgFWtevyZtw 　　提取码：ah8j

原网页截图：

模仿效果：

<!DOCTYPE html>
<html>
<head>
    <title>网易云音乐</title>
    <meta charset="utf-8">
    <style type="text/css">
        @import url("index.css");
    </style>
</head>

<body>
    <div class="header">
        <div class="first_floor">
            <div class="wrap">
                <h1 class="logo"><a href="https://music.163.com/#" hidefocus="true" style="display:block; position:absolute;left:401.5px;top:0;width:176px;height:70px"></a></h1>
                <ul class="block">
                    <li><a hidefocus="true" href="https://music.163.com/#" class="active1">发现音乐</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/my/">我的音乐</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/friend">朋友</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/store/product" target="_blank">商城</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/nmusician/web/index#/" target="_blank">音乐人</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/download">下载客户端</a></li>
                </ul>
            </div>
        </div>
        <div class="second_floor">
            <div class="wrap">
                <ul class="nav">
                    <li><a hidefocus="true" href="https://music.163.com/#/discover" class="active2">推荐</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/discover/toplist">排行榜</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/discover/playlist">歌单</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/discover/djradio">主播电台</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/discover/artist">歌手</a></li>
                    <li><a hidefocus="true" href="https://music.163.com/#/discover/album">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="chest">
        <div class="wrap">
            <div class="slideshow-container">
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/album?id=78248182"><img src="http://p1.music.126.net/v7e_QnwshJhqSFmtU4MXfA==/109951163960448474.jpg"  width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/album?id=78243642"><img src="http://p1.music.126.net/8JuvNOMUOyxQavpPeAtetw==/109951163959129050.jpg"  width="728px" height="336px"></a></div>                
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/album?id=75889321"><img src="http://p1.music.126.net/ey824I7-Jr09_ywahBmbpA==/109951163964297773.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/mv?id=10859974"><img src="http://p1.music.126.net/a4kykRjGNFXFUHzp1uKakw==/109951163964295354.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/topic?id=43332319"><img src="http://p1.music.126.net/mi-wOm4Mrgz_tfh950tMTA==/109951163963297115.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/album?id=78221460"><img src="http://p1.music.126.net/pB811E-57tElUG4JMU4hwA==/109951163964299626.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/#/song?id=1355228849"><img src="http://p1.music.126.net/PDNAd8mV7h2fN-2bt89Wpw==/109951163963293968.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/m/at/5c9db3bf7a561595a629c602" target="_blank"><img src="http://p1.music.126.net/ODgL183yqdRolEiBB1uO3g==/109951163963302349.jpg" width="728px" height="336px"></a></div>
                </div>
                <div class="mySlides fade">
                    <div align="center"><a hidefocus="true" href="https://music.163.com/m/at/5c9dd115bcb62e8de3c8b614" target="_blank"><img src="http://p1.music.126.net/PPjPPrDMq2GGSxtJdD7AxA==/109951163963314083.jpg" width="728px" height="336px"></a></div>
                </div>
                <a class="prev" onclick="plusSlides(-1)"></a>
                <a class="next" onclick="plusSlides(1)"></a>
                <div class="dots">
                <span class="dot" onclick="currentSlide(1)"></span> 
                <span class="dot" onclick="currentSlide(2)"></span> 
                <span class="dot" onclick="currentSlide(3)"></span> 
                <span class="dot" onclick="currentSlide(4)"></span> 
                <span class="dot" onclick="currentSlide(5)"></span> 
                <span class="dot" onclick="currentSlide(6)"></span> 
                <span class="dot" onclick="currentSlide(7)"></span> 
                <span class="dot" onclick="currentSlide(8)"></span> 
                <span class="dot" onclick="currentSlide(9)"></span> 
                </div>
            </div>
            <script>
                var slideIndex = 0;    
                showSlides();
                function showSlides() 
                {
                    var i;
                    var slides = document.getElementsByClassName("mySlides");
                    var dotss = document.getElementsByClassName("dot");
                    for (i = 0; i < slides.length; i++) 
                    {
                           slides[i].style.display = "none";  
                    }
                    slideIndex++;
                    if (slideIndex > slides.length) 
                    {
                        slideIndex = 1
                    }    
                    for (i = 0; i < dotss.length; i++) 
                    {
                        dotss[i].className = dotss[i].className.replace(" active", "");
                    }
                    slides[slideIndex-1].style.display = "block";  
                    dotss[slideIndex-1].className += " active";
                    setTimeout(showSlides, 4000);
                }
            </script>
            <div class="download">
                <a id="side-download" href="https://music.163.com/#/download" class="btn" hidefocus="true" style="display:block; position:absolute;left:18px;top:214px;width:214px;height:57px"></a>
            </div>
        </div>
    </div>
    <div class="leg">
        <div class="wrap">
            <center><img src="images\leg.png"></center>
            <a href="https://music.163.com/#"style="display:block; position:absolute;left:460.5px;top:441px;width:982px;height:1575px"></a>
        </div>
    </div>
    <div class="foot">
        <img src="images\foot.png" width=1903px>
    </div>
    <a title="回到顶部" class="m-back" href="#" id="g_backtop" hidefocus="true" style="">回到顶部</a>
</body>
</html>

body {
    margin: 0;
    width: 100%;
    top: 0px;
    min-width: 982px;
    font-size: 12px;
    color: #9b9b9b;
    background: #f5f5f5;
}
div {
    display: block;
}
.header {
    width: 1903px;
    background: #fff;
}
.first_floor {
    height: 70px; 
    box-sizing: border-box;
    background: #242424;
    background-image: url(images/header.png);
}
.first_floor .wrap {
    width: 1100px;
    height： 70px;
    margin:0 auto;
}
.wrap .logo {
    margin: 0;
    float: left;
    width: 176px;
    height: 69px;
    background-position: 0 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.first_floor li {
    margin: 0;
    padding: 0;
    float: left;
    height: 70px;
    font-size: 14px;
}
li a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
}
li a.active1 {
    color: #ffffff;
}
li a:hover {
    color: #ffffff;
    background-color: #111;
}
.block a{
    padding: 0 19px;
    line-height: 70px;
    color: #ccc;
}
.second_floor {
    z-index: 90;
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
}
.second_floor .wrap {
    width: 1100px;
    height: 34px;
    margin: 0 auto;
    position: relative;
    zoom: 1;
}
.second_floor .nav {
    float: left;
    padding-left: 180px;
}
.second_floor .nav li {
    float: left;
    height: 34px;
}
.second_floor .nav a {
    color: #fff;
    font-size:: 12px;
    display: inline-block;
    height: 20px;
    padding: 0 13px;
    margin: 7px 17px 0;
    border-radius: 20px;
    line-height: 21px;
}
li a.active2 {
    background-color: #9B0909;
}
.second_floor li a:hover {
    color: #ffffff;
    background-color: #9B0909;
}
.chest {
    background-image: url(images/chest.png);
}
.chest .wrap {
    position: relative;
    width: 982px;
    height: 336px;
    margin: 0 auto;
}
.chest .dots {
    position: absolute;
    top: 310px;
    left: 0;
    width: 730px;
    height: 20px;
    text-align: center;
}
.chest .download {
    position: absolute;
    top: 0;
    z-index: 20;
    right: -1px;
    width: 254px;
    height: 336px;
}
.chest .download {
    background-image: url(images/download.png);
}
.chest .download p {
    margin: 10px auto;
    text-align: center;
    color: #8d8d8d;
}
.m-back {
    background-image: url(images/top.png);
    display: block;
    position: fixed;
    _position: absolute;
    text-indent: -9999px;
    left: 50%;
    margin-left: 500px;
    bottom: 160px;
    width: 49px;
    height: 44px;
}

.slideshow-container {
    float: left;
}
.dot {
    cursor: pointer;
      height: 6px;
      width: 6px;
      margin: 0 2px;
      background-color: #ccc;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
}
.active, .dot:hover {
      background-color: #9B0909;
}
.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}
}

posted @ 2019-03-31 22:21 风行者（昵称被占）阅读(215) 评论(0) 收藏举报

刷新页面返回顶部

挺巧

网页模仿

公告