品优购首页_html5

效果图

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购</title>
    <link rel="stylesheet" href="css/base..css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <section class="section">
        <div class="w">
            <h5>品优购欢迎您！&nbsp;</h5> <a href="#">请登录&nbsp;&nbsp;   <i> 免费注册</i> </a>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow_icon"> 我的品优购</li>
                    <li></li>
                    <li>品优购会员</li>
                    <li></li>
                    <li>企业采购</li>
                    <li></li>
                    <li class="arrow_icon">关注品优购</li>
                    <li></li>
                    <li class="arrow_icon">客户服务 </li>
                    <li></li>
                    <li class="arrow_icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <header class="w">
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">
                    品优购商城
                </a>
            </h1>
        </div>
        <div class="search">
            <input type="text" placeholder="语言开发">
            <button>搜索</button>
        </div>
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>
        <div class="shopcar">
            我的购物车
            <i class="count"> 8</i>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a> </li>
                        <li><a href="#">手机</a>、 <a href="#">数码</a>、<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="#">汽车、汽车用品</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>
                    </ul>
                </div>
            </div>
            <div class="navitems">
                <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="#">有趣</a></li>
                </ul>
            </div>
        </div>

    </nav>
    <div class="w">
        <div class="main">
            <div class="focus">
                <ul>
                    <li><img src="upload/图层179.png" alt=""></li>
                </ul>
            </div>
            <div class="newsflash">
                <div class="quicknews1">
                    <div class="new_hd">
                        品优购快报
                        <a href="#">更多</a>
                    </div>
                    <div class="news_bd">
                        <ul>
                            <li><a href="#"><strong>【特惠】</strong>1234567891011234</a></li>
                            <li><a href="#"><strong>【特惠】</strong>1234567891011234</a></li>
                            <li><a href="#"><strong>【特惠】</strong>1234567891011234</a></li>
                            <li><a href="#"><strong>【特惠】</strong>1234567891011234</a></li>
                            <li><a href="#"><strong>【特惠】</strong>1234567891011234</a></li>
                        </ul>
                    </div>
                </div>
                <div class="quicknews2">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>
                <div class="quicknews3">
                    <img src="upload/图层178.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="w">
        <div class="rec">
            <div class="rec1">
                <img src="images/recom.png" alt="">
            </div>
            <div class="rec2">
                <a href="#"><img src="images/recom_03.jpg" alt=""></a>
                <a href="#"><img src="images/recom_03.jpg" alt=""></a>
                <a href="#"><img src="images/recom_03.jpg" alt=""></a>
                <a href="#"><img src="images/recom_03.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <div class="w">
        <div class="life">
            <div class="life_hd">
                <div class="life_hd_left">
                    家用电器
                </div>
                <div class="life_hd_right">
                    <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>
                        <li>空气/净水</li>
                        <li>|</li>
                        <li>新奇特</li>
                        <li>|</li>
                        <li>高端电器</li>
                    </ul>
                </div>
            </div>
            <div class="life_bd">
                <div class="floor1">
                    <ul>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                    </ul>
                    <a href="#"><img src="upload/floor-1-1.png" alt=""></a>
                </div>
                <div class="floor2">
                    <a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
                </div>
                <div class="floor3">
                    <a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                </div>
                <div class="floor4">
                    <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
                </div>
                <div class="floor5">
                    <a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
                    <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <div class="w">
        <div class="life">
            <div class="life_hd">
                <div class="life_hd_left">
                    手机通讯
                </div>
                <div class="life_hd_right">
                    <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>
                        <li>空气/净水</li>
                        <li>|</li>
                        <li>新奇特</li>
                        <li>|</li>
                        <li>高端电器</li>
                    </ul>
                </div>
            </div>
            <div class="life_bd">
                <div class="floor1">
                    <ul>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                        <li>手机通讯</li>
                    </ul>
                    <a href="#"><img src="upload/floor-1-1.png" alt=""></a>
                </div>
                <div class="floor2">
                    <a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
                    <div class="circle">
                        <li class="selected"></li>
                        <li></li>
                        <li></li>
                    </div>

                </div>
                <div class="floor3">
                    <a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
                    <a href="#"><img src="upload/floor-1-3.png" alt=""></a>
                </div>
                <div class="floor4">
                    <a href="#"><img src="upload/floor-1-4.png" alt=""></a>
                </div>
                <div class="floor5">
                    <a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
                    <a href="#"><img src="upload/floor-1-6.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mod_help">
                <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>
                    <dd><a href="#">联系客服</a></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>
                    <dd><a href="#">联系客服</a></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>
                    <dd><a href="#">联系客服</a></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>
                    <dd><a href="#">联系客服</a></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>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <img src="images/wx_cz.jpg" alt=""> 品优购客户端
                </dl>
            </div>
            <div class="mod_copyright">
                <div class="review">
                    <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> |
                    <a href="#"> English Site</a> |
                    <a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

