HTML+CSS之金立官网部分实现

一、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title>
    <link rel="icon" href="jinli_images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/jinli.css">
</head>
<body>
<!--导航栏开始-->
    <div class="nav">
        <div class="wrap">
            <div class="logo">
                <img src="jinli_images/logo.png" alt="无法加载该图片">
            </div>
            <div class="nav_right">
                <div class="enter">
                    <ul>
                        <li><a href="#">amigo账号登录</a> | </li>
                        <li><a href="#">原账号登录</a> | </li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">购物车(0)</a></li>
                    </ul>
                </div>
                <div class="home">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li class="phone">
                            <a href="#">手机</a>
                            <div class="phone_hidden">
                                <ul>
                                    <li><h4>最新 ></h4></li>
                                    <li>金立S11S<sup> hot</sup></li>
                                    <li>金立S11<sup> hot</sup></li>
                                    <li>金立M7 Plus<sup> hot</sup></li>
                                    <li>金立M7<sup> hot</sup></li>
                                    <li>大金刚2</li>
                                </ul>
                                <ul>
                                    <li><h4>M系列 ></h4></li>
                                    <li>金立M7 Plus</li>
                                    <li>金立M7</li>
                                    <li>金立M6S Plus</li>
                                    <li>金立M2017</li>
                                    <li>金立M6 Plus</li>
                                    <li>金立M6</li>
                                </ul>
                                <ul>
                                    <li> <h4>S系列 ></h4></li>
                                    <li>金立S11s</li>
                                    <li>金立S11</li>
                                    <li>金立S10</li>
                                    <li>金立S10B</li>
                                    <li>金立S10C</li>
                                </ul>
                                <ul>
                                    <li> <h4>金刚系列 ></h4></li>
                                    <li>金刚3<sup> hot</sup></li>
                                    <li>金刚2</li>
                                    <li>大金刚2</li>
                                </ul>
                                <ul>
                                    <li><h4>天鉴系列 ></h4></li>
                                    <li>天鉴W909</li>
                                </ul>
                                <ul>
                                    <li><h4>F系列 ></h4></li>
                                    <li>金立F6 <sup> hot</sup></li>
                                    <li>金立F109</li>
                                    <li>金立F109L</li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">配件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">下载</a></li>
                        <li><a href="#">amigoOS</a></li>
                        <li class="search"  style="margin-left: 120px;">
                            <input type="text" placeholder="输入搜索内容" autofocus>
                            <button>搜</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<!--导航栏结束-->
<!--轮播图开始-->
    <div class="slide_show"></div>
<!--轮播图结束-->
<!--明星产品开始-->
    <div class="star">
        <div class="wrapper">
            <h2>明星产品</h2>
            <div class="img_box">
                <a href="#"><img src="jinli_images/28_1514454113062.jpg" alt=""></a>
                <a href="#"><img src="jinli_images/19_1516348649876.jpg" alt=""></a>
                <a href="#"><img src="jinli_images/28_1514454181297.jpg" alt=""></a>
            </div>
        </div>
    </div>
<!--明星产品结束-->
<!--热卖推荐开始-->
    <div class="hot_recommand">
        <div class="title">
            <h2>热卖推荐</h2>
            <span><a href="#">...更多...</a></span>
        </div>
        <div class="hr">
            <div class="hr_left">
                <img src="jinli_images/05_1520212662703.jpg">
            </div>
            <div class="hr_right">
                <div>
                    <img src="jinli_images/28_1514451560910.png" class="after">
                    <img src="jinli_images/28_1514451554121.png" class="before">
                    <p class="title">金立F6</p>
                    <p class="desc">5.7英寸高清全面屏，四曲面机身</p>
                    <p class="price">¥ 1399</p>
                </div>
                <div>
                    <img src="jinli_images/28_1514451535446.png" class="after">
                    <img src="jinli_images/28_1514451528464.png" class="before">
                    <p class="title">S10C</p>
                    <p class="desc">1600万柔光自拍</p>
                    <p class="price">¥ 1399</p>
                </div>
                <div>
                    <img src="jinli_images/28_1514451629703.png" class="after">
                    <img src="jinli_images/28_1514451623552.png" class="before">
                    <p class="title">S10C</p>
                    <p class="desc">1600万柔光自拍</p>
                    <p class="price">¥ 1399</p>
                </div>
                <div>
                    <img src="jinli_images/28_1514451683907.png" class="after">
                    <img src="jinli_images/28_1514451679603.png" class="before">
                    <p class="title">金钢3</p>
                    <p class="desc">5.5英寸高清全面屏、4000mAh大电量</p>
                    <p class="price">¥ 1199</p>
                </div>
                <div>
                    <img src="jinli_images/28_1514451729786.png" class="after">
                    <img src="jinli_images/28_1514451724867.png" class="before">
                    <p class="title">金立M6S Plus</p>
                    <p class="desc">6020mAh超级续航、骁龙八核处理器</p>
                    <p class="price">¥ 3299起</p>
                </div>
                <div>
                    <img src="jinli_images/28_1514451762832.png" class="after">
                    <img src="jinli_images/28_1514451757927.png" class="before">
                    <p class="title">金立S9</p>
                    <p class="desc">双摄柔光自拍、5.5英寸1080P高清屏</p>
                    <p class="price">¥ 1699</p>
                </div>
            </div>
        </div>
    </div>
