其他分享
首页 > 其他分享> > 周周结

周周结

作者:互联网

本周对bootstrap进行了一系列的复习
boostrap的优点
对bootstrap栅格系统的一系列的复习
栅格系统
对响应式工具的复习,以及弄清楚在不同屏幕下的屏幕适配问题

响应式工具的开发

  1. 用bootstrap和less写小米官网案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="container one">
            <div class="row">
                <div class="col-md-12 top">
            <div class="zuo">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li></li>
                    <li class="hidden-xs"><a href="#">MIUI</a></li>
                    <li class="hidden-xs"></li>
                    <li class="hidden-xs"><a href="#">IoT</a></li>
                    <li class="hidden-xs"></li>
                    <li><a href="#">云服务</a></li>
                    <li></li>
                    <li><a href="#">天星数科</a></li>
                    <li></li>
                    <li><a href="#">有品</a></li>
                    <li class="hidden-xs"></li>
                    <li class="hidden-xs"><a href="#">小爱开放平台</a></li>
                    <li class="hidden-xs"></li>
                    <li class="hidden-xs"><a href="#">企业团购</a></li>
                    <li class="hidden-xs"></li>
                    <li class="hidden-xs"><a href="#">资质证照</a></li>
                    <li class="hidden-xs"></li>
                    <li class="hidden-xs"><a href="#">协议规则</a></li>
                    <li class="hidden-sm"></li>
                    <li class="hidden-sm"><a href="#">下载app</a></li>
                    <li class="hidden-sm"></li>
                    <li class="hidden-sm"><a href="#">智能生活</a></li>
                    <li class="hidden-sm"></li>
                    <li class="hidden-sm"><a href="#">Select&nbsp;Location</a></li>
                </ul>
            </div>
            <div class="you visible-lg">
                <a href="#">登录</a>
                <span></span>
                <a href="#">注册</a>
                <span></span>
                <a href="#">消息通知</a>
                </div>
                <div class="buy">
                    <a href="#" class="glyphicon glyphicon-shopping-cart">购物车(0)</a>
                </div>
            </div>
                </div>
        </div>
    </header>
    <div class="container">
        <!-- <div class="nav"> -->
            <div class="row nav">
        <div class="col-md-1 col-sm-1 col-xs-1 tu visible-lg">
            <a href="#" class="logo">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1 tu wo visible-sm">
            <a href="#" class="logo">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="col-md-1 col-sm-1 col-xs-1 tu visible-md">
            <a href="#" class="logo">
                <img src="images/logo.png" alt="">
            </a>
        </div>
        <div class="col-md-7 col-sm-7 col-xs-7 col-md-offset-1 hot visible-lg">
            <a href="#">小米手机</a>
            <a href="#">Redmi红米</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">家电</a>
            <a href="#">路由器</a>
            <a href="#">智能硬件</a>
            <a href="#">服务</a>
            <a href="#">社区</a>
        </div>
        <div class="col-md-7 col-sm-7 col-xs-7 col-md-offset-1 hot visible-md">
            <a href="#">小米手机</a>
            <a href="#">Redmi红米</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">家电</a>
            <a href="#">路由器</a>
            <a href="#">智能硬件</a>
        </div>
        <div class="col-md-7 col-sm-7 col-xs-7 col-md-offset-1 hot visible-sm">
            <a href="#">小米手机</a>
            <a href="#">Redmi红米</a>
            <a href="#">电视</a>
            <a href="#">笔记本</a>
            <a href="#">家电</a>
        </div>
        <div class="col-md-7 col-sm-7 col-xs-7 col-md-offset-1 hot visible-xs">
            <a href="#">小米手机你值得拥有,快去抢k40</a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-5 sou">
            <div class="input-group sousuo">
                <input type="text" class="form-control" placeholder="Search for..." value="智能家电节">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
              </div>
        </div>
    </div>
    <!-- </div> -->
    <div class="row bg">
        <div class="col-md-3 col-xs-3 col-sm-3 lnav visible-lg">
            <ul>
                <li><a href="#">手机 电话卡<em></em></a></li>
                <li><a href="#">电视 盒子<em></em></a></li>
                <li><a href="#">笔记本 显示器<em></em></a></li>
                <li><a href="#">家电 插线板<em></em></a></li>
                <li><a href="#">出行 穿戴<em></em></a></li>
                <li><a href="#">智能 路由器<em></em></a></li>
                <li><a href="#">电源 配件<em></em></a></li>
                <li><a href="#">健康 儿童<em></em></a></li>
                <li><a href="#">耳机 音箱<em></em></a></li>
                <li><a href="#">生活 箱包<em></em></a></li>
            </ul>
        </div>
        <div class="col-md-12 bgc">
            <img src="images/bgcwebp.webp" alt="">
        </div>
    </div>
    <div class="row fours">
        <div class="col-md-3 first">
            <ul>
                <li class="one">
                    <a href="#"><img src="images/1.png" alt="">小米秒杀</a>
                </li>
                <li class="two">
                    <a href="#"><img src="images/2.png" alt="">企业团购</a>
                </li>
                <li class="three">
                    <a href="#"><img src="images/3.png" alt="">F码通道</a>
                </li>
                <li class="four">
                    <a href="#"><img src="images/4.png" alt="">米粉卡</a>
                </li>
                <li class="five">
                    <a href="#"><img src="images/5.png" alt="">以旧换新</a>
                </li>
                <li class="six">
                    <a href="#"><img src="images/6.png" alt="">话费充值</a>
                </li>
            </ul>
        </div>
        <div class="col-md-9 second visible-lg">
            <ul>
                <li>
                    <a href="#"><img src="images/mi4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi5.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi6.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div class="col-md-9 second niubi visible-md wc">
            <ul>
                <li>
                    <a href="#"><img src="images/mi4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi5.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi6.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div class="col-md-9 second niubi visible-sm wc">
            <ul>
                <li>
                    <a href="#"><img src="images/mi4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi5.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi6.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div class="col-md-9 second niubi visible-xs wc mm">
            <ul>
                <li>
                    <a href="#"><img src="images/mi4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi5.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="images/mi6.jpg" alt=""></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="container">
        <div class="row miao">
            <div class="col-md-11 col-sm-11 col-xs-11">
                <h2>小米秒杀</h2>
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1 kongzhi">
                <a class="btn btn-default z" href="#" role="button" ><</a>
                <a class="btn btn-default r" href="#" role="button" >></a>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 five">
                <div class="diyi visible-lg">
                    <section class="chang">10:00场</section>
                    <section><img src="images/shan.png" alt=""></section>
                    <section class="jieshu">距离结束还有</section>
                    <section class="shu">
                        <span>02</span>
                        <i>:</i>
                        <span>48</span>
                        <i>:</i>
                        <span>06</span>
                    </section>
                </div>
                <div class="visible-lg">
                    <a href="#"><img src="images/bing1.webp" alt="" >
                        <h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3>
                        <h4>洗衣机用的安全 洗的放心</h4>
                        <p>
                            <span class="new1">499元</span>
                            <span class="new2">699元</span>
                        </p>
                            </a>
                </div>
                <div class="visible-lg">
                    <a href="#">
                        <img src="images/bing2.webp" alt="">
                        <h3>小米智能门锁 青春版 左开门 黑</h3>
                        <h4>一步推拉,高端智能锁门</h4>
                        <p>
                            <span class="new1">1088元</span>
                            <span class="new2">1288元</span>
                        </p>
                    </a>
                </div>
                <div class="visible-lg">
                    <a href="#">
                        <img src="images/bing3.webp" alt="">
                        <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                        <h4>杜邦Sorona纤维/高弹支撑</h4>
                        <p>
                            <span class="new1">99元</span>
                            <span class="new2">129元</span>
                        </p>
                    </a>
                </div>
                <div class="visible-lg">
                    <a href="#">
                        <img src="images/bing.webp" alt="">
                        <h3>米家迷你超级无敌保温杯 白色</h3>
                        <h4>轻量杯身/ 350ml容量</h4>
                        <p>
                            <span class="new1">49元</span>
                            <span class="new2">59元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-md">
                    <a href="#"><img src="images/bing1.webp" alt="" >
                        <h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3>
                        <h4>洗衣机用的安全 洗的放心</h4>
                        <p>
                            <span class="new1">499元</span>
                            <span class="new2">699元</span>
                        </p>
                            </a>
                </div>
                <div class="teshu visible-md">
                    <a href="#">
                        <img src="images/bing2.webp" alt="">
                        <h3>小米智能门锁 青春版 左开门 黑</h3>
                        <h4>一步推拉,高端智能锁门</h4>
                        <p>
                            <span class="new1">1088元</span>
                            <span class="new2">1288元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-md">
                    <a href="#">
                        <img src="images/bing3.webp" alt="">
                        <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                        <h4>杜邦Sorona纤维/高弹支撑</h4>
                        <p>
                            <span class="new1">99元</span>
                            <span class="new2">129元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-md">
                    <a href="#">
                        <img src="images/bing.webp" alt="">
                        <h3>米家迷你超级无敌保温杯 白色</h3>
                        <h4>轻量杯身/ 350ml容量</h4>
                        <p>
                            <span class="new1">49元</span>
                            <span class="new2">59元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-sm">
                    <a href="#"><img src="images/bing1.webp" alt="" >
                        <h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3>
                        <h4>洗衣机用的安全 洗的放心</h4>
                        <p>
                            <span class="new1">499元</span>
                            <span class="new2">699元</span>
                        </p>
                            </a>
                </div>
                <div class="teshu visible-sm">
                    <a href="#">
                        <img src="images/bing2.webp" alt="">
                        <h3>小米智能门锁 青春版 左开门 黑</h3>
                        <h4>一步推拉,高端智能锁门</h4>
                        <p>
                            <span class="new1">1088元</span>
                            <span class="new2">1288元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-sm">
                    <a href="#">
                        <img src="images/bing3.webp" alt="">
                        <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                        <h4>杜邦Sorona纤维/高弹支撑</h4>
                        <p>
                            <span class="new1">99元</span>
                            <span class="new2">129元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-sm">
                    <a href="#">
                        <img src="images/bing.webp" alt="">
                        <h3>米家迷你超级无敌保温杯 白色</h3>
                        <h4>轻量杯身/ 350ml容量</h4>
                        <p>
                            <span class="new1">49元</span>
                            <span class="new2">59元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-xs q">
                    <a href="#"><img src="images/bing1.webp" alt="" >
                        <h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3>
                        <h4>洗衣机用的安全 洗的放心</h4>
                        <p>
                            <span class="new1">499元</span>
                            <span class="new2">699元</span>
                        </p>
                            </a>
                </div>
                <div class="teshu visible-xs q">
                    <a href="#">
                        <img src="images/bing2.webp" alt="">
                        <h3>小米智能门锁 青春版 左开门 黑</h3>
                        <h4>一步推拉,高端智能锁门</h4>
                        <p>
                            <span class="new1">1088元</span>
                            <span class="new2">1288元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-xs q">
                    <a href="#">
                        <img src="images/bing3.webp" alt="">
                        <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                        <h4>杜邦Sorona纤维/高弹支撑</h4>
                        <p>
                            <span class="new1">99元</span>
                            <span class="new2">129元</span>
                        </p>
                    </a>
                </div>
                <div class="teshu visible-xs q">
                    <a href="#">
                        <img src="images/bing.webp" alt="">
                        <h3>米家迷你超级无敌保温杯 白色</h3>
                        <h4>轻量杯身/ 350ml容量</h4>
                        <p>
                            <span class="new1">49元</span>
                            <span class="new2">59元</span>
                        </p>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 big">
                <img src="images/bigimg.webp" alt="">
            </div>
        </div>
        <div class="row shouji">
            <div class="col-md-10 col-sm-10 col-xs-9">
                <h2>手机</h2>
            </div>
            <div class="col-md-2 col-sm-2 col-xs-3 chakan">
                <a href="#">查看全部
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
            </div>
        </div>
        <div class="row">
        <div class="col-md-12 sj hidden-xs">
                <ul>
                    <li><a href="#"><img src="images/img1.webp" alt=""></a></li>
                    <li>
                        <a href="#"><img src="images/img2.webp" alt="">
                        <h3>黑鲨4系列</h3>
                        <h4>黑鲨4系列</h4>
                        <p>
                            <span>2499元起</span>
                        </p>
                    </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img3.webp" alt="">
                            <h3>小米10s</h3>
                            <h4>骁龙870 | 对称式双扬立体声</h4>
                            <p>
                                <span>3299元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img4.webp" alt="">
                            <h3>Redmi K40 Pro 系列</h3>
                            <h4>骁龙888 | E4旗舰直屏</h4>
                            <p>
                                <span>2799元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img5.webp" alt="">
                            <h3>Redmi K40</h3>
                            <h4>骁龙870,新一代E4 AMOLED旗舰直屏</h4>
                            <p>
                                <span>1999元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img6.webp" alt="">
                            <h3>小米11</h3>
                            <h4>骁龙888 | 2k四曲面屏</h4>
                            <p>
                                <span>3999元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img7.webp" alt="">
                            <h3>小米10</h3>
                            <h4>骁龙865 | 1亿像素相机</h4>
                            <p>
                                <span>3399元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img8.webp" alt="">
                            <h3>Note9 Pro</h3>
                            <h4>1亿像素相机</h4>
                            <p>
                                <span>1599元起</span>
                            </p>
                            </a>
                    </li>
                    <li>
                        <a href="#"><img src="images/img9.webp" alt="">
                            <h3>Note</h3>
                            <h4>天矶 800u处理器</h4>
                            <p>
                                <span>1299元起</span>
                            </p>
                            </a>
                    </li>
                </ul>
        </div>
        <div class="col-md-12 sj visible-xs lihai">
            <ul>
                <li>
                    <a href="#"><img src="images/img2.webp" alt="">
                    <h3>黑鲨4系列</h3>
                    <h4>黑鲨4系列</h4>
                    <p>
                        <span>2499元起</span>
                    </p>
                </a>
                </li>
                <li>
                    <a href="#"><img src="images/img3.webp" alt="">
                        <h3>小米10s</h3>
                        <h4>骁龙870 | 对称式双扬立体声</h4>
                        <p>
                            <span>3299元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img4.webp" alt="">
                        <h3>Redmi K40 Pro 系列</h3>
                        <h4>骁龙888 | E4旗舰直屏</h4>
                        <p>
                            <span>2799元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img5.webp" alt="">
                        <h3>Redmi K40</h3>
                        <h4>骁龙870,新一代E4 AMOLED旗舰直屏</h4>
                        <p>
                            <span>1999元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img6.webp" alt="">
                        <h3>小米11</h3>
                        <h4>骁龙888 | 2k四曲面屏</h4>
                        <p>
                            <span>3999元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img7.webp" alt="">
                        <h3>小米10</h3>
                        <h4>骁龙865 | 1亿像素相机</h4>
                        <p>
                            <span>3399元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img8.webp" alt="">
                        <h3>Note9 Pro</h3>
                        <h4>1亿像素相机</h4>
                        <p>
                            <span>1599元起</span>
                        </p>
                        </a>
                </li>
                <li>
                    <a href="#"><img src="images/img9.webp" alt="">
                        <h3>Note</h3>
                        <h4>天矶 800u处理器</h4>
                        <p>
                            <span>1299元起</span>
                        </p>
                        </a>
                </li>
            </ul>
    </div>
        <div class="row">
                <div class="col-md-12 dianshi">
                    <img src="images/bigimg2.webp" alt="">
                </div>
        </div>
        </div>
    </div>

