HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页

河马牙医首页

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="牙疼怎么办,智齿是什么,拔牙多少钱,矫正多少钱,九院医生,北大口腔,瑞尔口腔,拜耳口腔">
    <meta name="description" content="有牙齿问题,找河马牙医,儿童口腔,全国儿童口腔在线咨询,牙疼怎么办,拔牙多少钱,矫正多少钱,种植牙,有牙齿问题">
    <meta name="renderer" content="webkit"/>
    <title>河马牙医-口腔健康服务平台</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        body, section {
            margin: 0;
        }

        section img {
            width: 100%;
            vertical-align: top;
        }

        /*头部*/
        #header {
            height: 80px;
            /*background-color: yellow;*/
        }

        /*头部版心*/
        #header .header-center {
            width: 1260px;
            height: 80px;
            /*background-color: red;*/
            /*水平居中*/
            margin: 0 auto;
        }

        /*头部的左边*/
        .header-center-left {
            float: left;
            /*background-color: purple;*/
            height: 56px;
            margin-top: 12px;
        }

        /*头部的右边*/
        .header-center-right {
            float: right;
            /*background-color: deepskyblue;*/
            width: 450px;
            height: 80px;
            line-height: 80px;
        }

        .header-center-right a {
            margin-right: 30px;
            /*去除下划线*/
            text-decoration: none;
            color: #409ad6;
            font-size: 18px;
        }

        .header-center-right a span {
            vertical-align: middle;
        }

        .header-center-right a img {
            vertical-align: middle;
            margin-right: 5px;
        }

        #footer {
            height: 30px;
            background-color: #346699;
        }

        #footer .footer-center {
            width: 1260px;
            height: 30px;
            line-height: 30px;
            /*background-color: red;*/
            /*水平居中*/
            margin: 0 auto;
        }

        #footer .footer-center p{
            margin-top: 0;
            /*文字右对齐*/
            text-align: right;
        }

        #footer .footer-center p span{
            margin-right: 5px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
<!--头部-->
<header id="header">
    <div class="header-center">
        <!--头部左边-->
        <div class="header-center-left">
            <img src="images/hmlogo.jpg" alt="">
        </div>
        <!--头部右边-->
        <div class="header-center-right">
            <a href="http://www.itlike.com" target="_blank">
                <img src="images/home_icon.png" alt="">
                <span>首页</span>
            </a>
            <a href="#">
                <img src="images/about_icon.png" alt="">
                <span>关于我们</span>
            </a>
            <a href="#">
                <img src="images/contact_icon.png" alt="">
                <span>联系我们</span>
            </a>
        </div>
    </div>
</header>
<!--中间内容-->
<article>
    <section>
        <img src="images/home1.png" alt="">
    </section>
    <section>
        <img src="images/home2.png" alt="">
    </section>
    <section>
        <img src="images/home3.png" alt="">
    </section>
    <section>
        <img src="images/home4.png" alt="">
    </section>
    <section>
        <img src="images/home5.png" alt="">
    </section>
    <section>
        <img src="images/home6.png" alt="">
    </section>
</article>
<!--尾部-->
<footer id="footer">
    <div class="footer-center">
        <p>
            <span>©2016</span>
            <span>上海康牙网络科技有限公司</span>
            <span>沪ICP备15009258号</span>
            <span>客服热线: 400-040-0423</span>
        </p>
    </div>
</footer>
</body>
</html>

网页界面:

百度首页

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下, 你就知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header id="header">
    <!--左边-->
    <div class="header-left">
            <span>
                <img src="images/weather.png" alt="" align="center">
            </span>
        <span class="msg-span">
                <span>|</span>
                <a href="#">换肤</a>
                <a href="#">消息</a>
            </span>
    </div>
    <!--右边-->
    <div class="header-right">
        <a href="">新闻</a>
        <a href="">hao123</a>
        <a href="">地图</a>
        <a href="">学术</a>
        <a href="http://www.itlike.com">撩课学院</a>
        <a href="" class="more-product">更多产品</a>
    </div>
</header>
<!--搜索-->
<section id="content">
    <!--logo-->
    <div class="logo">
        <img src="images/bd_logo.png" alt="百度logo">
    </div>
    <div class="search">
        <form action="http://www.itlike.com">
            <input name="content" type="text" class="search-input">
            <input name="btn" type="submit" class="search-submit" value="百度一下">
        </form>
    </div>
    <!--搜索-->
</section>
<!--列表-->
<section id="list">
    <!--头部-->
    <div class="list-head">
        <!--左边-->
        <div class="list-head-left">
            <a href="">
                <img src="images/person_icon.png" alt="">
                <span>我的关注</span>
            </a>
            <a href="">
                <span>推荐</span>
            </a>
            <a href="">
                <span>导航</span>
            </a>
        </div>
        <!--右边-->
        <div class="list-head-right">
            <a href="#">
                <img src="images/setting_icon.png" alt="">
            </a>
        </div>
    </div>
    <!--内容-->
    <div class="list-content">
        <!--内容的左边-->
        <div class="list-content-left">
            <!--1-->
            <div class="list-content-cell1">
                <h3>大满贯14冠!德约3-0完胜波特罗 美网三度封王</h3>
                <img src="images/cell_img1.png" alt="">
                <img src="images/cell_img2.png" alt="">
                <img src="images/cell_img3.png" alt="">
                <p>网易新闻 09-20 13:19</p>
            </div>
            <!--2-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="images/cell_img1.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠!德约3-0完胜波特罗 美网三度封王</h3>
                    <p>网易新闻 09-10 13:19</p>
                </div>
            </div>
            <!--3-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="images/cell_img2.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠!德约3-0完胜波特罗 美网三度封王</h3>
                    <p>网易新闻 09-10 13:19</p>
                </div>
            </div>
        </div>
        <!--内容的右边-->
        <div class="list-content-right">
            <div class="right-top">
                <h4>实时热点</h4>
                <div>
                    <img src="images/circle_icon.png" alt="">
                    <span>换一换</span>
                </div>
            </div>
            <div class="right-body">
                <ul>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                </ul>
            </div>
        </div>
    </div>
</section>
</body>
</html>
## index.css

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    /*margin-bottom: 200px;*/
}

/************************头部-start**********************/
#header {
    height: 33px;
    border-bottom: 1px solid #ebebeb;
}

#header a {
    color: #555555;
    font-size: 13px;
}

#header .header-left {
    width: 270px;
    height: 33px;
    float: left;
    line-height: 33px;
}

#header .header-left a {
    margin-left: 8px;
}

#header .header-right {
    width: 600px;
    height: 33px;
    float: right;
    text-align: right;
    line-height: 33px;
}

#header .header-right a {
    font-weight: bolder;
    margin-left: 15px;
}

#header .header-right a.more-product {
    background-color: #398bfb;
    /*行内 --> 行内-块级*/
    display: inline-block;
    width: 86px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #fff;
    text-decoration: none;

    vertical-align: top;
}

/************************头部-end**********************/

/************************搜索-start**********************/
#content {
    width: 641px;
    height: 189px;
    margin: 20px auto;
    /*background-color: green;*/
}

#content .logo {
    /*background-color: red;*/
    text-align: center;
    width: 641px;
    height: 112px;
}

#content .logo img {
    width: 270px;
    height: 112px;
}

#content .search {
    width: 100%;
    height: 77px;
    /*background-color: skyblue;*/
    padding-top: 10px;
}

