本周对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 } } } }
![[版本更新] PolarDB-X V2.4 列存引擎开源正式发布](https://ucc.alicdn.com/pic/developer-ecology/nmwxanvmfezte_85c4d30b1404479b982cc86614e8edfb.png?x-oss-process=image/resize,h_160,m_lfit)
