- 小米官网制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
<meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 、小米10 Pro、小米MIX Alpha，Redmi 红米系列Redmi Note 9、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
<meta name="keywords" content="小米,redmi,小米11,Redmi Note 9,小米MIX Alpha,小米商城">
<link rel="shortcut icon" href=" favicon.ico" />
<!-- 引入页面的css-->
<link rel="stylesheet" href="index.css">
<!-- 引入base页面-->
<link rel="stylesheet" href="base.css">
</head>
<body>
<div class="tu"></div>
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li><a href="#">小米商城</a></li>
<li></li>
<li><a href="#">MIUI</a></li>
<li></li>
<li><a href="#">IoT</a></li>
<li></li>
<li><a href="#">云服务</a></li>
<li></li>
<li><a href="#">天星数科</a></li>
<li></li>
<li><a href="#">有品</a></li>
<li></li>
<li><a href="#">小爱开放平台</a></li>
<li></li>
<li><a href="#">企业团购</a></li>
<li></li>
<li><a href="#">资质证照</a></li>
<li></li>
<li><a href="#">协议规则</a></li>
<li></li>
<li><a href="#">下载app</a></li>
<li></li>
<li><a href="#">智能生活</a></li>
<li></li>
<li><a href="#">Select Location</a></li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">消息通知</a></li>
<li></li>
<li><a href="#">注册</a></li>
<li></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
</section>
<!--header模块制作-->
<header>
<div class="nav w">
<div class="logo">
<h1>
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>
</div>
<div class="hotwords">
<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="search">
<input type="text" placeholder="小米11">
<button>搜索</button>
</div>
</div>
</div>
</header>
<!--bignav模块制作-->
<div class="bignav">
<div class="w">
<div class="main">
<div class="l">
<ul>
<li><a href="#">手机 电话卡</a></li>
<li><a href="#">电视 盒子</a></li>
<li><a href="#">笔记本 显示器</a></li>
<li><a href="#">家电 插线板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">电源 配件</a></li>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">耳机 音箱</a></li>
<li><a href="#">生活 箱包</a></li>
</ul>
</div>
<div class="zuo">
<a href="#"> < </a>
</div>
<div class="you">
<a href="#"> > </a>
</div>
<ul class="niu">
<li></li>
<li></li>
<li></li>
<li class="four"></li>
<li></li>
</ul>
</div>
</div>
</div>
<!--guding模块制作-->
<div class="guding">
<ul>
<li><img src="images/shouji2.png" alt="">
<p>手机app</p>
</li>
<li><img src="images/people2.png" alt="">
<p>个人中心</p>
</li>
<li>
<img src="images/gongju2.png" alt="">
<p>售后服务</p>
</li>
<li><img src="images/music2.png" alt="">
<p>人工客服</p>
</li>
<li><img src="images/shop2.png" alt="">
<p class="last">购物车</p>
</li>
</ul>
</div>
<!--fours模块制作-->
<div class="fours">
<div class="w">
<div class="imp">
<ul class="six">
<li>
<a href="#"><img src="images/1.png" alt="">小米秒杀</a>
</li>
<li>
<a href="#"><img src="images/2.png" alt="">企业团购</a>
</li>
<li>
<a href="#"><img src="images/3.png" alt="">F码通道</a>
</li>
<li>
<a href="#"><img src="images/4.png" alt="">米粉卡</a>
</li>
<li>
<a href="#"><img src="images/5.png" alt="">以旧换新</a>
</li>
<li>
<a href="#"><img src="images/6.png" alt="">话费充值</a>
</li>
</ul>
<div class="bd">
<ul class="three">
<li class="one"><a href="#"><img src="images/mi.jpg" alt="" width="316" height="170"></a></li>
<li class="two"><a href="#"><img src="images/mi2.jpg" alt="" width="316" height="170"></a></li>
<li class="three1"><a href="#"><img src="images/mi3.jpg" alt="" width="316" height="170"></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--container模块制作-->
<div class="container">
<div class="w">
<div class="con_hd">
<h2>小米秒杀</h2>
<div class="list">
<a href="#" class="one"> > </a>
<a href="#" class="two"> < </a>
</div>
</div>
<div class="con_bd">
<div class="first">
<div class="round">
10:00场
</div>
<img src="images/shan.png" alt="">
<div class="desc">
距离结束还有
</div>
<div class="shu">
<span>02</span>
<i>:</i>
<span>48</span>
<i>:</i>
<span>06</span>
</div>
</div>
<div class="img">
<div class="i1">
<a href="#"><img src="images/bing1.webp" alt="" width="160px" height="160px">
<h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3>
<h4>洗衣机用的安全 洗的放心</h4>
<p>
<span class="new1">499元</span>
<span class="new2">699元</span>
</p>
</a>
</div>
<div class="i2">
<a href="#">
<img src="images/bing2.webp" alt="" width="160" height="160">
<h3>小米智能门锁 青春版 左开门 黑</h3>
<h4>一步推拉，高端智能锁门</h4>
<p>
<span class="new1">1088元</span>
<span class="new2">1288元</span>
</p>
</a>
</div>
<div class="i3">
<a href="#">
<img src="images/bing3.webp" alt="" width="160" height="160">
<h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
<h4>杜邦Sorona纤维/高弹支撑/可机洗</h4>
<p>
<span class="new1">99元</span>
<span class="new2">129元</span>
</p>
</a>
</div>
<div class="i4">
<a href="#">
<img src="images/bing.webp" alt="" width="160" height="160">
<h3>米家迷你超级无敌保温杯 白色</h3>
<h4>小巧便携/保温锁冷/轻量杯身/ 350ml容量</h4>
<p>
<span class="new1">49元</span>
<span class="new2">59元</span>
</p>
</a>
</div>
</div>
</div>
<div class="bigimg">
<a href="#"><img src="images/bigimg.webp" alt=""></a>
</div>
<!-- floor模块制作-->
<div class="floor">
<div class="fl_hd">
<h2>手机</h2>
<div class="list_con">
<a href="#">查看全部</a>
</div>
</div>
<div class="fl_bd clearfix" >
<div class="one">
<a href="#"><img src="images/img1.webp" alt="" width="234" height="614"></a>
</div>
<ul class="two">
<li class="first">
<a href="#"><img src="images/img2.webp" alt="" width="160px" height="160px">
<h3>小米11</h3>
<h4>骁龙888 | 2k四曲面屏</h4>
<p>
<span class="new1">3999元起</span>
</p>
</a>
</li>
<li class="second">
<a href="#"><img src="images/img3.webp" alt="" width="160px" height="160px">
<h3>小米10</h3>
<h4>骁龙865处理器 / 1亿像素相机</h4>
<p>
<span class="new1">3399元起</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="third">
<a href="#"><img src="images/img4.webp" alt="" width="160px" height="160px">
<h3>Note 9 pro</h3>
<h4>一亿像素夜景相机，120Hz六档变速高刷屏</h4>
<p>
<span class="new1">1599元起</span>
</p>
</a>
</li>
<li>
<a href="#"><img src="images/img5.webp" alt="" width="160px" height="160px">
<h3>Note 9</h3>
<h4>天玑 800U处理器,5000mAh电池</h4>
<p>
<span class="new1">1299元起</span>
</p>
</a>
</li>
<li class="five">
<a href="#"><img src="images/img6.webp" alt="" width="160px" height="160px">
<h3>Note 9 4G</h3>
<h4>6000mAh超长续航</h4>
<p>
<span class="new1">999元起</span>
</p>
</a>
</li>
<li class="six">
<a href="#"><img src="images/img7.webp" alt="" width="160px" height="160px">
<h3>Redmi 9A</h3>
<h4>5000mAh长循环大电量,6.53"超大护眼屏幕</h4>
<p>
<span class="new1">499元起</span>
</p>
</a>
</li>
<li class="seven">
<a href="#"><img src="images/img8.webp" alt="" width="160px" height="160px">
<h3>Redmi K30S 至尊纪念版</h3>
<h4>144Hz[7档]变速高刷屏 </h4>
<p>
<span class="new1">2599元起</span>
</p>
</a>
</li>
<li class="eight">
<a href="#"><img src="images/img9.webp" alt="" width="160px" height="160px">
<h3>Redmi K30 至尊纪念版</h3>
<h4>120Hz弹出全面屏,天玑1000+旗舰处理器 </h4>
<p>
<span class="new1">1999元起</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgtwo">
<a href="#"><img src="images/bigimg2.webp" alt=""></a>
</div>
<div class="floortwo">
<div class="two_hd">
<h2>家电</h2>
<div class="list_hd">
<ul>
<li class="first">热门</li>
<li>电视影音</li>
</ul>
</div>
</div>
<div class="two_bd clearfix">
<ul>
<li class="one">
<a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a>
</li>
<li class="only">
<a href="#"><img src="images/2.webp" alt=""width="160" height="160">
<h3>小米全面屏电视65寸 E65X</h3>
<h4>全面屏设计</h4>
<p>
<span class="new1">2999元</span>
<span class="new2">3099元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/3.webp" alt=""width="160" height="160">
<h3>全面屏电视E43k</h3>
<h4>全面屏设计,海量内容</h4>
<p>
<span class="new1">1399元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/4.webp" alt=""width="160" height="160">
<h3>小米电视4A 70英寸</h3>
<h4>大屏更享受</h4>
<p>
<span class="new1">3399元</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/5.jpg" alt=""width="160" height="160">
<h3>米家空调</h3>
<h4>出众静音,快速制冷热</h4>
<p>
<span class="new1">1699元</span>
<span class="new2">1799元</span>
</p>
</a>
</li>
<li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li>
<li class="only">
<a href="#"><img src="images/7.webp" alt=""width="160" height="160">
<h3>米家互联网洗烘一体机 Pro 10kg</h3>
<h4>智能洗烘，省心省力</h4>
<p>
<span class="new1">2899元</span>
<span class="new2">3299元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/8.webp" alt=""width="160" height="160">
<h3>Redmi全自动波轮洗衣机1A 8kg</h3>
<h4>一键操作,父母都爱用</h4>
<p>
<span class="new1">799元</span>
<span class="new2">899元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/9.webp" alt=""width="160" height="160">
<h3>Air 13.3" 2019款</h3>
<h4>新一代独立显卡</h4>
<p>
<span class="new1">5399元起</span>
</p>
</a>
</li>
<li class="ten s">
<a href="#"><img src="images/10.webp" alt=""width="80" height="80">
<h3>米家互联网烟灶套装(天然气)</h3>
<p>
<span class="new1">2099元</span>
</p>
</a>
</li>
<li class="eleven">
<a href="#">
<div class="imo">
浏览更多
<small>热门</small>
</div>
<div class="figure">
<i></i>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgthree">
<a href="#"><img src="images/bigimg3.webp" alt=""></a>
</div>
<div class="floortwo">
<div class="two_hd">
<h2>智能</h2>
<div class="list_hd">
<ul>
<li class="first">热门</li>
<li class="second">安防</li>
<li>出行</li>
</ul>
</div>
</div>
<div class="two_bd clearfix">
<ul>
<li class="one">
<a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a>
</li>
<li class="only">
<a href="#"><img src="images/2.webp" alt=""width="160" height="160">
<h3>小米全面屏电视65寸 E65X</h3>
<h4>全面屏设计</h4>
<p>
<span class="new1">2999元</span>
<span class="new2">3099元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/3.webp" alt=""width="160" height="160">
<h3>全面屏电视E43k</h3>
<h4>全面屏设计,海量内容</h4>
<p>
<span class="new1">1399元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/4.webp" alt=""width="160" height="160">
<h3>小米电视4A 70英寸</h3>
<h4>大屏更享受</h4>
<p>
<span class="new1">3399元</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/5.jpg" alt=""width="160" height="160">
<h3>米家空调</h3>
<h4>出众静音,快速制冷热</h4>
<p>
<span class="new1">1699元</span>
<span class="new2">1799元</span>
</p>
</a>
</li>
<li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li>
<li class="only">
<a href="#"><img src="images/7.webp" alt=""width="160" height="160">
<h3>米家互联网洗烘一体机 Pro 10kg</h3>
<h4>智能洗烘，省心省力</h4>
<p>
<span class="new1">2899元</span>
<span class="new2">3299元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/8.webp" alt=""width="160" height="160">
<h3>Redmi全自动波轮洗衣机1A 8kg</h3>
<h4>一键操作,父母都爱用</h4>
<p>
<span class="new1">799元</span>
<span class="new2">899元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/9.webp" alt=""width="160" height="160">
<h3>Air 13.3" 2019款</h3>
<h4>新一代独立显卡</h4>
<p>
<span class="new1">5399元起</span>
</p>
</a>
</li>
<li class="ten s">
<a href="#"><img src="images/10.webp" alt=""width="80" height="80">
<h3>米家互联网烟灶套装(天然气)</h3>
<p>
<span class="new1">2099元</span>
</p>
</a>
</li>
<li class="eleven">
<a href="#">
<div class="imo">
浏览更多
<small>热门</small>
</div>
<div class="figure">
<i></i>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgthree">
<a href="#"><img src="images/bigimg4.webp" alt=""></a>
</div>
<div class="floortwo">
<div class="two_hd">
<h2>搭配</h2>
<div class="list_hd">
<ul>
<li class="first">热门</li>
<li>耳机音箱</li>
</ul>
</div>
</div>
<div class="two_bd clearfix">
<ul>
<li class="one">
<a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a>
</li>
<li class="only">
<a href="#"><img src="images/2.webp" alt=""width="160" height="160">
<h3>小米全面屏电视65寸 E65X</h3>
<h4>全面屏设计</h4>
<p>
<span class="new1">2999元</span>
<span class="new2">3099元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/3.webp" alt=""width="160" height="160">
<h3>全面屏电视E43k</h3>
<h4>全面屏设计,海量内容</h4>
<p>
<span class="new1">1399元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/4.webp" alt=""width="160" height="160">
<h3>小米电视4A 70英寸</h3>
<h4>大屏更享受</h4>
<p>
<span class="new1">3399元</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/5.jpg" alt=""width="160" height="160">
<h3>米家空调</h3>
<h4>出众静音,快速制冷热</h4>
<p>
<span class="new1">1699元</span>
<span class="new2">1799元</span>
</p>
</a>
</li>
<li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li>
<li class="only">
<a href="#"><img src="images/7.webp" alt=""width="160" height="160">
<h3>米家互联网洗烘一体机 Pro 10kg</h3>
<h4>智能洗烘，省心省力</h4>
<p>
<span class="new1">2899元</span>
<span class="new2">3299元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/8.webp" alt=""width="160" height="160">
<h3>Redmi全自动波轮洗衣机1A 8kg</h3>
<h4>一键操作,父母都爱用</h4>
<p>
<span class="new1">799元</span>
<span class="new2">899元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/9.webp" alt=""width="160" height="160">
<h3>Air 13.3" 2019款</h3>
<h4>新一代独立显卡</h4>
<p>
<span class="new1">5399元起</span>
</p>
</a>
</li>
<li class="ten s">
<a href="#"><img src="images/10.webp" alt=""width="80" height="80">
<h3>米家互联网烟灶套装(天然气)</h3>
<p>
<span class="new1">2099元</span>
</p>
</a>
</li>
<li class="eleven">
<a href="#">
<div class="imo">
浏览更多
<small>热门</small>
</div>
<div class="figure">
<i></i>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgthree">
<a href="#"><img src="images/bigimg5.webp" alt=""></a>
</div>
<div class="floortwo">
<div class="two_hd">
<h2>配件</h2>
<div class="list_hd">
<ul>
<li class="first">热门</li>
<li>充电器</li>
</ul>
</div>
</div>
<div class="two_bd clearfix">
<ul>
<li class="one">
<a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a>
</li>
<li class="only">
<a href="#"><img src="images/2.webp" alt=""width="160" height="160">
<h3>小米全面屏电视65寸 E65X</h3>
<h4>全面屏设计</h4>
<p>
<span class="new1">2999元</span>
<span class="new2">3099元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/3.webp" alt=""width="160" height="160">
<h3>全面屏电视E43k</h3>
<h4>全面屏设计,海量内容</h4>
<p>
<span class="new1">1399元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/4.webp" alt=""width="160" height="160">
<h3>小米电视4A 70英寸</h3>
<h4>大屏更享受</h4>
<p>
<span class="new1">3399元</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/5.jpg" alt=""width="160" height="160">
<h3>米家空调</h3>
<h4>出众静音,快速制冷热</h4>
<p>
<span class="new1">1699元</span>
<span class="new2">1799元</span>
</p>
</a>
</li>
<li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li>
<li class="only">
<a href="#"><img src="images/7.webp" alt=""width="160" height="160">
<h3>米家互联网洗烘一体机 Pro 10kg</h3>
<h4>智能洗烘，省心省力</h4>
<p>
<span class="new1">2899元</span>
<span class="new2">3299元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/8.webp" alt=""width="160" height="160">
<h3>Redmi全自动波轮洗衣机1A 8kg</h3>
<h4>一键操作,父母都爱用</h4>
<p>
<span class="new1">799元</span>
<span class="new2">899元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/9.webp" alt=""width="160" height="160">
<h3>Air 13.3" 2019款</h3>
<h4>新一代独立显卡</h4>
<p>
<span class="new1">5399元起</span>
</p>
</a>
</li>
<li class="ten s">
<a href="#"><img src="images/10.webp" alt=""width="80" height="80">
<h3>米家互联网烟灶套装(天然气)</h3>
<p>
<span class="new1">2099元</span>
</p>
</a>
</li>
<li class="eleven">
<a href="#">
<div class="imo">
浏览更多
<small>热门</small>
</div>
<div class="figure">
<i></i>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgthree">
<a href="#"><img src="images/bigimg6.webp" alt=""></a>
</div>
<div class="floortwo">
<div class="two_hd">
<h2>周边</h2>
<div class="list_hd">
<ul>
<li class="first">热门</li>
<li>出行</li>
</ul>
</div>
</div>
<div class="two_bd clearfix">
<ul>
<li class="one">
<a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a>
</li>
<li class="only">
<a href="#"><img src="images/2.webp" alt=""width="160" height="160">
<h3>小米全面屏电视65寸 E65X</h3>
<h4>全面屏设计</h4>
<p>
<span class="new1">2999元</span>
<span class="new2">3099元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/3.webp" alt=""width="160" height="160">
<h3>全面屏电视E43k</h3>
<h4>全面屏设计,海量内容</h4>
<p>
<span class="new1">1399元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/4.webp" alt=""width="160" height="160">
<h3>小米电视4A 70英寸</h3>
<h4>大屏更享受</h4>
<p>
<span class="new1">3399元</span>
<span class="new2">3999元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/5.jpg" alt=""width="160" height="160">
<h3>米家空调</h3>
<h4>出众静音,快速制冷热</h4>
<p>
<span class="new1">1699元</span>
<span class="new2">1799元</span>
</p>
</a>
</li>
<li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li>
<li class="only">
<a href="#"><img src="images/7.webp" alt=""width="160" height="160">
<h3>米家互联网洗烘一体机 Pro 10kg</h3>
<h4>智能洗烘，省心省力</h4>
<p>
<span class="new1">2899元</span>
<span class="new2">3299元</span>
</p></a>
</li>
<li class="only">
<a href="#"><img src="images/8.webp" alt=""width="160" height="160">
<h3>Redmi全自动波轮洗衣机1A 8kg</h3>
<h4>一键操作,父母都爱用</h4>
<p>
<span class="new1">799元</span>
<span class="new2">899元</span>
</p>
</a>
</li>
<li class="only">
<a href="#"><img src="images/9.webp" alt=""width="160" height="160">
<h3>Air 13.3" 2019款</h3>
<h4>新一代独立显卡</h4>
<p>
<span class="new1">5399元起</span>
</p>
</a>
</li>
<li class="ten s">
<a href="#"><img src="images/10.webp" alt=""width="80" height="80">
<h3>米家互联网烟灶套装(天然气)</h3>
<p>
<span class="new1">2099元</span>
</p>
</a>
</li>
<li class="eleven">
<a href="#">
<div class="imo">
浏览更多
<small>热门</small>
</div>
<div class="figure">
<i></i>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="bigimgthree">
<a href="#"><img src="images/big7.webp" alt=""></a>
</div>
<div class="floorthree">
<div class="th_hd">
<h2>视频</h2>
<div class="th_list">
<a href="#">
<span>查看全部</span>
<i></i>
</a>
</div>
</div>
<div class="th_bd clearfix">
<ul>
<li><a href="#">
<div class="vedio"><img src="images/vedio1.webp" alt="Redmi 10X系列发布会" width="296" height="180">
<span>
<i></i>
</span></div>
<h3>Redmi 10X系列发布会</h3>
<p>Redmi 10X系列发布会</p>
</a></li>
<li>
<a href="#">
<div class="vedio"><img src="images/vedio2.webp" alt="Redmi 10X系列发布会" width="296" height="180">
<span>
<i></i>
</span></div>
<h3>小米10 青春版 发布会</h3>
</a>
</li>
<li>
<a href="#">
<div class="vedio"><img src="images/vedio3.webp" alt="Redmi 10X系列发布会" width="296" height="180">
<span>
<i></i>
</span></div>
<h3>小米10 8k手机拍大片</h3>
</a>
</li>
<li>
<a href="#">
<div class="vedio"><img src="images/vedio4.webp" alt="Redmi 10X系列发布会" width="296" height="180">
<span>
<i></i>
</span></div>
<h3>小米10发布会</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--底部模块制作-->
<footer>
<div class="w">
<div class="footer_service">
<ul class="clearfix">
<li class="first">
<a href="#">
<em></em>
预约维修服务
</a>
</li>
<li class="second">
<a href="#">
<em></em>
7天无理由退货
</a>
</li>
<li class="third">
<a href="#">
<em></em>
15天免费换货
</a>
</li>
<li class="four">
<a href="#">
<em></em>
满99元包邮
</a>
</li>
<li class="five">
<a href="#">
<em></em>
520余家售后网点
</a>
</li>
</ul>
</div>
<div class="footer_links clearfix">
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<div class="contect">
<p class="iphone">400-100-5678</p>
<p>8:00-18:00(仅收市话费)</p>
<a href="#" class="dis">
<em></em>
人工客服
</a>
<div class="fllow">
关注小米：
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
</div>
</div>
<div class="last">
<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>
©
<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>
</footer>
</body>
</html>
2.小米官网css制作
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?aa4r0l');
src: url('fonts/icomoon.eot?aa4r0l#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?aa4r0l') format('truetype'),
url('fonts/icomoon.woff?aa4r0l') format('woff'),
url('fonts/icomoon.svg?aa4r0l#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.tu {
width: 100%;
height: 120px;
background: url("images/big.jpg") no-repeat 50%;
background-size: auto 120px;
}
.shortcut {
position: relative;
height: 40px;
line-height: 40px;
background-color: #333333;
}
.fl ul li {
color: #b0b0b0;
font-size: 12px;
float: left;
}
.fl ul li:nth-child(2n) {
height: 16px;
border: 0.5px solid #666666;
margin: 12px 13px 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.fr ul li {
color: #b0b0b0;
font-size: 12px;
float: right;
}
.fr ul li:nth-child(even) {
height: 16px;
border: 0.5px solid #666666;
margin: 12px 13px 0;
}
.w {
width: 1226px;
margin: 0 auto;
}
.nav {
position: relative;
height: 100px;
/*background-color: pink;*/
}
.logo {
position: absolute;
top: 22px;
left: 0;
}
.hotwords {
position: absolute;
top: 6px;
left: 220px;
}
.hotwords a {
display: inline-block;
/*width: 75px;*/
height: 88px;
line-height: 88px;
text-align: center;
margin: 0 10px;
font-size: 16px;
color: black;
}
.search {
position: absolute;
top: 24px;
left: 921px;
width: 305px;
height: 50px;
border: 1px solid #e0e0e0;
}
.search input {
float: left;
width: 238px;
height: 48px;
}
.search button {
float: right;
width: 65px;
height: 48px;
}
.bignav .l {
width: 220px;
height: 420px;
background-color: #3f3d3d;
}
.bignav .l ul li {
position: relative;
padding-left: 30px;
height: 42px;
line-height: 42px;
}
.bignav ul li a {
display: block;
font-size: 16px;
color: #ffff;
width: 190px;
height: 42px;
}
.bignav ul li:hover {
background-color: #ff6700;
}
.l ul li::after {
position: absolute;
top: 1px;
right: 20px;
font-family: icomoon;
content: "\e90c";
color: #dedede;
font-size: 18px;
}
.main {
position: relative;
background: url("images/niu.png") no-repeat 0px -40px;
}
.zuo,
.you {
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
line-height: 50px;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 20px;
}
.zuo a {
display: block;
height: 50px;
color: #ffffff;
}
.you a {
display: block;
height: 50px;
color: #ffffff;
}
.zuo {
left: 220px;
}
.you {
right: 0;
}
.niu {
position: absolute;
bottom: 15px;
right: 50px;
width: 70px;
height: 13px;
background: rgba(255,255,255,0.3);
border-radius: 7px;
}
.niu li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
.niu .four {
background-color: #ff5000;
}
.guding {
position: fixed;
top: 125px;
right: 0px;
background-color: #fff;
width: 80px;
height: 450px;
text-align: center;
}
.guding li {
position: relative;
border-left: 1px solid #f5f5f5 ;
border-bottom: 1px solid #f5f5f5;
width: 80px;
height: 90px;
}
.guding img {
position: absolute;
top: 20px;
left: 20px;
}
.guding p {
position: absolute;
top: 60px;
left: 10px;
font-size: 16px;
}
.guding .last {
position: absolute;
top: 60px;
left: 15px;
font-size: 16px;
}
.fours .imp {
position: relative;
margin-top: 10px;
height: 170px;
}
.imp .six {
width: 220px;
height: 170px;
background-color: #5f5750;
}
.imp .six li {
float: left;
width: 73px;
height: 82px;
padding: 0 3px;
border-right:1px solid #665e57 ;
border-bottom:1px solid #665e57;
text-align: center;
}
.imp .six li img {
display: block;
width: 24px;
height: 24px;
margin: 20px auto 4px;
}
.imp .six li a:hover{
color: #fff;
}
.bd {
width: 988px;
height: 170px;
}
.bd {
position: absolute;
left: 238px;
top: 0;
}
.three {
position: relative;
}
.three .one {
position: absolute;
left: 0;
}
.three .two {
position: absolute;
left: 336px;
}
.three .three1 {
position: absolute;
left: 672px;
}
.container {
width: 100%;
background-color: #f5f5f5;
margin-top: 20px;
}
.con_hd {
position: relative;
height: 58px;
}
.con_hd h2 {
float: left;
line-height: 58px;
color: #333333;
}
.list .one{
position: absolute;
top: 16px;
right: 0;
display: inline-block;
width: 36px;
font-size: 24px;
border: 1px solid #e0e0e0;
line-height: 24px;
text-align: center;
}
.list .two {
position: absolute;
top: 16px;
right: 36px;
display: inline-block;
width: 36px;
font-size: 24px;
border: 1px solid #e0e0e0;
border-right: none;
line-height: 24px;
text-align: center;
}
.con_bd {
position: relative;
height: 340px;
}
.con_bd .first {
float: left;
width: 234px;
height: 340px;
background-color: #f1eded;
padding-top: 39px;
border-top: 1px solid #e53935;
text-align: center;
}
.con_bd .first .round {
font-size: 21px;
color: #ef3a3b;
padding-top: 15px;
}
.con_bd .first img {
margin: 25px auto;
}
.con_bd .first .desc {
color: rgba(0,0,0,.54);
font-size: 15px;
}
.con_bd .shu {
width: 168px;
height: 46px;
margin: 32px;
}
.shu span {
float: left;
width: 46px;
height: 46px;
background: #605751;
color: #fff;
font-size: 24px;
line-height: 46px;
}
.shu i {
width: 15px;
float: left;
height: 46px;
line-height: 46px;
color: #605751;
font-size: 28px;
}
.con_bd .img .i1{
position: absolute;
left: 244px;
width: 234px;
height: 339px;
border-top: 1px solid #00c0a5;
background-color: #fafafa;
}
.con_bd .img .i1 a {
display: inline-block;
width: 234px;
height: 339px;
}
.con_bd .img .i1 a:hover {
color: #666;;
}
.con_bd .img img {
margin-top: 50px;
margin-left: 37px;
}
.con_bd .img 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 h4 {
text-align: center;
color: #adadad;
font-weight: 400;
margin-bottom: 20px;
}
.img .i1 p {
text-align: center;
font-size: 16px;
}
.img .i1 .new1 {
color: #fa6509;
}
.img .i1 .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.con_bd .img .i2{
position: absolute;
left: 494px;
width: 234px;
height: 339px;
border-top: 1px solid #ffac13;
background-color: #fafafa;
}
.con_bd .img .i2 a {
display: inline-block;
width: 234px;
height: 339px;
}
.con_bd .img .i2 a:hover {
color: #666;
}
.img .i2 p {
text-align: center;
font-size: 16px;
}
.img .i2 .new1 {
color: #fa6509;
}
.img .i2 .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.con_bd .img .i3{
position: absolute;
left: 744px;
width: 234px;
height: 339px;
border-top: 1px solid #83c44e;
background-color: #fafafa;
}
.con_bd .img .i3 a {
display: inline-block;
width: 234px;
height: 339px;
}
.con_bd .img .i3 a:hover {
color: #666;
}
.img .i3 p {
text-align: center;
font-size: 16px;
}
.img .i3 .new1 {
color: #fa6509;
}
.img .i3 .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.con_bd .img .i4{
position: absolute;
left: 994px;
width: 234px;
height: 339px;
border-top: 1px solid #2196f3;
background-color: #fafafa;
}
.con_bd .img .i4 a {
display: inline-block;
width: 234px;
height: 339px;
}
.con_bd .img .i4 a:hover {
color: #666;
}
.img .i4 p {
text-align: center;
font-size: 16px;
}
.img .i4 .new1 {
color: #fa6509;
}
.img .i4 .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.bigimg img{
margin-top: 15px;
width: 1226px;
height: 120px;
}
.floor .fl_hd {
position: relative;
height: 58px;
/*background-color: pink;*/
margin-top: 10px;
}
.fl_hd h2 {
line-height: 58px;
color: #333333;
}
.fl_hd .list_con {
position: absolute;
right: 0;
top: 0;
line-height: 58px;
font-size: 16px;
}
.fl_hd .list_con a {
color: #424242;
}
.list_con i {
width: 12px;
height: 12px;
padding: 4px;
border-radius:50%;
font-size: 12px;
line-height: 12px;
background: #b0b0b0;
color: #fff;
}
.list_con a::after {
font-family: icomoon;
content: "\ea42";
margin-left: 8px;
line-height: 58px;
}
.list_con a:hover {
color: #fa6509;
transition: all .3s;
}
.fl_bd .one {
float: left;
width: 234px;
}
.fl_bd .one:hover {
transform: translatez(3px);
transform: translateY(-3px);
box-shadow: 0 5px 10px #cccccc;
transition: all .3s;
}
.fl_bd .one a {
display: block;
width: 100%;
height: 100%;
}
.container .fl_bd .two li {
margin-left: 14px;
margin-bottom: 14px;
float: left;
width: 234px;
height: 300px;
background-color: #fafafa;
}
.fl_bd .two li:hover {
transform: translatez(3px);
transform: translateY(-3px);
box-shadow: 0 5px 10px #cccccc;
transition: all .3s;
}
.fl_bd .two li h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 90px;
}
.fl_bd .two li h4 {
text-align: center;
color: #adadad;
font-weight: 400;
margin-bottom: 5px;
}
.fl_bd .two li a {
display: inline-block;
width: 234px;
height: 300px;
}
.fl_bd .two li a:hover {
color: #666;
}
.fl_bd .two li p {
text-align: center;
font-size: 16px;
}
.fl_bd .two li .new1 {
color: #fa6509;
}
.fl_bd .two li img {
margin-top: 35px;
margin-left: 37px;
margin-bottom: 10px;
}
.fl_bd .two .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.fl_bd .two .third h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 75px;
}
.fl_bd .two .third h4 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 20px;
margin-right: 20px;
}
.fl_bd .two .five h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 77px;
}
.fl_bd .two .six h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 79px;
}
.fl_bd .two .six h4 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 20px;
margin-right: 20px;
}
.fl_bd .two .seven h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 28px;
}
.fl_bd .two .eight h3 {
color: #4f4f4f;
font-size: 16px;
font-weight: 400;
margin: 0 33px;
}
.fl_bd .two .eight h4 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 20px;
margin-right: 20px;
}
.bigimgtwo img{
margin-top: 15px;
width: 1226px;
height: 120px;
}
.two_hd {
position: relative;
height: 58px;
margin-top: 10px;
}
.two_hd h2 {
line-height: 58px;
color: #333333;
}
.two_hd .list_hd {
position: absolute;
right: 0;
top: 0;
}
.two_hd .list_hd ul {
padding: 20px 0 0;
}
.two_hd .list_hd ul li {
display: inline-block;
font-size: 16px;
cursor: pointer;
transition: border .3s;
}
.two_hd .list_hd .first {
margin-right: 30px;
color: #ff6700;
border-bottom: 2px solid #ff6700;
}
.two_hd .list_hd .second {
margin-right: 30px;
}
.two_hd .list_hd ul li:hover {
color: #ff6700;
border-bottom: 2px solid #ff6700;
}
.container .two_bd ul li {
margin-left: 14px;
margin-bottom: 14px;
float: left;
width: 234px;
height: 300px;
background-color: #fafafa;
}
.container .two_bd ul .one {
margin-left: 0;
}
.container .two_bd ul .six {
margin-left: 0;
}
.container .two_bd ul .ten {
position: relative;
height: 143px;
}
.container .two_bd ul .eleven {
position: relative;
height: 143px;
}
.two_bd ul li:hover {
transform: translatez(3px);
transform: translateY(-3px);
box-shadow: 0 5px 10px #cccccc;
transition: all .3s;
}
.two_bd ul .only img {
margin-top: 35px;
margin-left: 37px;
margin-bottom: 10px;
}
.two_bd ul li h3 {
text-align: center;
color: #333;
font-size: 14px;
font-weight: 400;
}
.two_bd ul li h4 {
text-align: center;
color: #adadad;
font-weight: 400;
margin-bottom: 5px;
}
.two_bd ul li a {
display: inline-block;
width: 234px;
}
.two_bd ul li a:hover {
color: #666;
}
.two_bd ul li p {
text-align: center;
font-size: 16px;
}
.two_bd ul li .new1 {
color: #fa6509;
}
.two_bd ul .new2 {
text-decoration: line-through;
color: #b0b0b0;
}
.two_bd ul .s h3 {
margin:35px 112px 5px 30px;
font-size: 14px;
font-weight: 400;
}
.two_bd ul .ten img {
position: absolute;
right: 15px;
top: 25px;
}
.two_bd ul .s p {
margin: 0 110px 0 30px;
}
.eleven .figure i::before {
font-family: icomoon;
content: "\ea42";
}
.eleven .figure i {
font-size: 48px;
}
.eleven .figure {
position: absolute;
right: 35px;
top: 35px;
color: #ff6700;
}
.eleven .imo {
display: block;
margin: 50px 110px 0 30px;
font-size: 18px;
color: #333;
}
.eleven small {
display: block;
font-size: 12px;
color: #757575;
}
.bigimgthree img{
margin-top: 15px;
width: 1226px;
height: 120px;
}
.floorthree .th_hd {
position: relative;
height: 58px;
margin-top: 10px;
}
.th_hd h2 {
line-height: 58px;
color: #333333;
}
.th_hd .th_list {
position: absolute;
right: 0;
top: 0;
line-height: 58px;
font-size: 16px;
}
.th_hd .th_list a {
color: #424242;
}
.th_list i::after {
position: absolute;
right: 0;
top: 1px;
font-family: icomoon;
content: "\ea42";
display: block;
font-size: 18px;
}
.th_hd span {
position: absolute;
right: 22px;
width: 64px;
}
.th_list a:hover {
color: #fa6509;
transition: all .3s;
}
.th_bd ul li i::before {
font-family: icomoon;
content: "\ea1c";
}
.th_bd ul li i {
font-size: 18px;
line-height: 15px;
}
.th_bd ul li:first-child {
margin-left: 0;
}
.th_bd ul li {
position: relative;
float: left;
width: 296px;
height: 285px;
margin-left: 14px;
margin-bottom: 14px;
text-align: center;
background: #fff;
}
.th_bd ul li:hover {
transform: translatez(3px);
transform: translateY(-3px);
box-shadow: 0 5px 10px #cccccc;
transition: all .3s;
}
.th_bd ul li .vedio {
position: relative;
width: 296px;
height: 180px;
margin: 0 0 28px;
}
.th_bd ul li span {
position: absolute;
left: 20px;
bottom: 10px;
width: 32px;
height: 20px;
border: 2px solid #fff;
border-radius: 12px;
background-color: #424242;
background-color: rgba(0,0,0,.6);
color: #fff;
transition: all .2s;
overflow: hidden;
}
.th_bd ul li a:hover {
color: #757575;
background-color: rgba(0,0,0,0);
}
.th_bd ul li a:hover span {
background-color: #ff6700;
border: #ff6700;
}
.footer_service {
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}
.footer_service ul li:first-child {
border-left: 0px;
}
.footer_service ul li {
float: left;
width: 19.8%;
height: 25px;
border-left: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
text-align: center;
}
.footer_service ul .first em::before {
font-family: icomoon;
content: "\e991";
}
.footer_service ul .second em::before {
font-family: icomoon;
content: "\e90d";
}
.footer_service ul .third em::before {
font-family: icomoon;
content: "\e906";
}
.footer_service ul .four em::before {
font-family: icomoon;
content: "\e99f";
}
.footer_service ul .five em::before {
font-family: icomoon;
content: "\e947";
}
.footer_links {
padding: 40px 0;
}
.footer_links dl {
float: left;
width: 160px;
margin: 0px;
}
.footer_links dl dt {
margin: -1px 0 26px;
font-size: 14px;
color: #424242;
}
.footer_links dl dd {
margin: 10px 0 0;
font-size: 12px;
}
.contect {
float: right;
width: 251px;
border-left: 1px solid #e0e0e0;
text-align: center;
color: #616161;
}
.contect .iphone {
font-size: 22px;
color: #ff6700;
}
.contect p {
font-size: 12px;
margin: 0 0 5px 0;
}
.contect em::before {
font-family: icomoon;
content: "\e906";
}
.contect .dis {
display: inline-block;
border: 1px solid #b0b0b0;
text-align: center;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
color: #ff6700;
border-color: #ff6700;
}
.fllow a {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin-left: 6px;
}
.fllow .one {
background: url("images/wb.png") 50% 0 no-repeat;
background-size: cover;
}
.fllow .two {
background: url("images/wx.png") 50% 0 no-repeat;
background-size: cover;
}
.last {
position: relative;
}
.last .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;
}
.text p a:hover {
color: #ff6700;
}
.links {
height: 28px;
margin: 4px 0 15px;
padding-left: 67px;
}
.links img {
height: 28px;
}
- 初始化制作
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/*css3盒子模型*/
box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
/*默认有灰色边框，我们需要手动去掉*/
border: 0;
outline: none;
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