#content .search form {
    width: 100%;
    height: 44px;
    /*background-color: purple;*/
}

#content .search form .search-input {
    width: 536px;
    height: 44px;
    padding-left: 8px;

    /*去除外边框*/
    outline: none;

    border: 1px solid #e0e0e0;

    float: left;
}

#content .search form .search-input:focus {
    border-color: #398bfb;
}

#content .search-submit {
    width: 105px;
    height: 44px;
    background-color: #398bfb;
    border: none;
    float: left;
    color: #fff;
    font-size: 16px;

    /*去除外边框*/
    outline: none;
}

/************************搜索-end**********************/

/************************列表-start**********************/
#list {
    width: 893px;
    height: 600px;
    border: 1px solid #ebebeb;
    margin: 0 auto;
}

#list .list-head {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ebebeb;
}

#list .list-head .list-head-left {
    float: left;
    /*解决空格留白的问题*/
    font-size: 0;
}

#list .list-head .list-head-left a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    /*background-color: red;*/

    font-size: 14px;
    text-decoration: none;
    padding: 0 10px;

    color: #555555;
    vertical-align: top;
}

#list .list-head .list-head-left a img,
#list .list-head .list-head-left a span {
    vertical-align: middle;
}

#list .list-head .list-head-left a:hover {
    background-color: #cccccc;
}

#list .list-head .list-head-right {
    float: right;
    margin-right: 10px;
}

#list .list-head .list-head-right img {
    vertical-align: middle;
}

/*列表内容*/
#list .list-content {

}

#list .list-content .list-content-left {
    width: 575px;
    height: 600px;
    /*background-color: red;*/
    float: left;
    padding: 10px 5px 5px 10px;
}

#list .list-content .list-content-left .list-content-cell1 {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
}

#list .list-content .list-content-left .list-content-cell1 h3 {
    margin-bottom: 10px;
}

#list .list-content .list-content-left .list-content-cell1 p {
    margin: 3px 0;
    color: #555555;
    font-size: 12px;
}

#list .list-content .list-content-left .list-content-cell2 {
    padding: 20px 0;
    height: 160px;
    border-bottom: 1px solid #e0e0e0;
}

#list .list-content .list-content-left .list-content-cell2 .cell-img {
    float: left;
}

#list .list-content .list-content-left .list-content-cell2 .cell-title{
    float: left;
    width: 360px;
    padding: 20px;
}

#list .list-content .list-content-left .list-content-cell2 h3 {
    margin-bottom: 10px;
}

#list .list-content .list-content-left .list-content-cell2 p {
    margin: 3px 0;
    color: #555555;
    font-size: 12px;
}

#list .list-content .list-content-right{
    width: 315px;
    height: 600px;
    /*background-color: red;*/
    float: left;
}

#list .list-content .list-content-right .right-top{
    height: 60px;
    width: 315px;
    /*background-color: green;*/
    padding: 20px;
}

#list .list-content .list-content-right .right-top h4{
    float: left;
}

#list .list-content .list-content-right .right-top div{
    float: right;
}

#list .list-content .list-content-right .right-top div img,
#list .list-content .list-content-right .right-top div span{
    vertical-align: middle;
}

#list .list-content .list-content-right .right-body{
    /*background-color: red;*/
    padding: 0 20px;
}

#list .list-content .list-content-right .right-body ul li{
    list-style: none;
    width: 130px;
    height: 40px;
    line-height: 40px;
    float: left;

    color: #666666;
    font-size: 14px;
}

/************************列表-end**********************/

网页界面:

Mac桌面

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撩课-喜欢IT,就上撩课(itlike.com)</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!--头部-->
    <header id="header">
        <!--头部的左边-->
        <ul class="header-left">
            <li><a href="" class="glyphicon glyphicon-apple"></a></li>
            <li><a href="#">itlike.com</a></li>
            <li><a href="#">文件</a></li>
            <li><a href="#">编辑</a></li>
            <li><a href="#">显示</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
        <!--头部的右边-->
        <ul class="header-right">
            <li class="glyphicon glyphicon-volume-up"></li>
            <li class="glyphicon glyphicon-align-left"></li>
            <li class="glyphicon glyphicon-question-sign"></li>
            <li class="glyphicon glyphicon-leaf"></li>
        </ul>
    </header>
    <!--中间的内容-->
    <section id="content">
        <div class="file">
            <img src="images/file.png" alt="" style="">
            <p>撩课资料</p>
        </div>

        <div class="file">
            <img src="images/file.png" alt="">
            <p>撩课视频</p>
        </div>

        <div class="file">
            <img src="images/file.png" alt="">
            <p>撩课资源</p>
        </div>
    </section>
    <!--尾部-->
    <footer id="footer">
        <div class="dock">
            <ul>
                <li><a href="#"><img src="images/zurb-icon.png"></a></li>
                <li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
                <li><a href="#"><img src="images/notable-icon.png"></a> </li>
                <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="images/google-icon.png"></a> </li>
                <li><a href="#"><img src="images/notable-icon.png"></a> </li>
                <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
                <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
                <li><a href="#"><img src="images/google-icon.png"></a> </li>
            </ul>
        </div>
    </footer>
</body>
</html>
## index.css

*{
     margin: 0;
     padding: 0;
     list-style: none;
     border: none;
 }

body{
    background: url("../images/desktop.png") no-repeat fixed;
    background-size: cover;
}

a{
    text-decoration: none !important;
    color: #000;
}

/*头部*/
#header{
    background-color: rgba(255, 255, 255, .6);
    width: 100%;
    height: 36px;
    line-height: 36px;

    /*box-shadow: 5px 5px 10px red;*/

    /*固定定位*/
    position: fixed;
    left: 0;
    top: 0;

    cursor: pointer;
    z-index: 999;

    font-size: 18px;
}

#header .header-left li{
    float: left;
    margin-left: 15px;
}

#header .header-right li{
    float: right;
    margin-right: 15px;
}

/*内容*/
#content{
    position: relative;
}

#content .file{
    width: 100px;
    text-align: center;
    color: #fff;

    position: absolute;
    cursor: pointer;
}

#content .file img{
    width: 100%;

}

#content .file:nth-child(1){
    left: 50px;
    top: 80px;
}

#content .file:nth-child(2){
    left: 50px;
    top: 220px;
}

#content .file:nth-child(3){
    left: 50px;
    top: 360px;
}

/*尾部*/
#footer{
    height: 60px;
    line-height: 60px;
    width: 100%;
    /*background-color: red;*/

    /*定位*/
    position: fixed;
    left: 0;
    bottom: 0;

    text-align: center;
}

#footer .dock{
    background: url("../images/dock_bg.png");
    width: 60%;
    height: 100%;
    /*块级标签居中*/
    margin: 0 auto;

    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#footer .dock ul{
    display: inline-block;
}

#footer .dock ul li{
    float: left;
    margin: 0 13px;

    /*设置动画的过渡效果*/
    transition: all 0.25s linear;
}

#footer .dock ul li img{
    width: 50px;
}

/*动画*/
#footer .dock ul li:hover{
    /*设置动画的方向*/
    transform-origin: bottom center;

    /*放大1.5倍*/
    transform: scale(1.5);
}



网页界面:

