文件夹目录mi-site-----------主文件夹 css------------css文件文件夹 fonts.css---矢量图标css index.css---主页面样式css reset.css---清除默认样式css fonts----------矢量图标存放文件夹 ...---------直接导入的阿里巴巴矢量图标库 ... ... images---------图片存放目录文件夹 ...---------官网图片 ... ... index.html-----启动程序
fonts.css
@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg');}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} index.html
body{ 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif; color: #333;}/*小米顶部栏start*/.topBar{ width: 100%; height: 40px; background-color: #333;}.container{ width: 1226px; height: 100%; margin: 0 auto;}.topBar .topBar-list{ float: left;}.topBar .shop{ float: right; width: 120px; margin-left: 15px; height: 40px; line-height: 40px; text-align: center; background-color: #424242;}.topBar .login{ float: right;}.topBar a{ color: #b0b0b0; font-size: 12px; display: inline-block; line-height: 40px;}.topBar .shop a{ width: 120px; height: 40px; display: inline-block;}.topBar a:hover{ color: #fff;}.topBar span{ color: #424242; margin: 0 .1em;}/*小米顶部栏end*//*小米导航栏start*/.header{ height: 100px;}.header .site-logo{ float: left; width: 62px; margin-top: 22px;}.header .site-logo a{ display: inline-block; width: 55px; height: 55px;}.header .site-list{ float: left; width: 850px;}.header .site-list>ul{ width: 820px; height: 88px; padding: 12px 0 0 30px; font-size: 16px;}.header .site-list>ul>li{ float: left;}.header .site-list>ul>li>a{ display: block; padding: 29px 10px 38px; color: #333;}.header .site-list>ul>li>a:hover{ color: #ff6700;}.header .site-list>ul .site-category>a{ display: block; width: 127px; height: 88px; padding: 0 15px 0 0;}.header .site-list>ul .site-category { position: relative; z-index: 3;}.header .site-list ul .site-category .category-list{ position: absolute; top: 88px; left: -92px; width: 234px; height: 460px; background-color: rgba(0,0,0,0.6);}.category-list>ul{ width: 234px; height: 420px; padding: 20px 0;}.category-list>ul>li{ height: 42px;}.category-list>ul>li>a{ height: 42px; padding-left: 30px; display: block; line-height: 42px; font-size: 14px; color: #fff; position: relative;}.category-list>ul>li>a:hover{ background-color: #ff6700;}.category-list>ul>li>a>span{ position: absolute; top:0; right: 20px; }.header .site-search{ float: right; width: 296px; margin-top: 25px;}.header .site-search form{ position: relative; width: 296px; height: 50px;}.header .site-search form .search-text{ /*245px*/ width: 223px; height: 48px; border: 1px solid #e0e0e0; font-size: 14px; padding: 0 10px; float: left;}.header .site-search form .search-btn{ margin-left: -1px; width: 50px; height: 50px; border: 1px solid #e0e0e0; background-color: #fff; float: left;}.header .site-search form .search-word{ position: absolute; font-size: 12px; top: 14px; right: 65px;}.header .site-search form .search-word a{ display: inline-block; margin-left: 5px; padding: 0 5px; background-color: #eee; color: #757575;}.header .site-search form .search-word a:hover{ background-color: #ff6700; color: #fff;}/*小米导航栏end*//*小米站点内容start*/.site-content .site-slider{ position: relative; z-index: 2;}.site-content .site-slider>a{ display: block; width: 1226px; height: 460px;}.site-content .site-slider>a img{ width: 1226px;}.site-content .site-slider>span{ position: absolute; width: 41px; height: 69px; top: 50%; margin-top: -35px; cursor: pointer;}.site-content .site-slider .next{ background:url(../images/icon-slider-left.jpg)no-repeat 0 0; left: 234px; opacity: 0.1;}.site-content .site-slider .next:hover{ opacity: 1;}.site-content .site-slider .prev{ background:url(../images/icon-slider-right.jpg)no-repeat 0 0; right: 0; opacity: 0.1;}.site-content .site-slider .prev:hover{ opacity: 1;}.site-content .slider-item{ position: absolute; width: 200px; height: 30px; line-height: 30px; text-align: right; bottom: 20px; right: 40px;}.slider-item>a{ display: inline-block; height: 6px; width: 6px; background-color: rgba(0,0,0,.4); margin: 0 5px; border-radius: 6px; border: 2px solid #fff; border-color: rgba(255,255,255,.3);}/*向导样式start*/.content-sub{ margin-top: 18px; overflow: hidden;}.content-sub .content-channel{ float: left; width: 234px;}.content-sub .content-channel>ul{ background-color: #5f5750; font-size: 12px;}.content-sub .content-channel>ul li{ float: left; width: 33.33%; height: 85px;}.content-sub .content-channel>ul li a{ display: block; color: rgba(255,255,255,.7); padding-top: 18px; margin-left: 10px;}.content-sub .content-channel>ul li a i{ display: block; font-size: 24px; margin-left: 10px;}.content-sub .content-list{ float: left; width: 992px;}.content-sub .content-list ul{ width: 100%;}.content-sub .content-list ul li{ float: right; widows: 33.33%; margin-left: 14px;}.content-sub .content-list ul li a{ display: block; height: 170px;}.content-sub .content-list ul li a img{ width: 316px; height: 170px;}/*向导样式end*/.content-banner{ margin-top: 20px;}.content-banner a{ display: block; width: 1226px; height: 120px;}.content-banner a img{ width: 1226px; height: 120px;}/*小米站点内容end*//*小米内容描述start*/.content-desc{ padding-top: 22px; background-color: #f5f5f5;}/*内容详情标题start*/.content-desc .box-hd{ height: 58px; position: relative;}.content-desc .box-hd h2{ font-size: 22px; font-weight: 200; line-height: 58px; color: #333;}.content-desc .box-hd .more{ position: absolute; right: 0; top: 0;}.content-desc .box-hd .more a{ font-size: 16px; line-height: 58px; color: #424242;}.content-desc .box-hd .more:hover a{ color: #ff6700;}.content-desc .box-hd .more:hover a i{ background-color: #ff6700;}.content-desc .box-hd .more a i{ width: 12px; height: 12px; padding:4px; margin-left: 8px; border-radius: 12px; background-color: #b0b0b0; color: #fff; font-size: 12px; vertical-align: 2px;}/*内容详情标题end*//*内容详情start*/.box-bd .row-l{ float: left; width: 234px;}.box-bd .row-l a{ display: block; widows: 100%; height: 100%;}.box-bd .row-l a img{ width: 234px; height: 614px;}.box-bd .row-r{ float: left; width: 992px;}.box-bd .row-r ul{ overflow: hidden;}.box-bd .row-r ul li{ float: left; height: 290px; padding-top: 20px 0; background-color: #fff; width: 234px; position: relative; margin-left: 14px; margin-bottom: 17px;}.box-bd .row-r ul li .figure{ widows: 160px; height: 160px; left: 50%; margin:0 40px 5px; padding: 20px 0;}.box-bd .row-r ul li .figure a{ display: block;}.box-bd .row-r ul li .figure a img{ widows: 160px; height: 160px;}.box-bd .row-r ul li .title{ font-size: 14px; font-weight: 400px; text-align:center; }.box-bd .row-r ul li .desc{ height: 18px; font-size: 12px; text-align: center; color: #b0b0b0; margin: 0 10px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.box-bd .row-r ul li .price{ text-align: center; color: #ff6700;}.box-bd .row-r ul li .flag{ position: absolute; top: 0; left: 0; width: 64px; height: 20px; background-color: #fff; text-align: center; color: #fff; left: 50%; margin-left: -32px;}.box-bd .row-r ul li .flag-new{ background-color: #83c44e;}.box-bd .row-r ul li .flag-miao{ background-color: red;}/*内容详情end*//*小米内容描述end*//*小米脚部样式strat*/.footer .footer-service{ padding: 27px 0; border-bottom: 1px solid #e0e0e0;}.footer .footer-service ul li{ float: left; width: 19.8%; height: 25px; font-size: 16px; line-height: 25px; text-align: center; border-left: 1px solid #e0e0e0;}.footer .footer-service ul .first{ border-left: 0;}.footer .footer-service ul li a{ color: #616161;}.footer .footer-service ul li .iconfont{ font-size: 24px; margin-right: 6px; line-height: 24px; vertical-align: middle;}.footer .footer-links{ padding: 40px 0;}.footer .footer-links dl{ float: left; width: 160px; height: 112px;}.footer .footer-links dl dt{ margin-bottom: 26px; font-size: 14px; color: #424242;}.footer .footer-links dl dd{ font-size: 12px; margin-top: 12px; color: #757575; cursor: pointer;}.footer .footer-links dl dd:hover{ color: #ff6700;}.footer .footer-links .col-contact{ float: right; width: 251px; height: 112px; border-left: 1px solid #e0e0e0; text-align: center;}.footer .footer-links .col-contact .iphone{ margin-bottom: 5px; font-size: 22px; color: #ff6700;}.footer .footer-links .col-contact p{ margin-bottom: 16px; font-size: 12px;}.footer .footer-links .col-contact a{ display: inline-block; width: 118px; height: 28px; border: 1px solid #ff6700; color: #ff6700; font-size: 12px; padding-top:10px;}.footer .footer-links .col-contact a:hover{ background-color: #ff6700; color: #fff;}/*小米脚部样式end*/.clearfix::after{ content: ''; clear: both; display: block;} reset.css
body,p,ul,ol,dl,dt,h1,h2,h3,h4,h5,h6,dl,dt,dd{ margin: 0; padding: 0;}ul,ol{ list-style: none;}input{ border: none; outline: none;}a{ text-decoration: none;}
index.html
小米商城 手机
小米9 6GB+128GB
骁龙855，索尼4800万超广角微距三摄
2999元
新品
小米MIX 3 6GB+128GB
磁动力滑盖全面屏 / 四曲面陶瓷机身
3299元
Redmi Note 7 Pro
6GB+128GB大存储，索尼4800万拍照
1599元
小米Play 4GB+64GB
八核高性能处理器，后置1200万 AI 双摄
799元
秒杀
小米8 屏幕指纹版 6GB+128GB
全球首款压感屏幕指纹 骁龙845处理器
1999元
秒杀
小米8青春版6GB+64GB
潮流镜面渐变色，2400万自拍旗舰
1499元
减200元
Redmi Note 7 6GB+64GB
4800万拍照，4000mAh大电量
1399元
Redmi K20 Pro 6GB+128GB
骁龙855旗舰处理器，索尼4800万超广角三摄
2599元
效果展示：
