HTML+CSS 小米页面

效果图

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="data: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="data: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="data:images/goods1.png" ></a></li><li><a href="#"><img src="data:images/goods2.png" ></a></li><li><a href="#"><img src="data:images/goods3.png" ></a></li><li><a href="#"><img src="data:images/goods4.png" ></a></li></ul></div><!-- shangou --><div class="shangou w"><!-- 上部分 --><div class="sg-hd"><h4>小米闪购</h4><img src="data:images/sg-hd.png" ></div><!-- 下部分 --><div class="sg-bd clearfix"><ul><li><img src="data:images/shangou1.png" class="special"></li><li><a href="#" ><img src="data:images/shangou2.png" ><h4>最生活毛巾-青春系列 白色</h4><p>3秒吸水,杀菌无刺激</p><span><em>1 元</em> <del>19.9元</del></span></a></li><li><a href="#"><img src="data: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="data: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="data: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="data: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="data:images/pho-bd1.png" ></a></div><div class="pho-bd-ri"><ul><li><a href="#" ><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/jia-bd1.png" ></a></li><li><a href="#"><img src="data:images/jia-bd2.png" ></a></li><li><a href="#"><img src="data:images/jia-bd3.png" ></a></li><li><a href="#"><img src="data:images/jia-bd4.png" ></a></li><li><a href="#"><img src="data:images/jia-bd5.png" ></a></li><li><a href="#"><img src="data:images/jia-bd6.png" ></a></li><li><a href="#"><img src="data:images/jia-bd2.png" ></a></li><li><a href="#"><img src="data:images/jia-bd3.png" ></a></li><li><a href="#"><img src="data:images/jia-bd4.png" ></a></li><li><a href="#"><img src="data: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="data: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;
}

HTML+CSS 小米页面相关推荐

html+css静态页面还原拼多多网页
html+css静态页面还原代码 <!DOCTYPE html> <html lang="zh"> <head> &l ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
HTML+CSS实现页面
使用HTML和CSS实现以下页面: 抽屉首页个人博客首页小米官网首页登录注册页面一.抽屉首页 1.实现目标:https://dig.chouti.com/ 2.代码: HTML: 1 < ...
使用CSS对页面加载的淡入效果
本文翻译自:Using CSS for fade-in effect on page load Can CSS Transitions be used to allow a text paragrap ...
CSS设置页面背景色
CSS设置页面背景色设置页面的背景色 CSS通过设置body标记的background-color属性来实现,背景色主要突出页面的主题,跟前景的文字颜色相配合. 具体的设定方法和文字颜色值的设定一样 ...
css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
JS以及CSS对页面的阻塞
一.JS阻塞所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的操作.在现代的浏览器中CSS资源和图片i ...
[css] 在页面上隐藏元素的方法有哪些？
[css] 在页面上隐藏元素的方法有哪些? position配合z-index; 或者 left/top/bottom/right : -100%:margin-left: -100%;width: ...
[css] 在页面中的应该使用奇数还是偶数的字体？为什么呢？
[css] 在页面中的应该使用奇数还是偶数的字体?为什么呢? 常用偶数号字体,但奇数号字体也没关系,例如知乎正文使用15px字体,豆瓣电影使用13px字体UI设计师导出的设计稿一般都是偶数号字体偶数 ...

HTML+CSS 小米页面

HTML+CSS 小米页面相关推荐

最新文章

热门文章