简书首页

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description"  content="简书是一个优质的创作社区,在这里,你可以任性地创作,一篇短文、一张照片、一首诗、一幅画……我们相信,每个人都是生活中的艺术家,有着无穷的创造力。">
    <meta name="keywords"  content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    <title>简书 - 创作你的创作</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!--头部导航-->
    <nav id="nav">
        <div class="nav-content">
            <!--导航文字-->
            <div class="nav-content-l">
                <a href="#">
                    <img src="images/js_logo.png" alt="">
                </a>
            </div>
            <!--导航列表-->
            <div class="nav-content-c">
                <ul>
                    <li><a href=""><img src="images/find_icon.png" alt="">发现</a></li>
                    <li><a href=""><img src="images/book_icon.png" alt="">关注</a></li>
                    <li><a href=""><img src="images/ld_icon.png" alt="">消息</a></li>
                    <li class="search-input">
                        <input type="text" value="搜索">
                        <img class="search-icon" src="images/fd_icon.png" alt="">
                    </li>
                </ul>
            </div>
            <!--导航头像-->
            <div class="nav-content-r">
                <img class="jsa-btn" src="images/jsa_icon.png" alt="">
                <img class="head-btn"  src="images/touxiang_img.png" alt="">
                <a href="#" class="write-btn">
                    <img src="images/write_icon.png" alt="">
                    写文章
                </a>
            </div>
        </div>
    </nav>
    <!--内容区域-->
    <div id="main">
        <!--内容区域左边-->
        <div class="main-left">
            <!--焦点图-->
            <div class="main-left-top">
                <img src="images/jdt.png" alt="">
            </div>
            <!--专题-->
            <div class="main-left-center">
                <a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
                <a href="javascript:;"><img src="images/2.jpg" alt="">读书</a>
                <a href="javascript:;"><img src="images/3.jpg" alt="">摄影</a>
                <a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
                <a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
                <a href="javascript:;"><img src="images/3.jpg" alt="">读书</a>
                <a href="javascript:;"><img src="images/2.jpg" alt="">摄影</a>
                <a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
                <a href="javascript:;">更多热门专题></a>
            </div>
            <!--文章列表-->
            <div class="main-left-cell">
                <div class="cell">
                    <dl>
                        <dt><img src="images/cell_img.jpg" alt=""></dt>
                        <dd>
                            <h3>排序图解:js排序算法实现</h3>
                            <p>@(汇总)[js] 基础 Javascript是一种弱类型语言, 它分别有什么优点和缺点 弱类型语言:简单好用,更灵活多变。 但是会牺牲性能,比如一...</p>
                            <a href=""><span>远方不会远</span></a>
                            <a href=""><img src="images/comment_icon.png" alt=""><span>0</span></a>
                            <a href=""><img src="images/like_icon.png" alt=""><span>10</span></a>
                        </dd>
                    </dl>
                </div>
                <div class="cell">
                    <dl>
                        <dt><img src="images/cell_img.jpg" alt=""></dt>
                        <dd>
                            <h3>排序图解:js排序算法实现</h3>
                            <p>@(汇总)[js] 基础 Javascript是一种弱类型语言, 它分别有什么优点和缺点 弱类型语言:简单好用,更灵活多变。 但是会牺牲性能,比如一...</p>
                            <a href=""><span>远方不会远</span></a>
                            <a href=""><img src="images/comment_icon.png" alt=""><span>0</span></a>
                            <a href=""><img src="images/like_icon.png" alt=""><span>10</span></a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <!--内容区域右边-->
        <div class="main-right">
            <!--右侧图片-->
            <div class="main-right-top">
                <a href=""><img src="images/jf01.png" alt=""></a>
                <a href=""><img src="images/jf02.png" alt=""></a>
                <a href=""><img src="images/jf03.png" alt=""></a>
                <a href=""><img src="images/jf04.png" alt=""></a>
                <a href=""><img src="images/jf05.png" alt=""></a>
            </div>
            <!--右侧二维码-->
            <div class="main-right-center">
                 <dl>
                     <dt><img src="images/itlike.png" alt=""></dt>
                     <dd>
                         <p>下载简书手机App></p>
                         <p>随时随地发现和创作内容</p>
                     </dd>
                 </dl>
            </div>
            <!--推荐作者-->
            <div class="main-right-bottom">
                <div class="main-right-bottom-head">
                    <span>推荐作者</span>
                    <span><a href="">换一批</a></span>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="images/author1.webp"></a>
                       <div>
                           <a href="#">王老师八卦美术史</a>
                           <p>写了132.4k字 · 788喜欢</p>
                           <a href="#" class="fouce">+关注</a>
                       </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/author2.webp"></a>
                       <div>
                           <a href="#">红瑀</a>
                           <p>写了320.6k字 · 10.6k喜欢</p>
                           <a href="#" class="fouce">+关注</a>
                       </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/author3.webp"></a>
                       <div>
                           <a href="#">须僧</a>
                           <p>写了241.4k字 · 3.5k喜欢</p>
                           <a href="#" class="fouce">+关注</a>
                       </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/author4.webp"></a>
                        <div>
                            <a href="#">一只支</a>
                            <p>写了635.4k字 · 1.6k喜欢</p>
                            <a href="#" class="fouce">+关注</a>
                        </div>
                    </li>
                    <li>
                        <a href="#"><img src="images/author3.webp"></a>
                      <div>
                          <a href="#">须僧</a>
                          <p>写了241.4k字 · 3.5k喜欢</p>
                          <a href="#" class="fouce">+关注</a>
                      </div>
                    </li>
                </ul>
                <a href="" class="get-all">查看全部></a>
            </div>
        </div>
    </div>
</body>
</html>
## index.css

/*****************************通用样式********************************/
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #666666;
}

img {
    vertical-align: middle;
}

body {
    /*height: 6000px;*/
    /*background-color: red;*/
}

/*******************************通用样式******************************/

/*******************************头部导航******************************/
#nav {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #efefef;

    position: fixed;
    left: 0;
    top: 0;
    background-color: white;
    /* box-shadow: 0 5px 5px #efefef;*/

    z-index: 999;
}

/*左边*/
#nav .nav-content {
    width: 1440px;
    height: 56px;
    /*background-color: red;*/

    margin: 0 auto;
}

#nav .nav-content .nav-content-l {
    float: left;
}

#nav .nav-content .nav-content-l img {
    width: 100px;
    height: 56px;
}

/*中间列表*/
#nav .nav-content .nav-content-c {
    width: 700px;
    height: 56px;
    /*background-color: red;*/
    float: left;
    margin-left: 120px;
}

#nav .nav-content .nav-content-c ul li {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    font-size: 17px;
}

#nav .nav-content .nav-content-c ul li a {
    /*background-color: red;*/
    display: inline-block;
    height: 56px;
    padding: 0 15px;
}

#nav .nav-content .nav-content-c ul li a:hover {
    background-color: #cccccc;
}

#nav .nav-content .nav-content-c ul li img {
    width: 23px;
    margin-right: 3px;
}

#nav .nav-content .nav-content-c .search-input {
    /*background-color: red;*/
    width: 255px;
    height: 56px;
    position: relative;
}

#nav .nav-content .nav-content-c .search-input input {
    width: 255px;
    height: 38px;
    border: none;
    background-color: #eeeeee;
    border-radius: 19px;
    padding-left: 10px;
    color: #666666;
}

#nav .nav-content .nav-content-c .search-input input:focus {
    outline: none;
}