<!--热卖推荐结束-->
</body>
</html>

二、CSS代码

1.reset.css

a{
    text-decoration: none;
    font-size: 14px;
    color: white;
}
ul li{
    list-style: none;
}
body,div,ul,li{
    margin: 0px;
    padding: 0px;
}

2.jinli.css

/*导航栏样式开始*/
.nav{
    width: 100%;
    height: 103px;
    background-color: white;
    border-bottom: 1px solid #d5d5d5;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2;
}
.nav .wrap{
    width:1190px;
    height: 103px;
    margin: 0 auto;
}
.nav .wrap .logo img{
    width: 200px;
    height: 51px;
    margin-top: 25px;
}
.logo,.nav_right{
    float: left;
}
.nav_right{
    width: 990px;
    height: 103px;
}
.enter{
    width: 100%;
    height: 40px;
    padding-top:15px;
}
.nav_right ul{
    float: right;
}
.nav_right ul li{
    float: left;
    margin: 0 10px;
}
.nav_right ul li a{
    color: gray;
}
.enter ul li:first-child a{
    color: #ef4222 ;
}
.nav_right ul li a:hover{
    color: #ef4222;
}
.home ul li a{
    font:normal bold 20px "新宋体";
    margin-left: 40px;
}
.home{
    width: 100%;
    height: 63px;
    float: left;
}
.search{
    width: 170px;
    height: 30px;
    border: 1px solid #ddd;
    padding-left: 5px;
    margin-top: 40px;
    margin-left: 120px;
}
.search input{
    width: 138px;
    height: 28px;
    float: left;
    border: none;
}
.search button{
    width: 25px;
    height: 28px;
    float: left;
    background-color: #fff;
    border:none;
}
.phone_hidden{
    width: 100%;
    height: 260px;
    background-color: white;
    position: absolute;
    left: 0px;
    top: 104px;
    display: none;
}
.phone:hover .phone_hidden{
    display: inline-block;
    cursor: pointer;
}
.phone_hidden ul li h4{
    color: black;
    font: normal bolder 20px "新宋体";
}
.phone_hidden ul{
    float: left;
    margin-left: 100px;
}
.phone_hidden ul li sup{
    font: normal bolder 20px "宋体";
    color: orangered;
}
.phone_hidden ul:first-child{
    margin-left: 150px;
}
.phone_hidden ul:last-child{
    margin-right: 150px;
}
.phone_hidden ul li{
    float: none;
    line-height: 30px;
    font-family: 新宋体;
    color: #999999;

}
/*导航栏样式结束*/
/*轮播图样式开始*/
.slide_show{
    width: 100%;
    height:640px;
    background-image: url("../jinli_images/04_1515047442501.jpg");
    background-position: -200px;
    margin-top: 104px;
    -webkit-animation: slide_show 8s infinite;
}
@-webkit-keyframes slide_show {
    0%{
        background-image: url("../jinli_images/04_1515047442501.jpg");
    }
    100%{
        background-image: url("../jinli_images/02_1517536570441.jpg");
    }

}
/*轮播图样式结束*/
/*明星产品样式开始*/
.star{
    width: 100%;
    height: 451px;
    margin: 0 auto;
}
.star .wrapper{
    width: 1196px;
    margin: 0px auto;
}
h2{
    padding: 40px 0;
    font-size: 40px;
    letter-spacing: 1px;
    color: #000;
    text-align: center;
}
.wrapper .img_box img{
    float: left;
}
.wrapper .img_box a:nth-child(2) img{
    margin: 0px 10px;
}
/*明星产品样式结束*/
/*热卖推荐样式开始*/
.hot_recommand{
    width:1519.2px;
    height:912.5px;
    background-color: rgb(229,229,229);
    z-index: 1;
}
.title span a{
    float: right;
    margin:-60px 170px;
    color: black;
}
.title span:hover a{
    color: orangered;
}
.hot_recommand .hr{
    width: 1200px;
    height: 750px;
    background-color:  rgb(229,229,229);
    margin: 0 auto;
}
.hot_recommand .hr .hr_left img{
    height:750px;
    float: left;
    margin-right: 10px;
}
.hr_right div{
    width: 294px;
    height: 372px;
    background-color: white;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
}
.hr_right div img{
    width: 120px;
    height:240px;
}
.hr_right div .before{
    margin-top: -300px;
    margin-left: 85px;
    position: relative;
    top: -20px;
 }
.hr_right div .after{
    margin-top: 25px;
    margin-left: 85px;
}
.hr_right div p{
    text-align: center;
}
.hr_right div .title{
    color: #0f0e0e;
    font-size: 16px;
    margin-top: -8px;
}
.hr_right div .desc{
    color: #9E9E9E;
    font-size: 14px;
    margin-top: -5px;
}
.hr_right div .price{
    color: #fe6a00;
    font-size: 24px;
    margin-top: -5px;
}
.hr_right div:hover .after{
    position: relative;
    left: 0px;
}
.hr_right div:hover .before{
    position: relative;
    left: 60px;
}
/*热卖推荐样式结束*/

三、实现效果

1.导航栏