base.css

/* 把我们所有标签的内外边距清零 */

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    Box-sizing: border-Box;
}


/* em 和 i 斜体的文字不倾斜 */

em,
i {
    font-style: normal
}


/* 去掉li 的小圆点 */

li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

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

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0;
    outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}


/* 清除浮动 */

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

common.css

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'), url('../fonts/icomoon.woff?tomleg') format('woff'), url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.style_red {
    color: #c81623;
}

.fr {
    float: right;
}

.section {
    width: 100%;
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
}

.section .w h5 {
    float: left;
    font-size: 12px;
    color: #666;
    font-weight: 400;
}

.section .w a {
    float: left;
    font-size: 12px;
    color: #666;
}

.section .w a i {
    color: #c81623;
}

.fr {
    float: right;
}

.fr ul li {
    float: left;
    font-size: 12px;
}

.fr ul li:nth-child(2n) {
    width: 1px;
    height: 11px;
    background-color: #666;
    margin: 9px 14px 0;
}

.arrow_icon::after {
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

header {
    position: relative;
    padding-top: 25px;
    width: 1200px;
    height: 105px;
}

.logo a {
    position: absolute;
    /* top: 24px; */
    width: 170px;
    height: 55px;
    background: url(../images/logo.png);
    font-size: 0;
}

.search {
    position: absolute;
    left: 343px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search input {
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.search button {
    float: right;
    width: 80px;
    height: 32px;
    font-size: 16px;
    color: #fff;
    background-color: #b1191a;
}

.hotwords {
    position: absolute;
    left: 343px;
    top: 66px;
}

.hotwords a {
    margin: 0 10px;
}

.shopcar {
    position: absolute;
    right: 63px;
    width: 140px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.shopcar::before {
    content: '\e93a';
    font-family: 'icomoon';
    margin-right: 5px;
    color: #b1191a;
}

.shopcar::after {
    content: '\e920';
    font-family: 'icomoon';
    margin-left: 10px;
}

.count {
    position: absolute;
    top: -5px;
    left: 105px;
    width: 16px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    border-radius: 7px 7px 7px 0;
}


/* nav模块制作 */

.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}

.nav .navitems {
    float: left;
}

.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

.dropdown .dd {
    /* display: none; */
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}

.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.dropdown .dd ul li:hover {
    background-color: #fff;
}

.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-family: 'icomoon';
    content: '\e920';
    font-size: 14px;
}

.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}

.dropdown .dd ul li:hover a {
    color: #c81623;
}

.navitems ul li {
    float: left;
}

.navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}


/* 底部模块制作 */

.footer {
    height: 417px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

.footer .mod_service {
    height: 80px;
    /* width: 100%; */
    border-bottom: 1px solid #ccc;
}

.mod_service ul li {
    float: left;
    width: 300px;
    height: 50px;
    padding-left: 35px;
}

.mod_service ul li h5 {
    float: left;
    height: 50px;
    width: 50px;
    background: url(../images/icons.png) -252px -2px no-repeat;
    margin-right: 5px;
}

.service_txt h4 {
    font-size: 14px;
    color: #333;
    font-weight: 400;
}

.service_txt p {
    font-size: 12px;
    color: #666;
}

.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    padding-left: 54px;
    padding-top: 20px;
}

.mod_help dl {
    float: left;
    width: 198px;
}

.mod_help dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.mod_help dl dd {
    font-size: 12px;
    color: #666;
}

.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}

.mod_copyright {
    text-align: center;
    padding-top: 18px;
    padding-left: 103px;
}

.review a {
    margin: 0 5px;
    color: #666;
    font-size: 12px;
}

.copyright {
    margin-top: 10px;
    text-align: center;
}