#nav .nav-content .nav-content-c .search-input .search-icon {
    position: absolute;
    right: 10px;
    top: 17px;
}

/*右边*/
#nav .nav-content .nav-content-r {
    width: 300px;
    height: 56px;
    line-height: 56px;
    float: right;
}

#nav .nav-content .nav-content-r .jsa-btn {
    margin-right: 10px;
}

#nav .nav-content .nav-content-r .head-btn {
    width: 40px;
    border-radius: 50%;
    border: 1px solid #666666;
    margin: 0 10px;
}

#nav .nav-content .nav-content-r .write-btn {
    background-color: #ea6f5a;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;

    border-radius: 20px;
    color: #fff;
}

#nav .nav-content .nav-content-r .write-btn img {
    margin-left: 8px;
}

/*******************************头部导航******************************/

/*******************************内容导航******************************/
#main {
    width: 1000px;
    height: 2000px;
    /*background-color: red;*/
    margin: 70px auto;
}

#main .main-left {
    width: 688px;
    height: 800px;
    /*background-color: green;*/
    float: left;
}

#main .main-left .main-left-top {
    width: 100%;
    height: 270px;
}

#main .main-left .main-left-top img {
    width: 688px;
    height: 270px;
    border-radius: 10px;
}

/*中间*/
#main .main-left .main-left-center {
    width: 100%;
    height: 104px;
    /*background-color: red;*/
    margin-top: 20px;
}

#main .main-left .main-left-center > a {
    /*background-color: red;*/
    display: inline-block;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    margin: 0 18px 18px 0;
    padding-right: 15px;
    background-color: #f7f7f7;
}

#main .main-left .main-left-center > a:last-child {
    border: none;
    /*设置透明色*/
    background-color: transparent;
    font-size: 16px;
    color: #787878;
    line-height: 32px;
}

#main .main-left .main-left-center > a img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 15px;
    border-radius: 5px 0 0 5px;
}


/*列表*/
#main .main-left .main-left-cell {
    width: 100%;
    height: 500px;
    /*background-color: red;*/
}

#main .main-left .main-left-cell .cell {
    border-top: 1px solid #f0f0f0;
    height: 125px;
    padding: 10px 0;
}

#main .main-left .main-left-cell .cell dt {
    width: 20%;
    height: 100px;
    float: right;
}

#main .main-left .main-left-cell .cell dt img {
    width: 100%;
    border-radius: 5px;
}

#main .main-left .main-left-cell .cell dd{
    width: 80%;
    float: left;
}

#main .main-left .main-left-cell .cell dd p{
    font-size: 14px;
    margin: 5px 0;
    color: #666666;
    line-height: 25px;
}

#main .main-left .main-left-cell .cell dd a{
    margin-right: 10px;
    font-size: 12px;
    color: #b4b4b4;
}

#main .main-left .main-left-cell .cell dd a img{
    vertical-align: middle;
}

#main .main-left .main-left-cell .cell dd a span{
    vertical-align: middle;
}

#main .main-right {
    width: 300px;
    height: 800px;
    float: right;
    /*background-color: deepskyblue;*/
}

#main .main-right .main-right-top{
    width: 300px;
    height: 270px;
    /*background-color: red;*/
}

#main .main-right .main-right-top img{
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
}

#main .main-right .main-right-center{
    width: 100%;
    height: 92px;
    margin-top: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 15px 25px;
}

#main .main-right .main-right-center dt{
    float: left;
}

#main .main-right .main-right-center dt img{
    width: 60px;
    margin-right: 10px;
}

#main .main-right .main-right-center dd{
    margin-top: 5px;
    float: left;
}

#main .main-right .main-right-center dd p{
    margin-top: 3px;
    font-size: 16px;
}

#main .main-right .main-right-center dd p:last-child{
    color: #b8b8b8;
    font-size: 14px;
    margin-top: 5px;
}

#main .main-right .main-right-bottom{
    width: 100%;
    height: 300px;
    margin-top: 10px;
}

#main .main-right .main-right-bottom .main-right-bottom-head{
    height: 45px;
    line-height: 45px;
    /*background-color: red;*/
    padding: 0 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

#main .main-right .main-right-bottom .main-right-bottom-head span:first-child{
    float: left;
    color: #b8b8b8;
}

#main .main-right .main-right-bottom .main-right-bottom-head span:last-child{
    float: right;
}

#main .main-right .main-right-bottom .main-right-bottom-head span:last-child a{
    color: #b8b8b8;
}


#main .main-right .main-right-bottom ul li{
    width: 100%;
    height: 50px;
    margin-bottom: 10px;

    position: relative;
}

#main .main-right .main-right-bottom ul li img{
    width: 48px;
    border-radius: 50%;
    border: 1px solid #cccccc;
    margin-right: 10px;
}

#main .main-right .main-right-bottom ul li>a{
    float: left;
}

#main .main-right .main-right-bottom ul li>div{
    /*background-color: red;*/
    width: 220px;
    height: 50px;
    float: left;
}

#main .main-right .main-right-bottom ul li>div p{
    margin: 5px 0;
    font-size: 12px;
    color: #666666;
}

#main .main-right .main-right-bottom ul li>div .fouce{
    position: absolute;
    right: 0;
    top: 0;
}

#main .main-right .main-right-bottom .get-all{
   display: inline-block;
    width: 300px;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    border-radius: 5px;
    text-align: center;
    padding: 7px;
}

/*列表*/

/*******************************内容导航******************************/

网页界面:

登录注册页面

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撩课-喜欢IT,就上撩课(itlike.com)</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="content">
    <!--头部-->
    <div class="content-header clearfix">
        <a href="javascript:;" class="current">我要登录</a>
        <a href="javascript:;">我要注册</a>
    </div>
    <!--内容-->
    <div class="content-body">
        <!--登录-->
        <div class="dom"  style="display: block;">
            <form action="">
                <div class="s1">
                    <h4>账号</h4>
                    <input name="user" type="text" placeholder="用户名/手机/邮箱">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input name="psd" type="password" placeholder="请输入密码">
                </div>
                <div class="s2">
                    <input type="checkbox">
                    <span>记住密码</span>
                </div>
                <input type="button" class="btn" value="登录">
            </form>
            <div class="dom-footer">
                <div class="login-another">
                    <a href="">找回密码</a>
                    <span>| </span>
                    <span>还没有注册帐号?</span>
                    <a href="">立即注册</a>
                </div>
                <div class="login-three">
                    <span>使用第三方账号直接登录</span>
                    <div class="login-icon">
                        <a href=""><img src="images/qq.png" alt=""></a>
                        <a href=""><img src="images/wechat.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
        <!--注册-->
        <div class="dom">
            <form action="">
                <div class="s1">
                    <h4>手机号码</h4>
                    <input name="phone" type="text" placeholder="填写你的手机号码作为登录账户">
                </div>
                <div class="s1">
                    <h4>用户名</h4>
                    <input name="user" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字">
                </div>
                <div class="s1">
                    <h4>密码</h4>
                    <input name="pwd" type="password" placeholder="6-30位英文、数字、符号, 区分大小写">
                </div>
                <div class="s1 msg-code">
                    <h4>短信验证码</h4>
                    <input name="code" type="text" placeholder="填写短信验证码">
                    <button>获取验证码</button>
                </div>
                <div class="s1">
                    <h4>邀请码 <span style="color: purple">(选填)</span></h4>
                    <input name="pwd" type="password" placeholder="如果有邀请码, 请填写">
                </div>
                <input type="button" class="btn" value="注册">
            </form>
            <div class="dom-footer">
                <div class="login-three">
                    <span>使用第三方账号直接登录</span>
                    <div class="login-icon">
                        <a href=""><img src="images/qq.png" alt=""></a>
                        <a href=""><img src="images/wechat.png" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = function () {
        // 1.1 获取需要的标签
        let as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
        let contents = document.getElementsByClassName('dom');

        // 1.2 遍历
        for (let i = 0; i < as.length; i++) {
            // 1.2.1 取出单个对象
            let a = as[i];
            a.id = i;

            // 1.2.2 监听鼠标的移动事件
            a.onclick = function () {
                // 让所有的a的class都清除
                for (let j = 0; j < as.length; j++) {
                    as[j].className = '';
                    contents[j].style.display = 'none';
                }

                // 设置当前a的class
                this.className = 'current';
                // 从contents数组中取出对应的标签
                contents[this.id].style.display = 'block';
            }

        }
    };
