admin管理员组文章数量:1568308
前言
历时三个星期，验收一下学习成果吧，写了小米官网的第一页，一起来看看吧！
1.HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 头部-->
<div class="ssp">
<div class="banner1 clearfix">
<img src="tupian/banner1.jpg" alt="">
</a>
</div>
</a>
<!-- 导航栏 -->
<div class="nav clearfix">
<div class="w clearfix">
<ul>
<li><a href="https://www.mi/index.html">小米商城</a></li>
<li><a href="https://www.miui/">MiUi</a></li>
<li><a href="https://iot.mi/">loT</a></li>
<li><a href="https://i.mi/">云服务</a></li>
<li><a href="https://airstar/home">天星科技</a></li>
<li><a href="https://youpin.mi/">有品</a></li>
<li><a href="https://xiaoai.mi/">小爱开放平台</a></li>
<li><a href="https://qiye.mi/">企业团购</a></li>
<li><a href="https://www.mi/aptitude/list/?id=41">资质证照</a></li>
<li><a href="https://www.mi/aptitude/list/">协议规则</a></li>
<li><a href="https://www.mi/appdownload/">下载app</a></li>
<li><a href="https://xiaomishare.mi/?from=micom">智能生活</a></li>
<li><a href="#">Select Location</a></li>
</ul>
<div>
<ul>
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">通知消息</a></li>
<span>
<a href="https://www.mi/buy/cart" class="iconfont"> 购物车(0)</a>
</span>
</ul>
</div>
</div>
</div>
<!-- 导航栏结束 -->
<!-- 搜索栏开始 -->
<div class="w clearfix">
<div class="nav_search clearfix">
<div class="logo">
<a href="false_xiaomi.html">
<div>
<img src="tupian/logo/mi-logo.png" alt="">
<img src="tupian/logo/mi-home.png" alt="">
</div>
</a>
</div>
<ul>
<li>
<a href="#">小米手机</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi红米</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2-0.jpg" alt="">
</div>
<div>
Redmi K30S 至尊纪念版
</div>
<p>2599元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2-1.jpg" alt="">
</div>
<div>
Redmi K30 至尊纪念版
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2-2.jpg" alt="">
</div>
<div>
Redmi K30Pro 系列
</div>
<p>2999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2-3.jpg" alt="">
</div>
<div>
Redmi K30 系列
</div>
<p>1399元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2-4.jpg" alt="">
</div>
<div>
Redmi 10X
</div>
<p>999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/2-5.jpg" alt="">
</div>
<div>
Redmi Note 8
</div>
<p>899元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">电视</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">家电</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">路由器</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">智能硬件</a>
<div class="nav_xiaomishouji clearfix">
<div class="w clearfix">
<ul>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/1.jpg" alt="">
</div>
<div>
小米10 至尊纪念版
</div>
<p>5299元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/2.jpg" alt="">
</div>
<div>
小米10 Pro
</div>
<p>5999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/3.jpg" alt="">
</div>
<div>
小米10
</div>
<p>3799元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu">
<img src="shangping/4.jpg" alt="">
</div>
<div>
小米10 青春版 5G
</div>
<p>1999元起</p>
</a>
</li>
<li class="xiaoshangping">
<a href="#">
<div class="tu tu_last">
<img src="shangping/5.jpg" alt="">
</div>
<div>
小米Mix Alpha
</div>
<p>19999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
<a href="#">
<div class="search">
<form action="">
<input type="text" placeholder="小米10 Pro 尊享版" autofocus="autofocus">
<input type="submit" value="">
</form>
</div>
</a>
</div>
</div>
<!-- 搜索栏结束 -->
</div>
<!-- 网页头部结束 -->
<!-- 内容开始 -->
<div class="clearfix">
<!-- 上半部分开始 -->
<div class="w1 clearfix">
<div class="top_banner clearfix">
<div class="nav11">
<ul>
<li>
<a href="#">手机 电话卡 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/2.jpg" alt=""><span>Redmi
K30S 至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/3.jpg" alt=""><span>Redmi 10X
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/4.jpg" alt=""><span>Redmi
9</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/5.jpg" alt=""><span>小米10
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/6.jpg" alt=""><span>Redmi K30
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/7.jpg" alt=""><span>Redmi 10X
5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/8.jpg" alt=""><span>Redmi
9A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/9.jpg" alt=""><span>小米10</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/10.jpg" alt=""><span>Redmi
K30 Pro变焦版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/11.jpg" alt=""><span>Redmi
10X 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/12.jpg" alt=""><span>Redmi
8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/13.jpg" alt=""><span>小米10
青春版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/14.jpg" alt=""><span>Redmi
K30 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/15.jpg" alt=""><span>Redmi
Note 8 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/22.jpg" alt=""><span>Redmi
K30 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/23.png"
alt=""><span>手机上门维修</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/24.jpg" alt=""><span>中国电信</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">电视 盒子 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/dianshi/1.jpg"
alt=""><span>小米透明电视</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/2.jpg" alt=""><span>小米电视大师
82英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/3.jpg" alt=""><span>电视大师 65英寸
OLED</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/4.jpg" alt=""><span>Redmi智能电视
MAX 98"</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/5.jpg" alt=""><span>小米电视5 Pro
55英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/6.jpg" alt=""><span>小米电视5 Pro
65英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/7.jpg" alt=""><span>小米电视5 Pro
75英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/8.jpg" alt=""><span>小米电视5
75英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/9.jpg" alt=""><span>小米电视5
65英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/10.jpg" alt=""><span>小米电视5
55英寸</span></a>
</li>
<li>
<a href="#><img src=" tupian/shangping/dianshi/11.jpg" alt=""><span>小米电视4A
60英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/12.jpg" alt=""><span>小米电视4A
70英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/13.jpg"
alt=""><span>Redmi智能电视 A系列</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/14.jpg"
alt=""><span>小米全面屏电视E43K</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/15.jpg" alt=""><span>Redmi
智能电视 X55</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/16.jpg" alt=""><span>小米电视 4S
75英寸</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/17.jpg"
alt=""><span>量子点电视</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/18.jpg"
alt=""><span>金属全面屏电视</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/19.jpg"
alt=""><span>小米全面屏电视</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/20.jpg"
alt=""><span>小米壁画电视</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/21.jpg" alt=""><span>Redmi
智能电视 X系列</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/22.jpg"
alt=""><span>小米盒子</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/23.jpg"
alt=""><span>电视音箱</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/dianshi/24.jpg"
alt=""><span>激光投影电视</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">笔记本 显示器 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/2.jpg" alt=""><span>Redmi
K30S 至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/3.jpg" alt=""><span>Redmi 10X
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/4.jpg" alt=""><span>Redmi
9</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/5.jpg" alt=""><span>小米10
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/6.jpg" alt=""><span>Redmi K30
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/7.jpg" alt=""><span>Redmi 10X
5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/8.jpg" alt=""><span>Redmi
9A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/9.jpg" alt=""><span>小米10</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/10.jpg" alt=""><span>Redmi
K30 Pro变焦版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/11.jpg" alt=""><span>Redmi
10X 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/12.jpg" alt=""><span>Redmi
8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/13.jpg" alt=""><span>小米10
青春版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/14.jpg" alt=""><span>Redmi
K30 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/15.jpg" alt=""><span>Redmi
Note 8 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/22.jpg" alt=""><span>Redmi
K30 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/23.png"
alt=""><span>手机上门维修</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/24.jpg" alt=""><span>中国电信</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">家电 插线板 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#><img src=" tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">出行 穿戴 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/2.jpg" alt=""><span>Redmi
K30S 至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/3.jpg" alt=""><span>Redmi 10X
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/4.jpg" alt=""><span>Redmi
9</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/5.jpg" alt=""><span>小米10
Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/6.jpg" alt=""><span>Redmi K30
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/7.jpg" alt=""><span>Redmi 10X
5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/8.jpg" alt=""><span>Redmi
9A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/9.jpg" alt=""><span>小米10</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/10.jpg" alt=""><span>Redmi
K30 Pro变焦版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/11.jpg" alt=""><span>Redmi
10X 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/12.jpg" alt=""><span>Redmi
8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/13.jpg" alt=""><span>小米10
青春版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/14.jpg" alt=""><span>Redmi
K30 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/15.jpg" alt=""><span>Redmi
Note 8 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/22.jpg" alt=""><span>Redmi
K30 4G</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/23.png"
alt=""><span>手机上门维修</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/24.jpg"
alt=""><span>中国电信</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">智能 路由器 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">电源 配件 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="none.html"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/2.jpg" alt=""><span>Redmi
K30S 至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/3.jpg" alt=""><span>Redmi 10X
Pro</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/4.jpg" alt=""><span>Redmi
9</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/5.jpg" alt=""><span>小米10
Pro</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/6.jpg" alt=""><span>Redmi K30
至尊纪念版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/7.jpg" alt=""><span>Redmi 10X
5G</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/8.jpg" alt=""><span>Redmi
9A</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/9.jpg"
alt=""><span>小米10</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/10.jpg" alt=""><span>Redmi
K30 Pro变焦版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/11.jpg" alt=""><span>Redmi
10X 4G</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/12.jpg" alt=""><span>Redmi
8</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/13.jpg" alt=""><span>小米10
青春版</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/14.jpg" alt=""><span>Redmi
K30 Pro</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/15.jpg" alt=""><span>Redmi
Note 8 Pro</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/21.jpg"
alt=""><span>小米云服务</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/22.jpg" alt=""><span>Redmi
K30 4G</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/23.png"
alt=""><span>手机上门维修</span></a>
</li>
<li>
<a href="none.html"><img src="tupian/shangping/24.jpg"
alt=""><span>中国电信</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">健康 儿童 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">耳机 音响 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/7.jpg" alt=""><span>Redmi 10X
5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/8.jpg" alt=""><span>Redmi
9A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/9.jpg" alt=""><span>小米10</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/10.jpg" alt=""><span>Redmi
K30 Pro变焦版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/11.jpg" alt=""><span>Redmi
10X 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/12.jpg" alt=""><span>Redmi
8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/13.jpg" alt=""><span>小米10
青春版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/14.jpg" alt=""><span>Redmi
K30 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/15.jpg" alt=""><span>Redmi
Note 8 Pro</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
<li><a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/22.jpg" alt=""><span>Redmi
K30 4G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/23.png"
alt=""><span>手机上门维修</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/24.jpg" alt=""><span>中国电信</span></a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">生活 箱包 <em></em></a>
<div class="top_banner_goods">
<ul class="clearfix">
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/1.jpg" alt=""><span>小米10
至尊纪念版</span></a>
</li>
<li> <a href="#"><img src="tupian/shangping/16.jpg" alt=""><span>Redmi
8A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/17.jpg" alt=""><span>小米10
腾讯黑鲨游戏手机</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/18.jpg" alt=""><span>Redmi
K30 5G</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/19.jpg" alt=""><span>Redmi
Note 8</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/20.jpg" alt=""><span>Redmi
7A</span></a>
</li>
<li>
<a href="#"><img src="tupian/shangping/21.jpg" alt=""><span>小米云服务</span></a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="clesrfix">
<div class="left">
<a href=""></a>
</div>
<div class="right">
<a href=""></a>
</div>
</div>
</div>
</div>
<!-- 上半部分结束 -->
<!-- 下半部分开始 -->
<div class="w bot_banner clearfix">
<div class="bot_left clearfix">
<ul>
<li>
<a href="https://www.mi/buy/seckill"><img src="tupian/链接/1.png"
alt=""><br><span>小米秒杀</span></a>
</li>
<li>
<a href="https://qiye.mi/"><img src="tupian/链接/2.png" alt=""><br><span>企业团购</span></a>
</li>
<li>
<a href="https://www.mi/order/fcode"><img src="tupian/链接/3.png"
alt=""><br><span>F码通道</span></a>
</li>
<li>
<a href="https://www.mi/mimobile/"><img src="tupian/链接/4.png"
alt=""><br><span>米粉卡</span></a>
</li>
<li>
<a href="https://www.mi/a/h/16769.html"><img src="tupian/链接/5.png"
alt=""><br><span>以旧换新</span></a>
</li>
<li>
<a href="https://recharge.10046.mi/"><img src="tupian/链接/6.png"
alt=""><br><span>话费充值</span></a>
</li>
</ul>
</div>
<div class="bot_center1">
<a href="https://www.mi/buy/detail?product_id=10000204"><img src="tupian/Redmi K30.jpg"
alt=""></a>
</div>
<div class="bot_center2">
<a href="https://www.mi/buy?product_id=10000244"><img src="tupian/Redmi 10X.jpg" alt=""></a>
</div>
<div class="bot_center3">
<a href="https://www.mi/buy?product_id=12931"><img src="tupian/小米手表.jpg" alt=""></a>
</div>
</div>
<!-- 侧边栏开始 -->
<div class="column">
<ul>
<li>
<a href="#"><img src="tupian/aside/1.png" alt=""><br><span>手机APP</span></a>
</li>
<li>
<a href="#"><img src="tupian/aside/2.png" alt=""><br><span>个人中心</span></a>
</li>
<li>
<a href="#"><img src="tupian/aside/3.png" alt=""><br><span>售后服务</span></a>
</li>
<li>
<a href="#"><img src="tupian/aside/4.png" alt=""><br><span>人工客服</span></a>
</li>
<li>
<a href="#"><img src="tupian/aside/5.png" alt=""><br><span>购物车</span></a>
</li>
</ul>
</div>
<!-- 侧边栏结束 -->
<!-- 商品栏开始 -->
<div class="goods clearfix">
<div class="w clearfix">
</div>
</div>
</div>
<!-- 商品栏结束 -->
</body>
</html>
2.css样式代码如下
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
em,
i {
font-style: normal;
padding: 0;
margin: 0;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?bkblej');
src: url('fonts/icomoon.eot?bkblej#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bkblej') format('truetype'), url('fonts/icomoon.woff?bkblej') format('woff'), url('fonts/icomoon.svg?bkblej#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
input {
outline: none;
}
.w {
width: 1226px;
margin: 0 auto;
/* background-color: rgb(204, 206, 105); */
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
.banner1 {
width: 100%;
height: 99px;
/* 图片居中 */
text-align: center;
/*banner1图片右边超出部分隐藏*/
overflow: hidden;
}
.banner1 img {
position: relative;
width: 100%;
vertical-align: bottom;
}
body {
font-family: "Microsoft Yahei";
}
.banner1 .w {
/* 子绝父相 相对定位*/
position: relative;
/* 转化为行内块元素 */
display: inline-block;
height: 120px;
width: 1920px;
}
.banner1 .w img {
/* 子绝父相 绝对定位*/
position: absolute;
left: -680px;
height: 100%;
}
.ssp .nav {
background-color: rgb(51, 51, 51);
line-height: 40px;
}
.nav ul li {
float: left;
margin-right: 15px;
}
.nav ul li a {
color: rgb(176, 176, 176);
font-size: 12px;
font-family: "Microsoft Yahei";
}
.nav ul li a:hover {
color: #fff;
}
.nav .w div {
float: right;
}
.nav .w div span {
display: inline-block;
background-color: rgb(66, 66, 66);
}
.nav .w div .iconfont {
display: inline-block;
width: 96px;
padding: 0 10px;
height: 41px;
font-family: 'icomoon';
color: rgb(176, 176, 176);
transition: all .3s;
}
.nav .w div .iconfont:hover {
color: rgb(255, 103, 0);
background-color: #fff;
}
/* 搜索栏开始 */
.nav_search {
height: 100px;
/* background-color: rgb(255, 103, 0); */
}
.logo {
margin-top: 22.5px;
float: left;
background-color: rgb(255, 103, 0);
width: 55px;
height: 55px;
overflow: hidden;
margin-right: 180px;
}
.logo a div {
position: relative;
top: 0;
transition: all .3s;
}
.logo:hover div {
position: relative;
top: -61px;
}
.logo img {
margin: 3px;
}
.nav_search ul li {
float: left;
text-align: center;
}
.nav_search>ul>li>a {
display: inline-block;
padding: 0 9px;
height: 100px;
line-height: 100px;
font-family: "Microsoft Yahei";
font-style: 16px;
color: #333;
}
.nav_xiaomishouji {
display: none;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
/* transition: all 3s; */
}
@keyframes ssp_xpz {
0% {
height: 0;
}
100% {
height: 300px;
}
}
.shangping {
height: 300px;
}
/* 当外部li成为焦点时，里面的二级菜单显示 */
.nav_search ul li:hover .nav_xiaomishouji {
display: block;
z-index: 2;
background-color: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
box-shadow: 1px 1px 2px 1px #bbbaba;
animation: ssp_xpz .7s;
animation-fill-mode: forwards;
}
.nav_search>ul>li>a:hover {
color: rgb(255, 103, 0);
}
.nav_search .nav_xiaomishouji {
float: left;
}
.nav_search .nav_xiaomishouji .w li {
padding: 30px 10px;
font-size: 12px;
}
.nav_search .nav_xiaomishouji .w div {
width: 180px;
margin: 10px 0;
}
.nav_search .nav_xiaomishouji .w ul li a {
display: inline-block;
color: #000;
}
.nav_search .nav_xiaomishouji .w ul li a p {
color: #ff6700;
}
.nav_search .nav_xiaomishouji .w ul li a .tu {
border-right: 1px solid #e0e0e0;
}
.nav_search .nav_xiaomishouji .w ul li a .tu_last {
border-right: 1px solid transparent;
}
.nav_search .search {
position: relative;
float: right;
line-height: 100px;
width: 300px;
}
.nav_search .search input {
float: left;
}
.nav_search .search input[type="submit"] {
position: absolute;
right: 0;
top: 25px;
z-index: 2;
width: 52px;
height: 52px;
line-height: 24px;
font-family: "icomoon" !important;
color: #616161;
font-size: 18px;
background: #fff;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: all .3s;
}
.nav_search .search input[type="submit"]:hover {
background-color: #ff6700;
color: #fff;
}
.nav_search .search input[type="text"] {
position: absolute;
top: 25px;
right: 51px;
height: 50px;
width: 240px;
font-family: "Microsoft Yahei";
color: rgb(110, 110, 110);
text-indent: 1em;
border: 1px solid #e0e0e0;
}
.search_img {
float: right;
margin-top: 25px;
margin-left: -1px;
height: 50px;
width: 48px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: rgb(97, 96, 97);
line-height: 50px;
border: 1px solid #e0e0e0;
font-family: "icomoon";
}
/* 搜搜栏结束 */
/* 头部结束 */
div .w1 {
width: 1226px;
margin: 0 auto;
background-image: url(tupian/banner3.jpg);
background-position: center;
}
div .nav11 {
float: left;
width: 234px;
height: 460px;
background-color: rgba(110, 110, 110, .5);
}
div .nav11 ul {
padding: 20px 0;
}
div .nav11 ul li {
line-height: 42px;
text-indent: 2em;
transition: all .1s;
}
div .nav11 ul li:hover {
background-color: rgb(255, 103, 0);
}
div .nav11 ul li a {
display: block;
width: 234px;
height: 42px;
color: #fff;
font-size: 15px;
font-family: "Microsoft Yahei";
}
div .nav11 ul li em {
float: right;
margin-right: 30px;
font-size: 12px;
font-weight: 900;
color: #fff;
font-family: "icomoon";
}
div .w1>div {
float: left;
position: relative;
background-color: transparent;
font-family: "icomoon";
}
div .left {
position: absolute;
left: 234px;
top: 195px;
width: 41px;
height: 70px;
line-height: 70px;
font-size: 40px;
transition: all .3s;
}
div .left:hover {
background-color: rgba(2, 2, 2, 0.5);
}
div .w1 .left a {
color: #fff;
}
div .right {
position: absolute;
right: -992px;
top: 195px;
width: 41px;
height: 70px;
line-height: 70px;
font-size: 40px;
transition: all .3s;
}
div .right:hover {
background-color: rgba(2, 2, 2, 0.5);
}
div .w1 .right a {
color: #fff;
}
/* 上半部分结束 */
.bot_banner {
margin-top: 14px;
margin-bottom: 14px;
}
.top_banner_goods {
display: none;
width: 992px;
height: 459px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 1px 3px 2px #e0e0e0;
}
.top_banner .nav11 ul li:hover .top_banner_goods {
display: block;
position: absolute;
right: -992px;
top: 0;
z-index: 999;
}
.nav11 .top_banner_goods ul {
padding: 0;
}
.nav11 .top_banner_goods ul li {
float: left;
text-indent: 0;
margin: 0;
padding: 0;
transition: all .3s;
}
.nav11 .top_banner_goods ul li:hover {
background-color: #fff;
}
.nav11 .top_banner_goods ul li a {
display: inline-block;
width: 228px;
height: 76px;
padding: 0 0 0 20px;
line-height: 76px;
color: #333;
font-size: 14px;
transition: all .3s;
}
.top_banner_goods ul li a:hover {
color: #ff6700;
}
.top_banner_goods ul li a img {
vertical-align: middle;
}
.top_banner_goods ul li a span {
margin-left: 8px;
}
.bot_left {
float: left;
width: 234px;
background-color: rgb(95, 87, 80);
margin-right: 14px;
}
.bot_left ul li {
position: relative;
float: left;
width: 78px;
height: 85px;
background-color: rgb(110, 110, 110);
text-align: center;
}
.bot_left ul li a:hover {
color: #fff;
}
.bot_left ul li a {
display: inline-block;
padding: 20px 1px;
text-align: center;
color: rgb(176, 176, 176);
}
.bot_left ul img {
width: 24px;
height: 24px;
}
.bot_center1 {
float: left;
margin-right: 14px;
width: 316px;
height: 170px;
}
.bot_center1 img {
width: 100%;
height: 100%;
}
.bot_center2 {
float: left;
margin-right: 14px;
width: 316px;
height: 170px;
}
.bot_center2 img {
width: 100%;
height: 100%;
}
.bot_center3 {
float: left;
width: 316px;
height: 170px;
}
.bot_center3 img {
width: 100%;
height: 100%;
}
/* 下半部分结束 */
.column {
position: fixed;
z-index: 999;
right: 0;
top: 30%;
background-color: #fff;
text-align: center;
}
.column ul li {
margin-bottom: -1px;
border: 1px solid #e0e0e0;
padding: 15px 10px;
}
.column ul li a:hover {
color: rgb(255, 103, 0);
}
.column ul li a {
font-family: "Microsoft Yahei";
font-size: 14px;
color: rgb(153, 153, 153)
}
.column ul li img {
width: 30px;
height: 30px;
}
/* 侧边栏结束 */
.goods {
background-color: rgb(245, 245, 245);
/* overflow: hidden; */
}
.goods a {
color: #333;
line-height: 58px;
}
.goods_banner {
padding: 40px 0 0 0;
}
.goods .goods_header {
position: relative;
height: 64px;
font-family: "Microsoft Yahei";
font-weight: 200;
}
.goods .goods_header .goods_left {
float: left;
font-size: 22px;
}
.goods .goods_header .goods_right {
float: right;
font-size: 16px;
}
.goods .w .goods_header .goods_right a em {
line-height: 64px;
font-family: "icomoon";
}
.goods .w .goods_header .goods_right a:hover {
color: #ff6700;
}
.goods_body_left {
float: left;
width: 234px;
height: 614px;
box-shadow: 2px 2px 10px 1px rgb(196, 192, 192);
transition: all .2s;
}
.goods_body_left:hover {
transform: translate(0, -3px);
}
.goods_body_right li {
float: left;
margin-left: 14px;
margin-bottom: 14px;
width: 234px;
padding: 15px 0;
background-color: #fff;
text-align: center;
font-family: "Microsoft Yahei";
box-shadow: 2px 2px 10px 1px rgba(196, 192, 192, .4);
transition: all .2s;
}
.goods_body_right li:hover {
transform: translate(0, -3px);
}
.goods_body_right li a {
display: inline-block;
width: 234px;
}
.goods_body_right li img {
vertical-align: bottom;
width: 160px;
height: 160px;
margin: 0 auto;
}
.goods_body_right li h3 {
margin: 0 0 2px 0;
height: 21px;
width: 214px;
font-size: 14px;
font-weight: normal;
color: #000;
}
.goods_body .goods_body_right li p {
margin: 0 10px 10px 10px;
width: 214px;
height: 18px;
color: rgb(156, 161, 167);
font-size: 12px;
}
.goods_body .goods_body_right li span {
margin: 0 10px 14px 10px;
display: inline-block;
width: 214px;
height: 21px;
color: rgb(255, 103, 0);
font-size: 14px;
}
/* 商品栏结束 */总结
当然学到的知识肯定不止这些啦，但是对于我来说却是一个里程碑，是我在前端路上的一个莫大的鼓励，我会继续努力哒，最后，祝大家生活愉快，万事胜意！
版权声明：本文标题：小米商城第一页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1726414810a1069682.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论