index.css

    .main {
        width: 980px;
        height: 455px;
        margin-left: 220px;
        margin-top: 10px;
    }
    
    .focus {
        float: left;
        width: 721px;
        height: 455px;
    }
    
    .newsflash {
        float: right;
        width: 250px;
        height: 453px;
    }
    
    .quicknews1 {
        width: 250px;
        height: 164px;
        border: 1px solid #ccc;
    }
    
    .quicknews1 .new_hd {
        width: 250px;
        height: 33px;
        font-size: 14px;
        color: #333;
        line-height: 33px;
        border-bottom: 1px dotted #ccc;
        padding: 0 15px;
    }
    
    .new_hd a {
        float: right;
        font-size: 10px;
    }
    
    .new_hd a::after {
        content: '\e920';
        font-family: 'icomoon';
        padding: 0 3px;
    }
    
    .news_bd {
        height: 131px;
        padding: 5px 0 0 10px;
    }
    
    .news_bd ul li {
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        white-space: Nowrap;
        text-overflow: ellipsis;
    }
    
    .quicknews2 ul {
        width: 252px;
    }
    
    .quicknews2 {
        margin-top: -1px;
        overflow: hidden;
        height: 209px;
        /* background-color: orange; */
        border: 1px solid #ccc;
    }
    
    .quicknews2 ul li {
        float: left;
        width: 63px;
        height: 71px;
        text-align: center;
        /* line-height: 71px; */
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    
    .quicknews2 ul li i {
        display: inline-block;
        width: 24px;
        height: 28px;
        margin-top: 12px;
        background: url(../images/icons.png) no-repeat -19px -15px;
    }
    
    .quicknews3 {
        margin-top: 5px;
        height: 73px;
    }
    
    .rec {
        height: 163px;
        margin-top: 5px;
    }
    
    .rec .rec1 {
        float: left;
        width: 208px;
        height: 163px;
        text-align: center;
        background-color: #5c5251;
        padding-top: 30px;
    }
    
    .rec .rec2 img {
        float: left;
        width: 248px;
        height: 163px;
    }
    
    .rec .rec2 a {
        position: relative;
    }
    
    .rec .rec2 a:nth-child(-n+3)::after {
        content: '';
        position: absolute;
        top: 10px;
        width: 1px;
        height: 143px;
        background-color: #ccc;
    }
    
    .life {
        height: 420px;
        margin-top: 15px;
        /* background-color: orange; */
    }
    
    .life_hd {
        height: 45px;
        text-align: center;
        line-height: 45px;
        border-bottom: 2px solid #c81623;
    }
    
    .life_hd_left {
        float: left;
        font-size: 18px;
        font-weight: 700;
        color: #c81623;
        width: 72px;
    }
    
    .life_hd_right {
        float: right;
        width: 660px;
    }
    
    .life_hd_right ul li {
        float: left;
    }
    
    .life_hd_right ul li:nth-child(2n) {
        margin: 0 15px;
    }
    
    .life_bd {
        height: 360px;
        /* background-color: orange; */
    }
    
    .floor1 {
        float: left;
        width: 210px;
        background-color: #f9f9f9;
    }
    
    .floor1 ul {
        padding-left: 10px;
    }
    
    .floor1 ul li {
        float: left;
        width: 86px;
        height: 34px;
        font-size: 12px;
        color: #666666;
        text-align: center;
        line-height: 34px;
        border-bottom: 1px solid #ccc;
        margin-right: 10px;
    }
    
    .floor1 img {
        width: 210px;
    }
    
    .floor2 {
        position: relative;
        float: left;
        width: 329px;
    }
    
    .floor3 {
        float: left;
        width: 221px;
        border-right: 1px solid #ccc;
        /* background-color: #ccc; */
    }
    
    .floor4 {
        float: left;
        width: 221px;
        border-right: 1px solid #ccc;
        /* background-color: #ccc; */
    }
    
    .floor5 {
        float: left;
        width: 219px;
        /* background-color: #ccc; */
    }
    
    .bb {
        /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
        display: block;
        border-bottom: 1px solid #ccc;
    }
    
    .circle {
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: 15px;
        width: 70px;
        height: 13px;
        background: rgba(255, 255, 255, .5);
        border-radius: 7px;
    }
    
    .circle li {
        float: left;
        width: 12px;
        height: 12px;
        border-radius: 6px;
        background-color: #333;
        margin: 1px 5px;
    }
    
    .circle .selected {
        background-color: #fff;
    }

品优购首页_html5_css3

效果图

index.html

base.css

common.css

index.css

相关文章