2019-9-9 小米商城导航

Original 2019-09-09 16:34:13 1663
abstract:在线浏览地址:http://www.pursuer.top/xiaomi1html部分小米商城

在线浏览地址:http://www.pursuer.top/xiaomi1

html部分


小米商城


  • 小米手机

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

  • 红米

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

    新品

    小米2s

    3299元

  • 电视
  • 笔记本
  • 盒子
  • 新品
  • 路由器
  • 智能硬件
  • 服务
  • 社区



  • 选购手机


    企业团购


    F码通道


    米粉卡


    依旧换新


    话费充值


    小米闪购



    手机

    查看更多



    智能

    热门

    电视影音

    电脑

    家具




    家电

    热门

    家居

    家电




    Feir-520-1314

    周一至周日 8:00-18:00
    (仅收市话费)

    ©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号
    违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试

    探索黑科技,小米为发烧而生!



    css部分

    /*公共样式*/

    *{padding:0;margin:0;}

    a{text-decoration: none;cursor:pointer;}

    li{list-style:none;}

    .clear{clear: both;}


    /*头部样式*/

    .header{width:100%;height:40px;background-color:#333;}

    .menu{width:1226px;height:40px;margin:0 auto;}

    .menu .left{float: left;}

    .menu .right{float: right;}

    .menu .right li{float: right;margin-left: 8px;position: relative;}

    .menu .right li .text{z-index:999;width:260px;height:90px;background:#fff;font-size: 12px;color: #ccc;padding:10px;display:none;position: absolute;top:40px;right: 0;text-align: center;}

    .menu .right li:hover .text{display:block;}

    .menu .right li:hover a{color:#ff6a00;background: #fff; }

    .menu a{font-size: 12px;color: #ccc;line-height: 40px;}

    .menu a:hover{color: #fff;}

    .menu .gwc{width: 120px;height: 40px;background: #424242;display:inline-block;text-align: center;line-height: 40px;}

    .menu .gwc:hover{background: #fff;color: #ff6a00;}

    .menu .gwc i{margin-right: 8px;}

    .menu span{font-size: 12px;color: #ccc;margin:0 6px;}

    /*主体样式*/

    .main{width:1226px;margin:0 auto;}

    /*导航*/

    .mainNav{width:1226px;height:66px;margin:10px auto;}

    .mainNav_p,.mainNav_ul,.mainNav_s{float:left;}

    .mainNav_ul li{font-size:18px;margin:0 8px;line-height: 66px;float: left;}

    .mainNav_ul li a{color: #333;}

    .mainNav_ul li a:hover{color: #ff6a00;}

    .mainNav_s{height:66px;width:312px;float:right;position: relative;}

    .mainNav_s input{outline:none;padding:0 10px;height: 50px;width: 228px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;margin: 7px 0;float: left;}

    .mainNav_s div{position: absolute;width:120px;top:22px;right:60px;}

    .mainNav_s div a{font-size:12px;padding:4px;background:#ebebeb;color: #aaa;}

    .mainNav_s div a:hover{background:#ff6a00;color: #fff;}

    .mainNav_s .but{cursor:pointer;font-size:22px;line-height:52px;text-align:center;height: 50px;width: 60px;border:1px solid #ccc;margin: 7px 0;position: absolute;top: 0;right: 0;}

    .mainNav_s .but:hover{background: #ff6a00;color: #fff;}

    /*下拉框*/

    .mainNav_ul .mainNav_ul_p{width: 100%;height: 230px;background: #fff;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;position: absolute;left:0;top:116px;display: none;z-index: 999;}

    .mainNav_ul li:hover .mainNav_ul_p{display: block;}

    .mainNav_ul .mainNav_ul_p .div_p{width: 1226px;height: 230px;margin: 0 auto;}

    .mainNav_ul .mainNav_ul_p .div_p_c{width:120px;height:230px;float: left;margin: 0 40px;}

    .mainNav_ul .mainNav_ul_p .div_b{width:1px;height:90px;background: #ccc;float: left;margin-top:40px;}

    .mainNav_ul .mainNav_ul_p .div_p_c .new{width:60px;height: 18px;border:1px solid #ff6a00;line-height: 20px;text-align: center;margin:10px auto;font-size: 12px;color:#ff6a00;}

    .mainNav_ul .mainNav_ul_p .div_p_c img{margin:20px auto;display: block;}

    .mainNav_ul .mainNav_ul_p .div_p_c .sp1{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#333;}

    .mainNav_ul .mainNav_ul_p .div_p_c .sp2{height:30px;line-height:30px;display:block;font-size: 14px;text-align:center;color:#ff6a00;}

    .mainNav_ul .mainNav_ul_p .div_p_b{border-left: 1px solid #333;width: 2px;height:160px;float: left;}

    /*轮播图*/

    .mainRpm{margin:10px auto;}

    /*侧导航*/

    .mainRpm_l{width:246px;height:460px;background:#424242;float: left;}

    .mainRpm_l .mainRpm_l_nav{width: 246px;height:420px;margin:30px 0;position: relative;}

    .mainRpm_l .mainRpm_l_nav li{width: 231px;height: 40px;line-height: 40px;padding-left: 15px;font-size: 16px;}

    .mainRpm_l .mainRpm_l_nav li:hover{background: #ff6a00;}

    .mainRpm_l .mainRpm_l_nav li a{color: #fff;}

    .mainRpm_l .mainRpm_l_nav li a:hover{color: #ccc;}

    .mainRpm_l .mainRpm_l_nav li i{color: #fff;font-weight: bold;margin-right:15px;margin-top:12px;float: right;}

    /*下拉导航*/

    .mainRpm_l .mainRpm_l_nav li .mainRpm_l_menu{width:780px;height: 420px;background: #fff;padding:20px 10px;position: absolute;top:-30px;left:246px;display: none;z-index: 999;}

    .mainRpm_l .mainRpm_l_nav li:hover .mainRpm_l_menu{display: block;}

    .mainRpm_l .mainRpm_l_nav li .mainRpm_l_menu div{width: 230px;height:70px;float: left;padding:0 15px;}

    .mainRpm_l .mainRpm_l_nav li .mainRpm_l_menu div img{width: 40px;height: 40px;text-align: center;margin-top:15px;margin-right: 8px;float: left;}

    .mainRpm_l .mainRpm_l_nav li .mainRpm_l_menu div a{font-size: 14px;color: #424242;float:left;line-height: 70px;}

    .mainRpm_l .mainRpm_l_nav li .mainRpm_l_menu div:hover a{color: #ff6a00;}

    .mainRpm_r{width:980px;height:460px;background:#bbb;float: left;}

    /*商品广告*/

    .mainShop{margin:10px auto;}

    .mainShop_l{width:236px;height:170px;background:#5f5750;float: left;}

    .mainShop_l span{float:left;width:33.3%;height:65px;text-align: center;padding-top:20px;color: #ccc;font-size: 14px;}

    .mainShop_l span:hover{color: #fff;}

    .mainShop_r{width:317px;height:170px;float: left;margin-left:13px;}

    /*小米闪购*/

    .mainPurchase{margin:20px auto;}

    .mainPurchase_tit{padding:20px 0;}

    .mainPurchase_shop{width: 234px;height:329px;float: left;background-color: #ccc;}

    /*广告位*/

    .mainImg{width:1226px;height:119px;background:#ccc;margin:30px auto;}

    /*专区*/

    .mainPhone{margin:10px auto;}

    .mainPhone_tit{height: 60px;margin: 10px 0;line-height:60px;}

    .mainPhone_tit .tit{height:40px;line-height:40px;float: left;}

    .mainPhone_tit .more{height:40px;line-height:40px;float: right;font-size: 14px;}

    .mainPhone_tit .more:hover{color:#ff6a00;cursor: pointer;}

    .mainPhone_tit .more:hover i{background:#ff6a00;cursor: pointer;}

    .mainPhone_tit .more i{width: 20px;height: 20px;line-height: 20px;color:#fff;background-color: #ccc; border-radius: 50%;text-align: center;font-size: 16px;margin-left: 6px;}

    .mainPhone_tit .short{height:40px;line-height:40px;float: right;margin-left:15px;font-size: 14px;}

    .mainPhone_tit .short:hover{color:#ff6700;border-bottom: 2px solid #ff6700;cursor: pointer;}

    .mainPhone_l{width:234px;height:614px;float:left;}

    .mainPhone_l .ad{width:234px;height:300px;}

    .mainPhone_r{width:992px;height:614px;float:right;}

    .mainPhone_r .p{width:234px;height:300px;background:#ccc;float:left;margin-left: 14px;}

    .mainPhone_r .p1{width:234px;height:300px;float:left;margin-left: 14px;}

    .mainPhone_r .p1 .ad{width:234px;height:145px;background:#ccc;}


    .mainRecommend{width:1226px;height:310px;background:#ccc;margin:20px auto;}

    .mainHost{width:1226px;height:490px;background:#ccc;margin:20px auto;}

    .mainContainer{width:1226px;height:490px;background:#ccc;margin:20px auto;}

    .mainVideo{width:1226px;height:360px;background:#ccc;margin:20px auto 40px;}


    /*底部样式*/

    .foot{width:1226px;margin:0 auto;}

    .foot_top{height:80px;margin:0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}

    .foot_top a{color:#616161;font-size: 16px;line-height: 80px;}

    .foot_top i{font-size:20px;line-height: 80px;margin-right:10px;}

    .foot_top a:hover{color:#ff6700;}

    .foot_top span{color:#616161;margin:0 50px;}

    .foot_middle{height:114px;margin:40px 0;}

    .foot_middle .nav{height: 114px;width: 160px;float: left;}

    .foot_middle .nav .tit{font-size: 14px;margin-bottom: 26px;color: #424242;}

    .foot_middle .nav .list{font-size: 12px;margin:10px 0;color:#555;display: block;}

    .foot_middle .nav .list:hover{color:#ff6700;}

    .foot_middle .nav_r{height:114px;width:265px;float: left;border-left: 1px solid #e0e0e0;}

    .foot_middle .nav_r span{text-align: center;color: #ff6700;display: block;}

    .foot_middle .nav_r #tel{width: 118px;height: 28px;border:1px solid #ff6700;margin:20px auto 0;color:#ff6700;text-align: center;line-height:30px;font-size:14px;}

    .foot_middle .nav_r #tel:hover{background: #ff6700;color:#fff;}

    .foot_middle .nav_r #tel i{margin-right: 10px;}

    .foot_bottom{height:84px;}

    .foot_bottom .foot_bottom_l{width:56px;height: 57px;float: left;margin-right: 16px;}

    .foot_bottom .foot_bottom_m{width:640px;height: 57px;float: left;}

    .foot_bottom .foot_bottom_m .up{width: 640px;height: 19px;margin-bottom:6px;color: #555;font-size: 12px;}

    .foot_bottom .foot_bottom_m .up a{color: #555;}

    .foot_bottom .foot_bottom_m .up a:hover{color: #ff6700;}

    .foot_bottom .foot_bottom_m .up span{margin:0 0 0 2px;}

    .foot_bottom .foot_bottom_m .down{width: 640px;height: 31px;font-size: 10px;}

    .foot_bottom .foot_bottom_m .down span a{color: #757575;}

    .foot_bottom .foot_bottom_m .down span a:hover{color: #ff6700;}

    .foot_bottom .foot_bottom_m .down span{color:#555;}

    .foot_bottom .foot_bottom_r{width:455px;height:57px;float:right;}

    .foot_bottom .foot_bottom_r img{width: 83px;height: 28px;float:left;margin-left:8px;}

    .slogan{font-size: 24px;font-family: '楷体';text-align: center;color: #ccc;padding-bottom:20px;}ent



    Correcting teacher:天蓬老师Correction time:2019-09-11 14:39:40
    Teacher's summary:你的css看上去好累, 为什么不一个属性写一行呢?

    Release Notes

    Popular Entries