开发”小米商城官网首页”(静态页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城 - 小米MIX 3、红米Note 7、小米8、小米电视官方网站</title> <meta name="discription" content="小米商城直营小米公司旗下所有产品,囊括小米手机系列小米MIX 3、小米8、小米Note 3,红米手机系列红米Note 7、红米6 Pro,智能硬件,配件及小米生活周边,同时提供小米客户服务及售后支持。"> <meta name="keywords" content="小米,小米8,小米Note3,红米Note7,小米MIX3,小米商城"> <meta http-equiv="x-ua-compatible" content="IE=Edge"> <link rel="icon" href="image/favicon.ico"> <style type="text/css"> * { padding: 0; margin: 0; } ul{ list-style: none; } </style> <style type="text/css"> .topBar{ 100%; background-color: #333; position: relative; font-size: 12px; } .container{ 1226px; margin: 0 auto; overflow: hidden; } .topBar_nav{ float:left; height: 40px; line-height: 40px; text-align: center; } .topBar_cart{ float:right; height: 40px; 120px; line-height: 40px; text-align: center; background-color: #424242; } .topBar_cart a{ display: block; text-decoration: none; color: #b0b0b0; height: 40px; 120px; } .topBar_info{ float:right; height: 40px; line-height: 40px; text-align: center; margin-right: 15px; } .topBar a{ text-decoration: none; color: #b0b0b0; } .topBar a:hover{ color: #fff; } .topBar_cart a:hover{ color: #ff6700; background-color: #fff; } .topBar span{ color: #424242 } </style> /*header*/ <style type="text/css"> .header{ 1226px; height: 100px; margin: 0 auto; } .header img{ position: absolute; top: 62px; bottom: 22px; 55px; height: 55px; } .null{ float: left; 245px; height: 100px; } .header_nav{ float: left; 597px; height: 100px; } .header_nav ul li{ float: left; text-align: center; line-height: 100px; margin:0 8px; } .header_nav ul li a { color: #333; text-decoration: none; } .header_nav ul li a:hover{ color: #ff6700; } .header_search{ float:right; margin-top:25px; height: 50px; 302px; } .header .text{ float: right; 250px; height: 48px; border: 1px solid #b0b0b0; padding: 0px; } #search{ float: right; 50px; height: 50px; border: 1px solid #b0b0b0; border-left: 0; cursor: pointer; background-color: white; background-image: url("image/search_b.png"); } #search:hover{ background-image: url("image/search_o.jpg") } .search_text{ float:right; margin-top:-37px; margin-right:55px; 125px; } .search_text a{ float: right; margin: 5px; text-decoration: none; background-color: #eee; font-size: 12px; color:#757575; } .search_text a:hover{ color: #fff; background-color: #ff6700; } </style> home <style type="text/css"> .home{ position: relative; 1226px; height: 460px; margin: 0 auto; } .home img{ 1226px; height: 460px; } .home_container{ position: absolute; top:0; 234px; height: 420px; padding: 20px 0 20px; background-color: rgba(0,0,0,0.6); } .content_slide{ float:right; } .home_list a{ display: block; text-decoration: none; font-size: 14px; 204px; height: 42px; color: #fff; line-height: 42px; padding-left: 30px; } .home_list ul li a:hover{ background-color: #ff6700; } .left_logn{ position: relative; top: -269px; left:-942px; 50px; height:70px; } .left_logn img{ 18px; height:30px; position: absolute; top: 20px; right: 16px; cursor: pointer; } .right_logn { position: relative; top: -339px; /*left: 0px;*/ 50px; height: 70px; } .right_logn img{ 18px; height:30px; position: absolute; top: 20px; right: 16px; cursor: pointer; } .content_slide div:hover{ background-color: rgba(0,0,0,0.4); } .content_slide span{ position: absolute; top:420px; left:1146px; } </style> home_sub <style type="text/css"> .home_sub{ position: relative; 1226px; height: 170px; margin: 14px auto 0; } .sub_list{ float:left; 234px; height: 170px; background-color: #5f5750; } .promo{ position: absolute; left:234px; 992px; height: 170px; } .promo img{ float:right; 316px; height: 170px; margin-left: 14px; } .sub_list img{ position: relative; top:5px; left:22px; 22px; height: 22px; color: rgba(255,255,255,0.7); } .sub_list div{ 234px; height: 85px; } .sub_list ul li{ float: left; 68px; height: 75px; margin: 1px 5px ; padding-top: 8px; } .sub_list ul li a{ position: relative; top:5px; left:12px; 38px; height: 40px; text-decoration: none; font-size: 12px; color: rgba(255,255,255,0.7); } .sub_list ul li a:hover{ color: white; } </style> migo <style type="text/css"> .migo{ position: relative; 1226px; height: 438px; margin: 15px auto 0; } .title{ font-size: 22px; color: #333; font-weight: 200; line-height: 58px; } .change{ position: absolute; top: 34px; left:1154px; 72px; height: 24px; } .change input{ float: right; 36px; height: 24px; font-size: 16px; background-color: #fff; border: 1px solid #e0e0e0; } .image_go{ 1226px; height: 340px; padding-bottom: 40px; margin: 0 auto; } .image_go img{ 234px; height: 339px; } .image1{ margin-left: 9px; } </style> helo <style type="text/css"> .helo{ 1226px; height: 120px; padding-bottom: 40px; margin: 0 auto; } .helo img{ 1226px; height: 120px; } </style> footer <style type="text/css"> .footer{ 1903px; height: 272px; } .footer_service{ 1226px; height: 55px; border-bottom: 1px solid #e0e0e0; margin: 0 auto; padding-top: 25px; } .footer_service ul li{ float: left; 242px; height: 30px; text-align: center; border-right: 1px solid #e0e0e0; } .footer_service ul li a { text-decoration: none; font-size: 16px; color: #616161; position: relative; top: -8px; } .footer_service ul li a:hover { color: #ff6700; } .footer_link{ 1226px; height: 112px; padding: 40px 0; margin: 0 auto; } .footer_help{ float: left; 974px; height: 112px; } .footer_tel{ float: left; 251px; height: 112px; border-left: 1px solid #e0e0e0; } .footer_help dl{ float: left; 160px; height: 112px; } .footer_help dl dt{ 160px; height: 17px; margin: -1px 0 26px 0; font-size: 14px; color: #424242; } .footer_help dl dd{ 160px; height: 18px; margin: 10px 0 0; font-size: 12px; } .footer_help a{ text-decoration: none; color: #757575; } .footer_tel .tel{ 251px; height: 22px; margin: 0 0 5px; font-size: 22px; color: #ff6700; text-align: center; } .footer_tel .time{ 251px; height: 36px; margin: 0 0 16px; font-size: 12px; color: #616161; text-align: center; } .footer_tel a{ margin: 0 auto; text-align: center; text-decoration: none; display: block; 118px; height: 28px; font-size: 12px; color: #ff6700; line-height: 28px; background-color: #fff; border: 1px solid #ff6700; } .footer_tel a:hover{ color: #fff; background-color: #f25807; border: 1px solid #f25807; } </style> site_info <style type="text/css"> .site_info{ 1903px; height: 172px; padding: 30px 0; background-color: #f5f5f5; } .bottom_info{ 1226px; height: 119px; margin: 0 auto; } .bottom_img{ float:left; 67px; height: 119px; } .bottom_img img{ 57px; height: 57px; } .bottom_text{ float: left; 1159px; height: 119px; } .bottom_nav{ 1159px; height: 19px; } .bottom_nav a{ text-decoration: none; line-height: 18px; font-size: 12px; color: #757575; } .bottom_nav a:hover{ color: #ff6700; } .bottom_nav span{ color: #b0b0b0 } .bottom_info_text{ 1159px; height: 72px; font-size: 12px; color: #b0b0b0; } .bottom_info_text a{ text-decoration: none; color: #b0b0b0; } .bottom_info_text a:hover{ color: #ff6700; } .bottom_link img{ 85px; height: 28px; cursor: pointer; } .end{ 276px; height: 19px; margin: 30px 818px 0; font-size: 18px; color: #cacaca; } </style> bar <style type="text/css"> .bar{ 84px; height: 471px; position: fixed; top:77px; right:0; } .bar a:hover { color: #ff6700; } .bar_link{ 84px; height: 360px; } .bar_link a{ display: block; 82px; height: 68px; font-size: 14px; color: #757575; border: 1px solid #f5f5f5; text-decoration: none; text-align: center; padding-top: 20px; } .bar_return{ 82px; height: 90px; } .bar_return a{ display: block; 82px; height: 68px; font-size: 14px; color: #757575; border: 1px solid #f5f5f5; text-decoration: none; text-align: center; padding-top: 20px; margin-top: 14px; } </style> <!--<link rel="stylesheet" href="css/topbar.css">--> <!--<link rel="stylesheet" href="css/header.css">--> <!--<link rel="stylesheet" href="css/home.css">--> <!--<link rel="stylesheet" href="css/home_sub.css">--> <!--<link rel="stylesheet" href="css/migo.css">--> <!--<link rel="stylesheet" href="css/helo.css">--> <!--<link rel="stylesheet" href="css/footer.css">--> <!--<link rel="stylesheet" href="css/site_info.css">--> <!--<link rel="stylesheet" href="css/bar.css">--> </head> <body> <div class="topBar"> <div class="container"> <div class="topBar_nav"> <a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</span> <a href="#">loT</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="#">下载app</a> <span>|</span> <a href="#">Select Region</a> </div> <div class="topBar_cart"> <a href="#"> <img src="image/cart.png" style="height: 20px; 20px;"> 购物车 </a> </div> <div class="topBar_info"> <a href="#">登陆</a> <span>|</span> <a href="#">注册</a> <span>|</span> <a href="#">消息通知</a> </div> </div> </div> <div class="header"> <img src="image/logo.jpg" alt="logo"> <div class="null"></div> <div class="header_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> <div class="header_search"> <form action="header_search" medthod="get"> <label for="search"></label> <input type="submit" value="" id="search"> <input type="text" name="search" class="text"> </form> <div class="search_text"> <a href="#">小米MIX 2S</a> <a href="#">小米8</a> </div> </div> </div> <div class="home"> <img src="image/mi8.jpg"> <div class="home_container"> <div class="home_list"> <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> <div class="content_slide"> <div class="left_logn"> <!--<a href="#">--> <img src="image/left_logn.png"> <!--</a>--> </div> <div class="right_logn"> <!--<a href="#">--> <img src="image/right_logn.png"> <!--</a>--> </div> <span>• • • •</span> </div> </div> <div class="home_sub"> <div class="sub_list"> <div class="first_line"> <ul> <li> <img src="image/phone.png"> <br> <a href="#">选购手机</a> </li> <li> <img src="image/present.png"> <br> <a href="#">企业团购</a> </li> <li> <img src="image/F.png"> <br> <a href="#">F码通道</a> </li> </ul> </div> <div class="second_line"> <ul> <li> <img src="image/sim.png"> <br> <a href="#"> 米粉卡</a> </li> <li> <img src="image/circle.png"> <br> <a href="#">以旧换新</a> </li> <li> <img src="image/card.png"> <br> <a href="#">话费充值</a> </li> </ul> </div> </div> <div class="promo"> <img src="image/3.jpg" > <img src="image/2.jpg" > <img src="image/1.jpg" > </div> </div> <div class="migo"> <div class="title">小米闪购</div> <div class="change"> <input type="submit" value=">"> <input type="submit" value="<"> </div> <div class="image_go"> <img src="image/go1.jpg"> <img src="image/go2.jpg" class="image1"> <img src="image/go3.jpg" class="image1"> <img src="image/go4.jpg" class="image1"> <img src="image/go5.jpg" class="image1"> </div> </div> <div class="helo"> <img src="image/helo.jpg" > </div> <div class="footer"> <div class="footer_service"> <ul> <li> <img src="image/fix.jpg"> <a href="#">预约维修服务</a> </li> <li> <img src="image/7.jpg"> <a href="#">7天无理由退货</a> </li> <li> <img src="image/15.jpg"> <a href="#">15天免费换货</a> </li> <li> <img src="image/gift.jpg"> <a href="#">满150元包邮</a> </li> <li> <img src="image/local.jpg"> <a href="#">520余家售后网点</a> </li> </ul> </div> <div class="footer_link"> <div class="footer_help"> <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="#">F码通道</a> </dd> <dd> <a href="#">礼物码</a> </dd> <dd> <a href="#">防伪查询</a> </dd> </dl> </div> <div class="footer_tel"> <p class="tel">400-100-5678</p> <p class="time"> 周一至周日 8:00-18:00 <br> (仅收市话费) </p> <a href="#"> <img src="image/msg.jpg"> 联系客服</a> </div> </div> </div> <div class="site_info"> <div class="bottom_info"> <div class="bottom_img"> <img src="image/logo.jpg" alt="logo"> </div> <div class="bottom_text"> <div class="bottom_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="#">问题反馈</a> <span>|</span> <a href="#">廉政举报</a> <span>|</span> <a href="#">诚信合规</a> <span>|</span> <a href="#">Select Region</a> </div> <div class="bottom_info_text"> <a href="#">©mi.com</a> 京ICP证110507号 <a href="#">京ICP备10046444号</a> <a rel="nofollow" href="#">京公网安备11010802020134号 </a> <a href="#">京网文[2017]1530-131号</a> <br> <a href="#" target="_blank">(京)网械平台备字(2018)第00005号</a> <a href="#">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a> <a href="#">营业执照</a> <a href="#">医疗器械公告</a> <br> <a href="#">增值电信业务许可证</a> 网络食品经营备案(京)【2018】WLSPJYBAHF-12 <a href="#">食品经营许可证</a> <br> 违法和不良信息举报电话:185-0130-1238 <a href= "#">知识产权侵权投诉</a> 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试 </div> <div class="bottom_link"> <img src="image/b1.png" > <img src="image/b2.png" > <img src="image/b3.png" > <img src="image/b4.png" > <img src="image/b5.png" > </div> </div> </div> <div class="end"> <p>探索黑科技,小米为发烧而生!</p> </div> </div> <div class="bar"> <div class="bar_link"> <a href="#"> <img src="image/tphone.png" > <br> 手机APP </a> <a href="#"> <img src="image/person.png" > <br> 个人中心 </a> <a href="#"> <img src="image/service.png" > <br> 联系客服 </a> <a href="#"> <img src="image/shoppingchart.png" > <br> 购物车 </a> </div> <div class="bar_return"> <a href="#"> <img src="image/back.png" > <br> 回顶部 </a> </div> </div> </body> </html>