</script>
</body>
</html>
## index.css

/*默认的样式*/
html, body, a, img, li, ul, p, span, div, h4, input {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

input:focus, .btn:focus, button:focus {
    outline: none;
}

/*默认的样式*/

/**********************************主要内容******************************/
#content {
    width: 500px;
    /*height: 600px;*/
    /*background-color: red;*/
    border: 1px solid #e0e0e0;

    margin: 50px auto;
}

/**********************************主要内容-头部******************************/
#content .content-header a {
    width: 50%;
    height: 60px;
    /*垂直居中*/
    line-height: 60px;
    background-color: #f5f5f5;
    /*水平居中*/
    text-align: center;
    color: #616161;
}

/*选中的样式*/
#content .content-header a.current {
    background-color: #fff;
    font-weight: bolder;
    color: purple;
}

#content .content-header a:first-child {
    float: left;
}

#content .content-header a:last-child {
    float: right;
}

/**********************************主要内容-身体******************************/
#content .content-body {
    padding: 50px;
}

#content .content-body .dom {
    width: 100%;
    /*height: 540px;*/
    /*background-color: red;*/
    /*隐藏标签*/
    display: none;
}

#content .content-body .dom .s1 {
    /*background-color: red;*/
    margin-bottom: 20px;
}

#content .content-body .dom .s1 h4 {
    color: #666666;
}

#content .content-body .dom .s1 input {
    width: 100%;
    height: 40px;
    margin-top: 5px;
    border-radius: 5px;
    padding-left: 10px;
    border: 1px solid #cccccc;
}

#content .content-body .dom .s2 {
    /*background-color: red;*/
    margin-bottom: 20px;
}

#content .content-body .btn {
    width: 100%;
    height: 40px;
    border: none;
    background-color: purple;
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
}

#content .dom-footer .login-another {
    /*background-color: red;*/
    color: #666666;
    margin-bottom: 20px;
}

#content .dom-footer .login-another span {
    margin: 0 5px;
}

#content .dom-footer .login-three {
    /*background-color: red;*/
    text-align: center;
    color: #666666;
}

#content .dom-footer .login-three > span {
    position: relative;
}

#content .dom-footer .login-three > span:before,
#content .dom-footer .login-three > span:after {
    content: '';
    display: inline-block;
    width: 100px;
    height: 1px;
    border-bottom: 1px solid #666666;

    position: absolute;
    top: 50%;
}

#content .dom-footer .login-three > span:before {
    left: -111px;
}

#content .dom-footer .login-three > span:after {
    right: -111px;
}

#content .dom-footer .login-three .login-icon {
    margin-top: 20px;
}

#content .dom-footer .login-three .login-icon img {
    width: 50px;
}

#content .content-body .dom .msg-code input {
    width: 50%;
    margin-right: 10px;
}

#content .content-body .dom .msg-code button {
    height: 40px;
    width: 40%;
    border: 1px solid #cccccc;
    background: #eeeeee;
    font-size: 16px;
}

网页界面:


苏宁易购首页

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货"/>
    <meta name="description" content="苏宁易购-综合网上购物平台,商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快,正品行货、全国联保、可门店自提,全网更低价,让您放心去喜欢!" />
    <link rel="stylesheet" href="source/style.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--top-banner-开始-->
    <div class="sn-top-banner">
        <!--版心-->
        <div class="top-banner-center w">
            <a href="javascript:">
                <img src="images/top-banner.jpg" alt="">
            </a>
            <a href="javascript:" class="close-banner"></a>
        </div>
    </div>
    <!--top-banner-结束-->
    <!--toolbar-开始-->
    <div class="sn-toolbar">
        <!--版心-->
        <div class="w">
            <!--左边-->
            <div class="fl">
                <ul>
                    <li class="down">
                        <a href="#">网站导航 </a>
                        <i><s></s></i>
                    </li>
                    <li class="down">
                        <a href="#">商家入驻 </a>
                        <i><s></s></i>
                    </li>
                    <li class="down">
                        <a href="#">客户服务 </a>
                        <i><s></s></i>
                    </li>
                    <li class="address">
                        <i class="address-icon"></i>
                        <a href="#">上海 </a>
                        <i><s></s></i>
                    </li>
                </ul>
            </div>
            <!--右边-->
            <div class="fr">
                <ul>
                    <li>
                        <a href="#" style="margin-right: 10px">请登录</a>
                        <a href="#" class="f60">注册有礼</a>
                    </li>
                    <li class="down">
                        <a href="#">我的订单</a>
                        <i><s></s></i>
                    </li>
                    <li class="down">
                        <a href="#">我的易购</a>
                        <i><s></s></i>
                    </li>
                    <li><a href="#">苏宁会员</a></li>
                    <li class="down">
                        <img class="cart" src="images/cart.png" alt="">
                        <a href="#" class="f60">购物车</a>
                        <i><s></s></i>
                    </li>
                    <li>
                        <a href="#">企业采购</a>
                    </li>
                    <li class="down">
                        <a href="#">手机苏宁</a>
                        <i><s></s></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--toolbar-结束-->
    <!--搜索-开始-->
    <div class="sn-top-search">
        <div class="w">
            <!--左边-->
            <div class="logo-set">
                <a href="#" class="main-logo"></a>
                <a href="#" class="sub-logo"></a>
            </div>
            <!--搜索框-->
            <div class="search-input">
                <input name="search" title="search" type="text" placeholder="周年庆赢好礼">
                <button>搜索</button>
            </div>
            <!--更多链接-->
            <div class="search-more-link">
                <ul>
                    <li><a href="#">烤箱</a></li>
                    <li><a href="#" class="f60">老板林内CP趴</a></li>
                    <li><a href="#">iPhone XS</a></li>
                    <li><a href="#"  class="f60">空气感拉拉裤</a></li>
                    <li><a href="#"  class="f60">空调立减500</a></li>
                    <li><a href="#">浪琴</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">冰箱</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--搜索-结束-->
    <!--nav-开始-->
    <div class="sn-nav clearfix">
        <div class="w">
            <!--菜单-->
            <div class="sn-nav-menu">
                 <div class="sn-nav-menu-all">
                     <a href="#">全部商品分类</a>
                 </div>
                 <div class="sn-nav-menu-one">
                     <ul class="index-list">
                         <li class="">
                             <i class="sn-1"></i>
                             <a target="_blank">手机</a><em>/</em>
                             <a target="_blank">运营商</a><em>/</em>
                             <a target="_blank">智能数码</a>
                         </li>
                         <li class="">
                             <i class="sn-2"></i>
                             <a target="_blank">电视</a><em>/</em>
                             <a target="_blank">冰箱</a><em>/</em>
                             <a target="_blank">空调</a><em>/</em>
                             <a target="_blank">洗衣机</a>
                         </li>
                         <li class="">
                             <i class="sn-3"></i>
                             <a target="_blank">厨卫大电</a><em>/</em>
                             <a target="_blank">生活家电</a><em>/</em>
                             <a target="_blank">厨具</a>
                         </li>
                         <li class="">
                             <i class="sn-4"></i>
                             <a target="_blank">电脑办公</a><em>/</em>
                             <a target="_blank">相机</a><em>/</em>
                             <a target="_blank">DIY</a>
                         </li>
                         <li class="">
                             <i class="sn-5"></i>
                             <a target="_blank">家居</a><em>/</em>
                             <a target="_blank">家具</a><em>/</em>
                             <a target="_blank">家装</a><em>/</em>
                             <a target="_blank">家纺</a>
                         </li>
                         <li>
                             <i class="sn-6"></i>
                             <a target="_blank">食品</a><em>/</em>
                             <a target="_blank">酒水</a><em>/</em>
                             <a target="_blank">生鲜</a><em>/</em>
                             <a target="_blank">特产</a>
                         </li>
                         <li>
                             <i class="sn-7"></i>
                             <a target="_blank">个护化妆</a><em>/</em>
                             <a target="_blank">纸品清洁</a><em>/</em>
                             <a target="_blank">宠物</a>
                         </li>
                         <li class="">
                             <i class="sn-8"></i>
                             <a target="_blank">母婴</a><em>/</em>
                             <a target="_blank">玩具</a><em>/</em>
                             <a target="_blank">车床</a><em>/</em>
                             <a target="_blank">童装</a>
                         </li>
                         <li>
                             <i class="sn-9"></i>
                             <a target="_blank">运动</a><em>/</em>
                             <a target="_blank">户外</a><em>/</em>
                             <a target="_blank">足球</a><em>/</em>
                             <a target="_blank">跑步机</a>
                         </li>
                         <li class="">
                             <i class="sn-10"></i>
                             <a target="_blank">男装</a><em>/</em>
                             <a target="_blank">女装</a><em>/</em>
                             <a target="_blank">内衣</a>
                         </li>
                         <li>
                             <i class="sn-11"></i>
                             <a target="_blank">鞋靴</a><em>/</em>
                             <a target="_blank">箱包</a><em>/</em>
                             <a target="_blank">钟表</a><em>/</em>
                             <a target="_blank">珠宝</a>
                         </li>
                         <li class="">
                             <i class="sn-12"></i>
                             <a target="_blank">汽摩</a><em>/</em>
                             <a target="_blank">二手车</a><em>/</em>
                             <a target="_blank">汽车用品</a>
                         </li>
                         <li class="">
                             <i class="sn-13"></i>
                             <a target="_blank">图书</a><em>/</em>
                             <a target="_blank">童书</a><em>/</em>
                             <a target="_blank">教辅教材</a>
                         </li>
                         <li>
                             <i class="sn-fun"></i>
                             <a target="_blank">理财</a><em>/</em>
                             <a target="_blank">分期</a><em>/</em>
                             <a target="_blank">保险</a><em>/</em>
                             <a target="_blank">房产</a>
                         </li>
                     </ul>
                 </div>
            </div>
            <!--items-->
            <div class="sn-nav-item">
                <ul>
                    <li><a href="#">大聚惠</a></li>
                    <li><a href="#">红孩子</a></li>
                    <li><a href="#">苏宁超市</a></li>
                    <li><a href="#">电器城</a></li>
                    <li><a href="#">生活家电</a></li>
                    <li><a href="#">时尚服饰</a></li>
                    <li><a href="#">苏宁国际</a></li>
                    <li><a href="#">苏宁Outlets</a></li>
                    <li><a href="#">苏宁金融</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--nav-结束-->
    <!--主要内容-第一块-->
    <div class="sn-first-screen">
        <div class="w" style="position: relative">
            <!--中间的轮播图-->
            <div class="sn-casual">
                <div>
                    <ul>
                        <li><a href=""><img src="images/casual.jpg" alt=""></a></li>
                    </ul>
                    <ol>
                        <li></li>
                    </ol>
                </div>
                <!--手风琴效果-->
                <div class="casual-bottom">
                    <img src="images/casual_bottom.jpg" alt="">
                </div>
            </div>
            <!--右边-->
            <div class="sn-first-right">
                <!--第一部分-->
                <div class="user-info">
                     <div class="user-img">
                         <a href="#"></a>
                     </div>
                     <p class="info">Hi,你好</p>
                     <div class="btn">
                         <a href="#" class="register">新人有礼</a>
                         <a href="#" class="superhy"></a>
                     </div>
                     <div class="enter">
                         <a href=""><em></em><span>领云钻</span><i>&gt;</i></a>
                         <a href=""><em></em><span>领券</span><i>&gt;</i></a>
                     </div>
                </div>
                <!--第二部分-->
                <div class="toutiao">
                    <ul>
                        <li><p><a href=""><i>[活动]</i>苏宁红孩子&新丝路少儿型秀大赛</a></p></li>
                        <li><p><a href=""><i>[知识]</i>别让孩子这样睡觉,可能比同龄人矮</a></p></li>
                    </ul>
                </div>
                <!--第三部分-->
                <div class="kuaijie">
                    <ul>
                        <li><a href="#"><i class="sn-4"></i><p>话费</p></a></li>
                        <li><a href="#"><i class="sn-4"></i><p>水电煤</p></a></li>
                        <li><a href="#"><i class="sn-4"></i><p>苏宁卡</p></a></li>
                        <li><a href="#"><i class="sn-4"></i><p>理财</p></a></li>
                        <li><a href="#"><i class="sn-4"></i><p>分期</p></a></li>
                        <li><a href="#"><i class="sn-4"></i><p>苏宁公益</p></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--主要内容-第一块-->
    <!--主要内容-第二块-->
    <div class="sn-two-screen">
        <div class="w">
             <!--头部-->
             <div class="two-top">
                 <a href="">
                     <img src="//image3.suning.cn/uimg/cms/img/153803915505375184.png" alt="">
                 </a>
             </div>
             <!--内容-->
             <div class="two-content">
                 <div class="content">
                     <ul>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt="" width="500px"></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                     </ul>
                 </div>
                 <div class="content">
                     <ul>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                         <li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li>
                     </ul>
                 </div>
             </div>
        </div>
    </div>
    <!--主要内容-第二块-->
    <!--尾部-->
    <div class="sn-footer">
        <div class="footer-top w">
            <div class="footer-top-promise clearfix">
                <dl>
                    <dt><a href=""><img src="images/promise_1.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_2.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_3.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_4.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
                <dl>
                    <dt><a href=""><img src="images/promise_5.jpg" alt="正品保障、提供发票"></a></dt>
                    <dd>
                        <p><strong>正品保障</strong></p>
                        <p>正品保障、提供发票</p>
                    </dd>
                </dl>
            </div>
            <div class="footer-top-shopping clearfix">
                <div class="w">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="">导购演示</a></dd>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">会员等级</a></dd>
                        <dd><a href="">常见问题</a></dd>
                        <dd><a href="">品牌大全</a></dd>
                    </dl>
                    <dl>
                        <dt>导购演示</dt>
                        <dd>免费注册</dd>
                        <dd>会员等级</dd>
                        <dd>常见问题</dd>
                        <dd>品牌大全</dd>
                        <dd>支付方式</dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="">导购演示</a></dd>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">会员等级</a></dd>
                        <dd><a href="">常见问题</a></dd>
                        <dd><a href="">品牌大全</a></dd>
                    </dl>
                    <dl>
                        <dt>导购演示</dt>
                        <dd>免费注册</dd>
                        <dd>会员等级</dd>
                        <dd>常见问题</dd>
                        <dd>品牌大全</dd>
                        <dd>支付方式</dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="">导购演示</a></dd>
                        <dd><a href="">免费注册</a></dd>
                        <dd><a href="">会员等级</a></dd>
                        <dd><a href="">常见问题</a></dd>
                        <dd><a href="">品牌大全</a></dd>
                    </dl>
                    <div class="app-down">
                        <p>身边苏宁</p>
                        <a href="#">全国300多个城市,上万个门店和服务终端期待您的光临,为您提供最贴心的服务!</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p class="url-list-links">
                <a href="#">苏宁互联</a>|
                <a href="#">苏宁金融</a>|
                <a href="#">苏宁支付</a>|
                <a href="#">PP视频</a>|
                <a href="#">红孩子</a>|
                <a href="#">苏宁物流</a>|
                <a href="#">手机苏宁</a>|
                <a href="#">零售云</a>|
                <a href="#">知识产权举报</a>|
                <a href="#">投资者关系</a>
            </p>
            <p class="url-list-links">
                <a href="#">联系我们</a>|
                <a href="#">诚聘英才</a>|
                <a href="#">供应商入驻</a>|
                <a href="#">广告平台</a>|
                <a href="#">苏宁联盟</a>|
                <a href="#">苏宁招标</a>|
                <a href="#">友情链接</a>|
                <a href="#">法律申明</a>|
                <a href="#">用户体验提升计划</a>|
                <a href="#">股东会员认证</a>
            </p>
            <div class="footer-bottom-copyright">
                Copyright© 2002-2018,苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131<br>
                苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书(苏)-非经营性-2016-0005<br>
                本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”(包装及参数、售后保障等商品信息除外)
            </div>
            <div class="footer-bottom-img">
                <a href=""><img src="images/chengxin.png" alt=""></a>
                <a href=""><img src="images/unicom.png" alt=""></a>
                <a href=""><img src="images/dianxin.jpg" alt=""></a>
                <a href=""><img src="images/dianzi.png" alt=""></a>
            </div>
        </div>
    </div>
    <!--尾部-->
