周周结
作者：互联网
本周对bootstrap进行了一系列的复习
对bootstrap栅格系统的一系列的复习
对响应式工具的复习，以及弄清楚在不同屏幕下的屏幕适配问题
- 用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 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>
网络食品经营备案 京食药网食备202010048
<a href="#">食品经营许可证</a><br>
违法和不良信息举报电话：171-5104-4404
<a href="#">知识产权侵权投诉</a>
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</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>
- 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