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

Posted 2022-08-24 my-program-life

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;

/*热卖推荐样式结束*/