</body>
</html>
## base.css

@charset "UTF-8";

/*初始化*/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, a, img, button {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

form, fieldset, legend, input {
    border: none;
    outline: none;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #F60;
}

body, button, input, select, textarea {
    /*
       font-size: 12px;
       line-height: 150%;
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       */
    font: 12px/1.5 "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
}

.clearfix:before,
.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
/*隐藏*/
.hide{
    display: none;
}

.f60{
    color: #FF6600;
}

/*版心*/
.w{
    width: 1190px;
    margin: 0 auto;
}

.fl{
   float: left;
}

.fr{
    float: right;
}

.tl{
text-align: left;
}

.tc{
    text-align: center;
}

.tr{
    text-align: right;
}

s, i, em{
    font-style: normal;
    text-decoration: none;
}
## index.css

/***************************top-banner-开始*************************/
.sn-top-banner {
    background-color: #164fa6;
    height: 100px;
    position: relative;
}

.sn-top-banner .close-banner {
    position: absolute;
    top: 3px;
    right: 56px;
    width: 15px;
    height: 15px;
    background: url("../images/index.png") -241px -145px;
}

.sn-top-banner .close-banner:hover {
    background-position: -256px -145px;
}

/***************************top-banner-结束*************************/

/***************************toolbar-开始*************************/
.sn-toolbar {
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;
}

.sn-toolbar li {
    float: left;
    padding: 0 15px;
}

.sn-toolbar .down {
    position: relative;
    /*background-color: red;*/
    padding: 0 25px 0 10px;
}

.sn-toolbar .down i {
    width: 14px;
    height: 6px;
    /*background-color: green;*/

    position: absolute;
    top: 16px;
    right: 11px;
    overflow: hidden;

}

.sn-toolbar .down i s {
    position: absolute;
    font-size: 20px;
    top: -19px;
    color: #666;
}

.sn-toolbar .address {
    position: relative;
}

.sn-toolbar .address .address-icon {
    position: absolute;
    left: 0;
    top: 7px;
    width: 20px;
    height: 20px;
    background: url("../images/index.png") -387px -181px;
}

.sn-toolbar .address s {
    color: #bbbbbb;
}

.sn-toolbar .cart {
    width: 15px;

    position: absolute;
    left: -8px;
    top: 7px;
}

/***************************toolbar-结束*************************/

/***************************搜索-开始*************************/
.sn-top-search {
    height: 110px;
    /*background-color: blue;*/
}

.sn-top-search .logo-set {
    width: 400px;
    height: 110px;
    /*background-color: red;*/
    float: left;
}

.sn-top-search .logo-set .main-logo {
    width: 190px;
    height: 90px;
    background: url("../images/sn-logo.png") no-repeat center;

}

.sn-top-search .logo-set .sub-logo {
    width: 160px;
    height: 100px;
    margin-top: 5px;
    background: url("../images/sn-sub-logo.gif") no-repeat center;
}

.sn-top-search .logo-set .main-logo, .sn-top-search .logo-set .sub-logo {
    -webkit-background-size: contain;
    background-size: contain;
    float: left;
}

.sn-top-search .search-input {
    float: left;
    width: 538px;
    height: 36px;
    /*background-color: red;*/
    padding-top: 30px;
}

.sn-top-search .search-input input {
    padding-left: 5px;
    float: left;
    color: #cccccc;
    width: 449px;
    height: 32px;
    border: 2px solid #F80;
    border-right: 0;
}

.sn-top-search .search-input button {
    border: none;
    float: left;
    height: 36px;
    width: 82px;
    background-color: #F80;
    color: #fff;
    font: 400 18px/36px "microsoft yahei";
    cursor: pointer;
}

.sn-top-search .search-more-link {
    float: left;
    width: 520px;
    height: 30px;
    /*background-color: green;*/
}

.sn-top-search .search-more-link li {
    float: left;
    margin: 7px 10px 7px 0;
    border-left: 1px solid #c0c0c0;
    padding-left: 5px;
}

.sn-top-search .search-more-link li:first-child {
    border: none;
}

/*.sn-top-search .search-more-link li + li{

}*/

/***************************搜索-结束*************************/

/***************************导航-开始*************************/
.sn-nav {
    width: 100%;
    height: 38px;
    /*background-color: red;*/
}

.sn-nav .sn-nav-menu {
    width: 210px;
    height: 38px;
    float: left;
    z-index: 1;

    /*background-color: green;*/
}

.sn-nav .sn-nav-menu .sn-nav-menu-all a {
    display: block;
    width: 190px;
    height: 38px;
    background-color: #f90;
    color: white;
    font: 600 14px/38px "microsoft yahei";
    padding-left: 30px;
    box-sizing: border-box;

    position: relative;
}

.sn-nav .sn-nav-menu .sn-nav-menu-all a:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background: url("../images/index.png") 0 0;

    position: absolute;
    left: 11px;
    top: 14px;
}

