效果图
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 右侧固定定位导航栏 -->
<div class="right-nav">
<a href="#" class="rn-1"></a>
<a href="#" class="rn-2"></a>
<a href="#" class="rn-3"></a>
<a href="#top" class="rn-4"></a>
</div>
<!-- top-header -->
<div class="top" id="top">
<div class="w">
<!-- 左侧导航 -->
<div class="top-nav-1">
<ul>
<li>
<a href="#" >小米商城</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">MIUI</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">IoT</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">云服务</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">金融</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">有品</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">政企服务</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">Select Region</a>
<span class="sep">|</span>
</li>
</ul>
</div>
<!-- 购物车 -->
<a href="#" class="gouwu">
<div class="gou"></div>
<div class="gou-in">
<img src="images/top-icon3.png" >
</div>
</a>
<!-- 右侧导航 -->
<div class="top-nav-2">
<a href="#">登录</a>
<span class="sep">|</span>
<a href="#">注册</a>
<span class="sep">|</span>
<a href="#" class="massage">消息通知</a>
</div>
</div>
</div>
<!-- header -->
<div class="header w">
<!-- logo -->
<div class="logo">
</div>
<!-- nav -->
<div class="nav">
<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>
<!-- search -->
<div class="search">
<input type="text" >
<button></button>
<div class="sea-1">
<span class="sea-11">小米8</span>
<span class="sea-12">小米MIX 2S</span>
</div>
</div>
</div>
<!-- banner -->
<div class="banner w">
<img src="images/banner1.jpg" alt="">
<!-- subnav -->
<div class="subnav">
<ul>
<li><a href="#">手机 电话卡<span class="icon1">></span></a></li>
<li><a href="#">电视 盒子<span class="icon1">></span></a></li>
<li><a href="#">笔记本 平板<span class="icon1">></span></a></li>
<li><a href="#">家电 插线板<span class="icon1">></span></a></li>
<li><a href="#">出行 穿戴<span class="icon1">></span></a></li>
<li><a href="#">智能 路由器<span class="icon1">></span></a></li>
<li><a href="#">电源 配件<span class="icon1">></span></a></li>
<li><a href="#">个护 儿童<span class="icon1">></span></a></li>
<li><a href="#">耳机 音箱<span class="icon1">></span></a></li>
<li><a href="#">生活 箱包<span class="icon1">></span></a></li>
</ul>
</div>
<!-- 轮播图 -->
<div class="ban-l"><</div>
<div class="ban-r">></div>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- goods -->
<div class="goods w">
<ul>
<li><a href="#"><img src="images/goods1.png" ></a></li>
<li><a href="#"><img src="images/goods2.png" ></a></li>
<li><a href="#"><img src="images/goods3.png" ></a></li>
<li><a href="#"><img src="images/goods4.png" ></a></li>
</ul>
</div>
<!-- shangou -->
<div class="shangou w">
<!-- 上部分 -->
<div class="sg-hd">
<h4>小米闪购</h4>
<img src="images/sg-hd.png" >
</div>
<!-- 下部分 -->
<div class="sg-bd clearfix">
<ul>
<li><img src="images/shangou1.png" class="special"></li>
<li>
<a href="#" >
<img src="images/shangou2.png" >
<h4>最生活毛巾-青春系列 白色</h4>
<p>3秒吸水,杀菌无刺激</p>
<span><em>1 元</em> <del>19.9元</del></span>
</a>
</li>
<li>
<a href="#">
<img src="images/shangou3.png" >
<h4>90分旅行箱 1A 20英寸 星空灰</h4>
<p>可随身携带</p>
<span><em>149 元</em> <del>299元</del></span>
</a>
</li>
<li>
<a href="#">
<img src="images/shangou4.png" >
<h4>90分旅行箱 1A 20英寸 星空灰</h4>
<p>长途旅行航空托运箱</p>
<span><em>224 元</em> <del>449元</del></span>
</a>
</li>
<li>
<a href="#">
<img src="images/shangou5.png" >
<h4>小米插线板 (含3口USB)</h4>
<p>3个USB充电口,支持快充</p>
<span><em>44 元</em> <del>49元</del></span>
</a>
</li>
</ul>
</div>
</div>
<!-- ads -->
<div class="ads w">
<a href="#"><img src="images/ads1.png" ></a>
</div>
<!-- page-main -->
<div class="page-main ">
<!-- phone -->
<div class="phone w">
<!-- 上部分 -->
<div class="pho-hd">
<h4>手机</h4>
<a href="#">查看全部></a>
</div>
<!-- 下部分 -->
<div class="pho-bd">
<div class="pho-bd-le">
<a href="#"><img src="images/pho-bd1.png" ></a>
</div>
<div class="pho-bd-ri">
<ul>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li><li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="images/pho-bd2.png" >
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- ads -->
<div class="ads w">
<a href="#"><img src="images/ads2.png" ></a>
</div>
<!-- jiadain -->
<div class="jiadian w clearfix">
<!-- 上部分 -->
<div class="jia-hd ">
<h4>家电</h4>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">电视影音</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家居</a></li>
</ul>
</div>
<div class="jia-bd clearfix">
<ul>
<li><a href="#"><img src="images/jia-bd1.png" ></a></li>
<li><a href="#"><img src="images/jia-bd2.png" ></a></li>
<li><a href="#"><img src="images/jia-bd3.png" ></a></li>
<li><a href="#"><img src="images/jia-bd4.png" ></a></li>
<li><a href="#"><img src="images/jia-bd5.png" ></a></li>
<li><a href="#"><img src="images/jia-bd6.png" ></a></li>
<li><a href="#"><img src="images/jia-bd2.png" ></a></li>
<li><a href="#"><img src="images/jia-bd3.png" ></a></li>
<li><a href="#"><img src="images/jia-bd4.png" ></a></li>
<li><a href="#"><img src="images/jia-bd5.png" ></a></li>
</ul>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<!-- weixiu -->
<div class="weixiu w">
<ul>
<li><a href="#">预约维修服务</a><span class="seu">|</span></li>
<li><a href="#">7天无理由退货</a><span class="seu">|</span></li>
<li><a href="#">15天免费换货</a><span class="seu">|</span></li>
<li><a href="#">满150包邮</a><span class="seu">|</span></li>
<li><a href="#">520余家售后网点</a></li>
</ul>
</div>
<!-- fuwu -->
<div class="fuwu w">
<div class="fu-le">
<dl>
<dt><a href="#">帮助中心</a></dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt><a href="#">服务支持</a></dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">自助服务</a></dd>
<dd><a href="#">相关下载</a></dd>
</dl>
<dl>
<dt><a href="#">线下门店</a></dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服务网点</a></dd>
<dd><a href="#">授权体验店</a></dd>
</dl>
<dl>
<dt><a href="#">关于小米</a></dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">加入小米</a></dd>
<dd><a href="#">投资者关系</a></dd>
</dl>
<dl>
<dt><a href="#">关注我们</a></dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官方微信</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
<dl>
<dt><a href="#">特色服务</a></dt>
<dd><a href="#">F码通道</a></dd>
<dd><a href="#">礼物码</a></dd>
<dd><a href="#">防伪查询</a></dd>
</dl>
</div>
<div class="fu-ri">
<h4>400-100-5678</h4>
<p>周一至周日 8:00-18:00 </p>
<p>(仅收市话费)</p>
<a href="#">联系客服</a>
</div>
</div>
<!-- copyright -->
<div class="copyright w">
<div class="logo"></div>
<div class="co-nav">
<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 Region</a><br>
<p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 <br>
违法和不良信息举报电话: 185-0130-1238, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
</div>
<div class="co-img">
<img src="images/co-img.png" >
</div>
</div>
<!-- end -->
<div class="xiaomi w">
<h4>探索黑科技,小米为发烧而生! </h4>
</div>
</div>
</body>
</html>
css部分
* {
margin: 0;
padding: 0;
outline: none;
list-style:none;
text-decoration: none;
border: none;
}
body {
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.w {
width: 1226px;
margin: 0 auto;
}
/*------------------------右侧导航栏*/
.right-nav {
position: fixed;
z-index: 999;
right: 50%;
margin-right: -640px;
bottom: 30px;
width: 27px;
height: 176px;
}
.right-nav a {
float:left;
width: 25px;
height: 39px;
border: 1px solid #F5F5F5;
border-collapse: collapse;
}
.rn-1 {
background: url(images/right-nav1.png) no-repeat 0 0;
}
.rn-2 {
background: url(images/right-nav2.png) no-repeat 0 0;
}
.rn-3 {
background: url(images/right-nav3.png) no-repeat 0 0;
}
.rn-4 {
margin-top: 14px;
background: url(images/right-nav4.png) no-repeat 0 0;
}
/*--------------------------------------------*/
/*-------------------------top-header*/
.top {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333333;
}
.top a {
font-size: 12px;
color: #B0B0B0;
}
.top a:hover {
color: #fff;
}
.top-nav-1 li {
float: left;
}
.top-nav-1 li a {
float: left;
padding: 0 7px;
}
.top-nav-1 li:first-child a {
padding-left: 0;
}
.sep {
float: left;
color: #393E3E;
}
.top-nav-2 {
float: right;
}
.top-nav-2 a {
float: left;
margin: 0 7px;
}
.massage {
padding: 0 26px 0 10px;
}
.gouwu {
position: relative;
}
.gou {
float: right;
width: 120px;
height: 40px;
background: url(images/top-icon.png) no-repeat 0 0;
}
.gou-in {
position: absolute;
top: 40px;
left: 910px;
z-index: 2;
display: none;
width: 316px;
height: 83px;
box-shadow: 2px 2px 2px rgba(0,0,0,.2)
}
.gouwu:hover .gou {
background: url(images/top-icon2.png) no-repeat 0 0;
}
.gouwu:hover .gou-in {
display: block;
}
/*-------------------------------*/
/*----------------------header*/
.header {
height: 55px;
line-height: 55px;
padding: 22px 0;
}
.logo {
float: left;
width: 55px;
height: 55px;
background: url(images/logo.png) no-repeat 0 0 ;
}
.nav {
padding-left: 190px;
}
.nav li {
float: left;
padding: 0 10px;
}
.nav li a {
font-size: 16px;
color: #333333;
}
.nav li a:hover {
color: #ff6700;
}
.search {
float: right;
position: relative;
}
.search input {
float: left;
width: 243px;
height: 48px;
border: 1px solid #E0E0E0;
padding-left: 10px;
color: #E0E0E0;
}
.search button {
float: left;
width: 51px;
height: 50px;
background: url(images/search.png) no-repeat 0 0;
}
.sea-1 span {
position: absolute;
top: 15px;
height: 18px;
line-height: 18px;
font-size: 12px;
background-color: #EEEEEE;
}
.sea-11 {
right: 141px;
}
.sea-12 {
right: 62px;
}
/*---------------------------------*/
/*--------------------------banner*/
.banner {
position: relative;
height: 460px;
}
.banner img {
height: 460px;
width: 1226px;
}
.subnav {
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 420px;
width: 234px;
padding: 20px 0;
background-color: rgba(0,0,0,.6);
}
.subnav li a {
display: block;
height: 42px;
line-height: 42px;
padding: 0 24px 0 30px;
font-size: 14px;
color: #fff;
}
.subnav li a:hover {
background-color: #ff6700;
}
.icon1 {
float: right;
}
.ban-l,
.ban-r {
position: absolute;
top: 230px;
margin-top: -35px;
width: 41px;
height: 69px;
line-height: 69px;
text-align: center;
font-size: 32px;
color: #fff;
background: rgba(0,0,0,.3);
}
.ban-l {
left: 234px;
border-radius: 0 5px 5px 0;
}
.ban-r {
right: 0;
border-radius: 5px 0 0 5px;
}
.banner ol {
position: absolute;
right: 30px;
bottom: 25px;
width: 100px;
height: 10px;
}
.banner ol li {
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
border: 2px solid #ccc;
background-color: rgba(76,80,97,.5);
margin: 0 5px;
}
.banner ol li:hover {
background-color: #fff;
}
/*----------------------------------*/
/*---------------------------------goods*/
.goods {
height: 170px;
padding: 14px 0 44px 0;
}
.goods li {
float: left;
width: 316px;
height: 170px;
margin-left: 14px;
}
.goods li:first-child {
width: 234px;
margin-left: 0;
}
/*----------------------------------------------*/
/*--------------------------shangou*/
.shangou {
height: 380px;
}
.sg-hd {
height: 40px;
list-style: 40px;
}
.sg-hd h4 {
float: left;
font-size: 22px;
font-weight: 200;
}
.sg-hd img {
float: right;
}
.sg-bd li {
float: left;
height: 339px;
width: 234px;
border-top: 1px solid;
margin-right: 14px;
text-align: center;
}
.sg-bd li:first-child {
border-color: #E53935;
}
.sg-bd li:nth-child(2) {
border-color: #FFAC13;
}
.sg-bd li:nth-child(3) {
border-color: #83C44E;
}
.sg-bd li:nth-child(4) {
border-color: #2196F3;
}
.sg-bd li:last-child {
border-color: #E53935;
margin-right: 0;
}
.sg-bd li img {
display: inline-block;
padding-top: 20px;
}
.special {
padding-top: 0!important;
}
.sg-bd li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.sg-bd li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li em {
font-style: normal;
color: #FA6553;
}
.sg-bd li del {
text-decoration: line-through;
}
/*----------------------------------------*/
/*----------------------------------ads*/
.ads a {
display: block;
height: 120px;
margin: 42px auto;
}
/*-------------------------------------*/
/*page-main*/
.page-main {
width: 100%;
background-color: #F5F5F5;
}
/*---------------------------------phone*/
.phone {
height: 674px;
}
.pho-hd {
height: 22px;
padding:19px 0;
line-height: 22px;
}
.pho-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.pho-hd a {
float: right;
font-size: 14px;
color: #333;
}
.pho-hd a:hover {
color: #ff6700;
}
.pho-bd-le {
float: left;
width: 234px;
height: 614px;
}
.pho-bd-ri {
float: right;
width: 992px;
height: 614px;
}
.pho-bd-ri li {
position: relative;
float: left;
width: 234px;
height: 300px;
text-align: center;
margin: 0 0 14px 14px;
background-color: #fff;
}
.pho-bd-ri li:hover {
top: -2px;
left: 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}
.pho-bd-ri li img {
padding-top: 20px;
}
.pho-bd-ri li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.pho-bd-ri li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li em {
font-style: normal;
color: #FA6553;
}
.pho-bd-ri li del {
text-decoration: line-through;
}
.jian50 {
position: absolute;
top: 0;
left: 117px;
margin-left: -32px;
width: 64px;
height: 20px;
line-height: 20px;
background: red;
font-size: 12px;
color: #fff;
}
/*-------------------------------------*/
/*---------------------------------jiadian*/
.jia-hd {
width: 1226px;
height: 22px;
padding:19px 0;
line-height: 22px;
}
.jia-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.jia-hd ul {
float: right;
}
.jia-hd li {
float: left;
padding: 0 16px;
height: 22px;
line-height: 22px;
}
.jia-hd li a {
font-size: 16px;
color: #424242;
}.jia-bd {
width: 1240px;
}
.jia-bd li {
float: left;
height: 300px;
width: 234px;
margin: 0 14px 14px 0;
}
/*----------------------------------------------*/
/*footer*/
.footer {
width: 100%;
background-color: #fff;
}
/*--------------------------------weixiu*/
.weixiu {
height: 79px;
border-bottom: 1px solid #E0E0E0;
}
.weixiu li {
float: left;
height: 79px;
line-height: 79px;
font-size: 16px;
}
.weixiu a {
float: left;
padding: 0 70px;
color: #616161;
}
.seu {
float: left;
color: #E0E0E0;
}
.weixiu a:hover {
color: #ff6700;
}
/*------------------------------------------*/
/*----------------------------------------fuwu*/
.fuwu {
height: 192px;
}
.fu-le {
float: left;
height: 192px;
width: 974px;
}
.fu-le dl {
float: left;
font-size: 12px;
}
.fu-le dt {
padding: 42px 104px 32px 0;
}
.fu-le dt a {
color: #424242;
}
.fu-le dd {
padding-bottom: 16px;
}
.fu-le dd a {
color: #757575;
}
.fu-le a:hover {
color: #ff6700;
}
.fu-ri {
text-align: center;
}
.fu-ri h4 {
padding: 42px 0 14px 0;
font-size: 18px;
color: #ff6700;
font-weight: 400;
}
.fu-ri p {
margin-bottom: 6px;
font-size: 12px;
color: #757575;
}
.fu-ri a {
display: inline-block;
margin-top: 20px;
height: 28px;
line-height: 28px;
width: 118px;
font-size: 14px;
color: #ff6700;
border: 1px solid #ff6700;
}
.fu-ri a:hover {
background-color: #ff6700;
color: #fff;
}
/*------------------------------------------------*/
/*------------------------------------------------copyright*/
.copyright {
height: 55px;
padding: 40px 10px 0 0;
}
.logo {
float: left;
width: 55px;
height: 55px;
background: url(images/logo.png) no-repeat 0 0 ;
}
.co-nav {
float: left;
padding-left: 10px;
width: 688px;
height: 55px;
}
.co-nav a,
.co-nav span,
.co-nav p {
font-size: 12px;
}
.co-nav a,
.co-nav span {
color: #757575;
}
.co-nav p {
color: #B0B0B0;
}
.co-img {
float: right;
height: 55px;
width: 438px;
}
/*-----------------------------------------------*/
.xiaomi {
text-align: center;
height: 80px;
line-height: 80px;
}
.xiaomi h4 {
font-size: 18px;
font-weight: 400;
font-family: "楷体" ;
color: #BEBEBE;
}
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