</div>
<footer>
    <div class="container">
        <div class="row cc">
            <div class="col-md-12 li visible-lg">
                <ul>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-wrench"></em>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-repeat"></em>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-refresh"></em>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-gift"></em>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-flag"></em>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12 li visible-md">
                <ul>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-wrench"></em>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-repeat"></em>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-refresh"></em>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-gift"></em>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-flag"></em>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12 li ss visible-sm">
                <ul>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-wrench"></em>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-repeat"></em>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-refresh"></em>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-gift"></em>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-flag"></em>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12 li bb visible-xs">
                <ul>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-wrench"></em>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-repeat"></em>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-refresh"></em>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-gift"></em>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <em class="glyphicon glyphicon-flag"></em>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row cc">
            <div class="col-md-12 col-sm-12 col-xs-12 footer-service">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="visible-lg">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="visible-lg">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="visible-lg">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="visible-lg">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="visible-lg ">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <div class="contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00(仅收市话费)</p>
                    <a href="#">
                        <em class="glyphicon glyphicon-user"></em>
                        人工客服
                    </a>
                    <div class="follow">
                        关注小米
                        <a href="#" class="wb"></a>
                        <a href="#" class="wx"></a>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 last clearfix">
                <div class="logo"></div>
                <div class="text">
                    <p class="one">
                        <a href="#">小米商城</a>
                        <span>|</span>
                        <a href="#">miui</a>
                        <span>|</span>
                        <a href="#">米家</a>
                        <span>|</span>
                        <a href="#">米聊</a>
                        <span>|</span>
                        <a href="#">多看</a>
                        <span>|</span>
                        <a href="#">游戏</a>
                        <span>|</span>
                        <a href="#">政企服务</a>
                        <span>|</span>
                        <a href="#">小米天猫店</a>
                        <span>|</span>
                        <a href="#">小米集团隐私政策</a>
                        <span>|</span>
                        <a href="#">小米公司儿童信息保护规则</a>
                        <span>|</span>
                        <a href="#">小米商城隐私政策</a>
                        <span>|</span>
                        <a href="#">小米商城用户协议</a>
                        <span>|</span>
                        <a href="#">问题反馈</a>
                        <span>|</span>
                        <a href="#">Select Location</a>
                    </p>
                    <p class="two">
                        <a href="#">北京互联网法院法律服务工作站</a>
                        <span>|</span>
                        <a href="#">中国消费者协会</a>
                        <span>|</span>
                        <a href="#">北京市消费者协会</a>
                    </p>
                    <p class="three">
                        ©
                        <a href="#">mi.com</a>
                        京ICP证110507号
                        <a href="#">京ICP备10046444号</a>
                        <a href="#">京公网安备11010802020134号</a>
                        <a href="#">京网文[2020]0276-042号</a><br>
                        <a href="#">(京)网械平台备字(2018)第00005号</a>
                        <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                        <a href="#">营业执照</a>
                        <a href="#">医疗器械质量公告</a>
                        <a href="#">增值电信业务许可证</a>
                        &nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                        <a href="#">食品经营许可证</a><br>
    
                        违法和不良信息举报电话:171-5104-4404&nbsp;
                        <a href="#">知识产权侵权投诉</a>
                        &nbsp;本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
                    </p>
                </div>
                <div class="links">
                    <a href="#">
                        <img src="images/truste.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/v-logo-2.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/icon3.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/c.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/192.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
  1. less文件