.sn-nav-menu .sn-nav-menu-one {
    width: 190px;
    height: 440px;
    background-color: #252221;
}

.sn-nav .sn-nav-item li {
    float: left;
}

.sn-nav .sn-nav-item li a {
    display: inline-block;
    height: 38px;
    padding: 0 12px;
    font: 600 16px/38px "microsoft yahei";
    color: #333333;
}

.sn-nav .sn-nav-item li a:hover {
    color: #f60;
}

.sn-nav .sn-nav-menu-one .index-list li {
    height: 31px;
    padding: 0 10px 0 8px;
    font: 400 13px/31px "microsoft yahei";
    color: #666;
}

.sn-nav .sn-nav-menu-one .index-list li a {
    color: #fff;
}

/***************************导航-结束*************************/

/***************************轮播图-开始*************************/
.sn-first-screen {
    width: 100%;
    height: 440px;
    background-color: purple;
    /*position: relative;*/
}

.sn-first-screen .sn-casual {
    margin-left: 190px;
    width: 830px;
    height: 440px;

    position: relative;
}

.sn-first-screen .sn-casual .casual-bottom {
    position: absolute;
    left: 0;
    bottom: 10px;

    text-align: center;
}

.sn-first-screen .sn-casual .casual-bottom img {
    width: 96%;
}

.sn-first-screen .sn-first-right {
    width: 170px;
    height: 435px;
    background-color: #fff;

    position: absolute;
    left: 1020px;
    top: 5px;
}

.sn-first-screen .sn-first-right .user-info {
    position: relative;
    width: 170px;
    height: 155px;
    padding: 11px 0 2px;
    border-bottom: 1px solid #f2f2f2;
}

.sn-first-screen .sn-first-right .user-info .user-img {
    text-align: center;
}

.sn-first-screen .sn-first-right .user-info .user-img a {
    display: inline-block;
    width: 58px;
    height: 58px;
    /*background-color: green;*/
    background: url("../images/index.png ") -91px -23px;
}

.sn-first-screen .sn-first-right .user-info .info {
    text-align: center;
    margin-bottom: 10px;
}

.sn-first-screen .sn-first-right .user-info .btn {
    display: flex;
    justify-content: space-around;
}

.sn-first-screen .sn-first-right .user-info .btn a.register {
    display: inline-block;
    width: 68px;
    height: 20px;
    border: 1px solid #F90;
    color: #ffa114;
    line-height: 20px;
    text-align: center;
}

.sn-first-screen .sn-first-right .user-info .btn a.superhy {
    display: inline-block;
    width: 70px;
    height: 22px;
    background: url("../images/index.png") -295px -251px;
}

.sn-first-screen .sn-first-right .user-info .enter {
    /*background-color: red;*/
    text-align: center;
    margin: 10px 0;
}

.sn-first-screen .sn-first-right .user-info .enter a {
    margin: 0 5px;
}

.sn-first-screen .sn-first-right .user-info .enter a em {
    display: inline-block;
    width: 16px;
    height: 14px;
    vertical-align: middle;
    margin-right: 5px;
}

.sn-first-screen .sn-first-right .user-info .enter a:first-child em {
    background: url("../images/index.png") -111px 0;
}

.sn-first-screen .sn-first-right .user-info .enter a:last-child em {
    background: url("../images/index.png") -88px 0;
}

/*头条*/
.sn-first-screen .sn-first-right .toutiao {
    width: 150px;
    height: 97px;
    margin: 11px 10px 12px;
    /*background-color: red;*/
    line-height: 20px;
}

.sn-first-screen .sn-first-right .toutiao li {
    height: 48px;
}

.sn-first-screen .sn-first-right .toutiao li i {
    color: #f90;
    margin-right: 5px;
}

/*快捷*/
.sn-first-screen .sn-first-right .kuaijie {
    width: 170px;
    height: 145px;
    overflow: hidden;
    border-top: 1px solid #f2f2f2;
}

.sn-first-screen .sn-first-right .kuaijie ul li {
    float: left;
    width: 55px;
    height: 72px;

    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #f2f2f2;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.sn-first-screen .sn-first-right .kuaijie ul li:nth-child(3), .sn-first-screen .sn-first-right .kuaijie ul li:nth-child(6) {
    border-right: 0;
}

.sn-first-screen .sn-first-right .kuaijie ul li i {
    font-size: 40px;
}

/***************************轮播图-结束*************************/

/***************************主要内容-第二块-开始*************************/
.sn-two-screen {
    background-color: #f2f2f2;
    padding-bottom: 20px;
}

.sn-two-screen .two-top img {
    width: 100%;
    vertical-align: top;
}

.sn-two-screen .two-content .content {
    background-color: #f90;
    padding-bottom: 10px;
}

.sn-two-screen .two-content .content ul{
    display: flex;
    justify-content: space-between;
}

.sn-two-screen .two-content .content ul li img{
    max-width: 230px !important;
    max-height: 190px !important;
}

/***************************主要内容-第二块-结束*************************/

/***************************尾部-结束*************************/
.sn-footer{
    background: #f5f5f5;
    border-top: 1px solid #e7e7e7;
    padding: 20px 0;
}

.sn-footer .footer-top .footer-top-promise{
    width: 100%;
    /*background-color: red;*/
}

.sn-footer .footer-top .footer-top-promise dl{
    float: left;
    width: 20%;
    /*background-color: green;*/
}

.sn-footer .footer-top .footer-top-promise dl dt{
    float: left;
    margin-right: 8px;
    width: 48px;
    height: 48px;
}

.sn-footer .footer-top .footer-top-promise dl dd p{
    line-height: 24px;
}

.sn-footer .footer-top .footer-top-shopping{
   padding: 10px 0;
}

.sn-footer .footer-top .footer-top-shopping dl{
    float: left;
    width: 200px;
}

.sn-footer .footer-top .footer-top-shopping dl dt{
    font: 600 14px/40px "microsoft yahei";
    color: #545454;
}

.sn-footer .footer-top .footer-top-shopping dl dd{
    height: 20px;
}

.sn-footer .footer-top .footer-top-shopping .app-down{
    /*background-color: red;*/
    width: 90px;
    height: 180px;
    float: left;
}

.sn-footer .footer-top .footer-top-shopping .app-down  p{
    height: 40px;
    font: 600 14px/40px "microsoft yahei";
    color: #545454;
}

.sn-footer  .footer-bottom{
    background-color: #fff;
    text-align: center;
    padding: 30px 0;
}

.sn-footer  .footer-bottom .url-list-links{
    line-height: 25px;
    height: 25px;
}

.sn-footer  .footer-bottom .url-list-links a{
    margin: 0 8px;
}

.sn-footer  .footer-bottom .footer-bottom-copyright{
    padding: 10px 0;
    line-height: 25px;
}

.footer-bottom-img a{
    margin: 0 5px;
}

/***************************尾部-结束*************************/

网页界面:

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页