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

悠悠 2022-12-12 04:44 263阅读 0赞

## 河马牙医首页 ##

## 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>

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

## 百度首页 ##

## 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">
        
        <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">
                
                <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>
                
                <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>
                
                <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**********************/

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

## 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);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]  
![20201005234807584.png_pic_center][]  
![20201005234816497.png_pic_center][]

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

## 简书首页 ##

## 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;
    }
    
    /*列表*/
    
    /*******************************内容导航******************************/

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

## 登录注册页面 ##

## 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;
    }

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]

## 苏宁易购首页 ##

## 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>
        
        <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>
        
        
        <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>
        
        
        <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>
        
        
        <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>
                
                <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>
        
        
        <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>></i></a>
                             <a href=""><em></em><span>领券</span><i>></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;
    }
    
    /***************************尾部-结束*************************/

#### 网页界面： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3fe873edc0234d6e94117d2abb48196a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0199b234a4b64edc89a817ee9aa98a92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/7feb0b72f48f4c04a6849f5473d57c4a.png
[20201005234807584.png_pic_center]: /images/20221123/693aa0e62326452b82b02f310f837f30.png
[20201005234816497.png_pic_center]: /images/20221123/048d20d8ed1347a0ac0e08a0ac93f19f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/e28deaebbfdc41aa9f78de7742696052.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/61479cb64dc44ba9b91a20ee6421473d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/3658b6d16fd44dccbced9da5490ebe2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/465fa1cb0942499499b0be382c963fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/410ca0ccf7034721b9ae4fa413a28328.png