@media screen and (min-width:1200px) {
    .lnav{
        width: 20.3%;
    }
    .container {
        width: 1226px;
    }
    .first {
        width: 21.5%;
    }
    .second {
        width: 78.5%;
    }
}
@media (min-width: 768px){
    .wo {
        width: 16.3333%;
    }
}
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?o8z4h3');
    src:  url('fonts/icomoon.eot?o8z4h3#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?o8z4h3') format('truetype'),
      url('fonts/icomoon.woff?o8z4h3') format('woff'),
      url('fonts/icomoon.svg?o8z4h3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
a:hover {
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header {
    background-color: #333;
    height: 40px;
    .top {
        padding-left: 0;
    }
    .one {
       position: relative;
        .you {
            position: absolute;
            height: 40px;
            top: 0;
            left: 950px;
            a {
                display: inline-block;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                color: #b0b0b0;
            }
            span {
                height: 14px;
                border: 0.5px solid #666666;
                margin: 12px 8px 0;
            }
        }
        .zuo {
            height: 40px;
            padding-left: 15px;
            ul li {
                float: left;
                a {
                    height: 40px;
                    line-height: 40px;
                    color: #b0b0b0;
                    font-size: 12px;
                }
            }
            ul li:nth-child(2n) {
                height: 14px;
                border: 0.5px solid #666666;
                margin: 12px 8px 0;
            }
        }
        .buy {
            position: absolute;
            right: 0;
            top: 0;
            height: 40px;
            background-color: #424242;
            a {
                display: block;
                line-height: 37px;
                color: #b0b0b0;
                padding: 0 25px;
                font-size: 12px;
            }
        }
    }
    
}
.nav {
    .logo {
        display: block;
        margin-top: 22px;
        width: 55px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .hot {
        a {
            display: inline-block;
            height: 88px;
            line-height: 100px;
            margin: 0 8px;
            color: black;
            font-size: 16px;
        }
        a:hover {
            color: #ff6700;
            transition: all .3s;
        }
    }
    .sou {
        padding-right: 0;
        .sousuo {
            margin-top: 25px;
            input,
            button {
                height: 50px;
                border-radius: 0;
            }
        }
    }
}
.bg {
    position: relative;
    .lnav {
        position: absolute;
        left: 5px;
        top: 10px;
        margin-left: 10px;
        padding-left: 0;
        z-index: 1;
        height:455px;
        background: rgba(105,101,101,.6);
        ul li {
            a {
                position: relative;
                display: block;
                width: 248px;
                height: 42px;
                color: #fff;
                line-height: 42px;
                padding-left: 20px;
                em::after {
                    position: absolute;
                    font-family: 'icomoon';
                    content: "\e90c";
                    top: 0;
                    right: 20px;
                    font-size: 18px;
                }
            }
            a:hover {
                background-color: #ff6700;
                color: #fff;
            }
        }
        ul li:nth-child(1) {
            margin-top: 20px;
        }
        ul li:last-child {
            margin-bottom: 20px;
        }
    }
  .bgc{
      padding-right: 0;
      margin-top: 10px;
      img {
          width: 100%;
          height: 100%;
      }
  }
}
.fours {
    .first {
        margin-top: 10px;
        padding-right: 0;
        ul li {
            float: left;
            width: 33.33%;
            background-color: #5f5750;
            height: 82px;
            a {
                display: block;
                text-align: center;
                color: #fff;
                font-size: 12px;
                padding: 17px;
                img {
                    width: 24px;
                    display: block;
                    margin: 0 auto 4px;
                }
            }
        }
    }
    .second {
        padding-right: 0;
        margin-top: 10px;
        ul li {
            float: left;
            width: 33.33%;
            padding-left: 10px;
            a {
                display: inline-block;
                
            }
            a img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .niubi {
        a {
            height: 164px;
        }
       }
       .wc {
           ul li:nth-child(1) {
               padding-left: 0;
           }
       }
       .mm {
           a {
               height: 95px;
           }
       }
    
}
.main {
    margin-top: 20px;
    background-color: #f5f5f5;
    .miao {
        .kongzhi {
            position: relative;
            padding-right: 0;
            height: 62.8px;
           .z {
               position: absolute;
               top: 20px;
               right: 33px;
               border-radius: 0%;
           }
           .r {
               position: absolute;
               top: 20px;
               right: 0;
               border-radius: 0;
           }
        }
    }
    .five {
        padding-right: 0;
        .teshu {
            width: 25%;
        }
        .q {
            width: 50%;
            margin-bottom: 10px;
        }
        div {
            padding-left: 10px;
            float: left;
            width: 20%;
            text-align: center;
            height: 320px;
            .new1 {
                color: #fa6509;
            }
            .new2 {
                text-decoration: line-through;
                color: #b0b0b0;
            }
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                background-color: #fff;
            }
            p {
                text-align: center;
                font-size: 16px;
            }
            h4 {
                text-align: center;
                color: #adadad;
                font-weight: 400;
                margin-bottom: 20px;
                font-size: 12px;
            }
            h3 {
                color: #4f4f4f;
                font-size: 16px;
                font-weight: 400;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-left: 20px;
                margin-right: 20px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            img {
                width: 100%;
                height: 67%;
            }
            section {
                img {
                    width: 15%;
                    height: 50%;
                    margin: 25px auto;
                }
            }
            .chang {
                font-size: 21px;
                color: red;
                padding-top: 15px;
            }
            .jieshu {
                color: rgba(0,0,0,.54);
                font-size: 15px;
            }
            .shu {
                margin: 23px 1px 1px 32px;
                span {
                    float: left;
                    width: 46px;
                    height: 46px;
                    background: #605751;
                    color: #fff;
                    font-size: 24px;
                    line-height: 46px;
                }
                i {
                    width: 15px;
                    float: left;
                    height: 46px;
                    line-height: 46px;
                    color: #605751;
                    font-size: 28px;
                }
            }
        }
        .diyi {
            background-color: #f1eded;
            padding-top: 50px;
        }
    }
    .big {
        padding-right: 0;
        margin-top: 10px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .shouji {
        margin-top: 10px;
        .chakan {
            position: relative;
            height: 62.8px;
            a {
                position: absolute;
                right: 0;
                top: 25px;
                font-size: 16px;
                color: #757575;
                display: block;
                i {
                    width: 20px;
                    height: 20px;
                    border-radius: 16px;
                    background-color: #b0b0b0;
                    padding: 2px;
                    color: #fff;
                    vertical-align: -1px;
                }
            }
            a:hover {
                color: #ff6700;
                transition: all .4s;
                i {
                    background-color: #ff6700;
                    transition: all .4s;
                }
            }
        }
    }
    .sj {
        padding-right: 0;
        ul li {
            float: left;
            width: 20%;
            height: 300px;
            text-align: center;
            padding-left: 14px;
            margin-bottom: 14px;
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
                background-color: #fff;
            }
           img {
               width: 66%;
               height: 53%;
               margin-top: 10px;
           }
           p span {
               color: #ff6700;
           }
           h3 {
            color: #4f4f4f;
            font-size: 16px;
            font-weight: 400;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-left: 20px;
            margin-right: 20px;
            margin-top: 30px;
            margin-bottom: 10px;
           }
           h4 {
            text-align: center;
            color: #adadad;
            font-weight: 400;
            margin-bottom: 20px;
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
           }
        }
        li:nth-child(1) {
            height: 614px;
            padding-left: 0;
            img {
                width: 100%;
                height: 100%;
                margin-top: 0;
            }
        }
        a:hover {
            transform: translatez(3px);
            transform: translateY(-3px);
            box-shadow: 0 5px 10px #cccccc;
            transition: all .3s;
        }
        
    }
    .lihai {
        ul li {
            width: 50%;
        }
        li:nth-child(1) {
            height: 300px;
            img {
                width: 66%;
                height: 53%;
                margin-top: 10px;
            }
        }
    }
    .dianshi {
        margin-bottom: 10px;
        img {
            width: 100%;
            height: 100%;
            padding-left: 15px;
        }
    }
}
footer {
    background-color: #fff;
    .cc {
        padding-left: 15px;
    }
    .li {
        padding: 27px 0;
        border-bottom: 1px solid #e0e0e0;
        a {
            color: #616161;
            transition: color .2s;
        }
        a:hover {
            color: #ff6700;
        }
        ul li {
            float: left;
            width: 19.8%;
            height: 25px;
            font-size: 16px;
            line-height: 25px;
            text-align: center;
            border-left: 1px solid #b0b0b0;
        }
        ul li:nth-child(1) {
            border-left: 0 ;
        }
    }
    .ss {
        padding-bottom: 40px;
        ul li {
            font-size: 14px;
        }
    }
    .bb {
        padding-bottom: 40px;
        ul li {
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
    .footer-service {
        padding: 40px 0;
        dl {
            float: left;
            width: 160px;
            margin: 0;
            dt {
                margin: -1px 0 26px;
                font-size: 14px;
                line-height: 1.25;
                color: #424242;
            }
            dd {
                margin: 10px 0 0;
                font-size: 12px;
                a {
                    color: #757575;
                    transition: color .2s;
                }
                a:hover {
                    color: #ff6700;
                }
            }
        }
        .contact {
            float: right;
            width: 251px;
            border-left: 1px solid #e0e0e0;
            text-align: center;
            color: #616161;
            .phone {
                font-size: 22px;
                line-height: 1;
                color: #ff6700;
            }
            a {
                display: inline-block;
                margin: 0;
                border: 1px solid #ff6700;
                width: 118px;
                height: 28px;
                font-size: 12px;
                line-height: 28px;
                background: #fff;
                color: #ff6700;
            }
            a:hover {
                background-color: #ff6700;
                color: #fff;
                transition: all .5s;
            }
            .follow {
                font-size: 12px;
                margin-top: 10px;
                position: relative;
                a {
                    width: 24px;
                    height: 24px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 6px;
                    border: 0;
                }
                .wb {
                    background: url(images/wb.png) 50% 0 no-repeat;
                    background-size: cover;
                }
                .wx {
                    background: url(images/wx.png) 50% 0 no-repeat;
                    background-size: cover;
                }
            }
        }
        }
        .last {
            padding-right: 0;
            position: relative;
            p {
                margin: 0;
            }
            .logo {
                position: absolute;
                top: 0;
                left: 0;
                width: 57px;
                height: 57px;
                margin-right: 10px;
                background:url("images/logo-footer.png") no-repeat 50% 50%;
            }
            .text {
                padding-left: 67px;
                color: #b0b0b0;
                a:hover {
                    color: #ff6700;
                }
            }
            .one {
                a {
                    font-size: 12px;
                    color: #757575;
                }
            }
            .two {
                a {
                    font-size: 12px;
                    color: #757575;
                }
            }
            .three {
                color: #757575;
                font-size: 12px;
                a {
                    font-size: 12px;
                    color: #b0b0b0
                }
            }
    }
}

标签:周周结,color,height,padding,width,font,margin
来源: https://blog.csdn.net/m0_52040370/article/details/115406924