作業需求:
基礎需求：85%
1.熟練運用所學知識還原小米商城官網首頁靜態頁面
2. html頁面代碼書寫規范
3. 程序有相應的目錄划分（比如：存放css的文件，存放js的文件）
4. html頁面沒有不能出現大量的css樣式代碼
5. 頁面的展示效果和小米的首頁一樣
注意：只需要實現靜態頁面效果就可以
編碼規范需求：15%
1. 代碼有相應的注釋
2. 程序有文檔說明文件（README.md參考：https://github.com/csrftoken/vueDrfDemo）
3. 程序的說明文檔必須包含的內容：程序的實現的功能、程序的啟動方式、程序的運行效果
程序目錄划分：
css:樣式
fonts:存放字體，阿里巴巴矢量圖標庫
images:照片
js:js
xiaomi.html：網站
實現效果：
總結：
html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/fonts.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 頂部欄 --> <div class="topBar"> <div class="container"> <div class="topBar_list"> <a href="#">小米商城</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 Location</a> </div> <div class="shop"> <!-- <span>圖標</span> --> <a href="#"> <i class="iconfont" style=" font-size: 16px;"></i> 購物車(0) </a> </div> <div class="login"> <a href="#">登錄</a> <span>|</span> <a href="#">注冊</a> <span>|</span> <a href="#">消息通知</a> </div> </div> </div> <!-- 導航欄 --> <div class="header"> <div class="container"> <div class="site-logo"> <a href="#"> <img src="images/logo.png"> </a> </div> <div class="site-list"> <ul> <li class="site-category"> <a href="#">全部商品分類</a> <div class="category"> <ul> <li> <a href="#">手機 電話卡 <span class="iconfont"></span> </a> </li> <li> <a href="#">電視 盒子 <span class="iconfont"></span> </a> </li> <li> <a href="#">筆記本 顯示器 平板 <span class="iconfont"></span> </a> </li> <li> <a href="#">家電 插線板<span class="iconfont"></span> </a> </li> <li> <a href="#">出行 穿戴<span class="iconfont"></span> </a> </li> <li> <a href="#">智能 路由器<span class="iconfont"></span> </a> </li> <li> <a href="#">電源 配件<span class="iconfont"></span> </a> </li> <li> <a href="#">健康 兒童<span class="iconfont"></span> </a> </li> <li> <a href="#">耳機 音響<span class="iconfont"></span> </a> </li> <li> <a href="#">生活 箱包<span class="iconfont"></span> </a> </li> </ul> </div> </li> <li><a href="#">小米手機</a></li> <li><a href="#">Redmi紅米</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="site-search"> <form action=""> <input type="text" name="shop" class="search-text"> <input type="submit" class="search-but iconfont" value=""> <div class="search-word"> <a href="#">小米9 Pro 5G</a> <a href="#">Redmi Note 8</a> </div> </form> </div> </div> </div> <!-- 主頁內容 --> <div class="site-content"> <div class="container"> <!-- 輪播圖 --> <div class="site-slider"> <a href="#"> <img src="images/bo.jpg"> </a> <span class="next"></span> <span class="prev"></span> <div class="silder-item"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> <!-- 向導圖 --> <div class="content-sub"> <!-- 向導左 --> <div class="content-channel"> <ul class="channel-list clearfix"> <li> <a href="#"> <i class="iconfont"></i> <p>小米秒殺</p> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <p>企業團購</p> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <p>F碼通道</p> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <p>米粉卡</p> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <p>以舊換新</p> </a> </li> <li> <a href="#"> <i class="iconfont"></i> <p>話費充值</p> </a> </li> </ul> </div> <!-- 3個模塊 向導右 --> <div class="content-list"> <ul class="ul-list clearfix"> <li><a href="#"><img src="images/list1.jpg"></a></li> <li><a href="#"><img src="images/list2.jpg"></a></li> <li><a href="#"><img src="images/list3.jpg"></a></li> </ul> </div> </div> </div> <div class="banner"> <div class="container"> <a href="#"> <img src="images/banner.jpg"> </a> </div> </div> </div> <!-- 內容詳情 --> <div class="content-desc"> <div class="container"> <!-- 標題 --> <div class="box-hd"> <h2>手機</h2> <div class="more"> <a href="#">查看全部 <i class="iconfont"></i> </a> </div> </div> <!-- 內容 --> <div class="box-bd"> <div class="row clearfix"> <!-- 內容左邊 --> <div class="row-l"> <a href="#"> <img src="images/shouji.jpg"> </a> </div> <!-- 內容右邊 --> <div class="row-r"> <ul> <li> <!-- 圖像1 --> <div class="figure"> <a href=""> <img src="images/1.webp"> </a> </div> <h3 class="title"> <a href=""> 小米CC9 Pro </a> </h3> <p class="desc">1億像素 五攝四閃</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像2 --> <div class="figure"> <a href=""> <img src="images/2.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">5G雙卡全網通，驍龍855Plus</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像3 --> <div class="figure"> <a href=""> <img src="images/3.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像4 --> <div class="figure"> <a href=""> <img src="images/4.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像5 --> <div class="figure"> <a href=""> <img src="images/5.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像6 --> <div class="figure"> <a href=""> <img src="images/6.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像7 --> <div class="figure"> <a href=""> <img src="images/7.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> <li> <!-- 圖像8 --> <div class="figure"> <a href=""> <img src="images/8.webp"> </a> </div> <h3 class="title"> <a href=""> xiaomi </a> </h3> <p class="desc">892</p> <p class="price"> <span class="num">2999</span>元 </p> <div class="flag flag-new">新品 </div> </li> </ul> </div> </div> </div> </div> </div> <!-- 腳部 --> <div class="footer"> <div class="container"> <div class="footer-service"> <ul class="clearfix"> <li class="first"> <a href="#"> <i class="iconfont"></i> 預約維修服務 </a> </li> <li> <a href="#"> <i class="iconfont"></i> 7天無理由退款 </a> </li> <li> <a href="#"> <i class="iconfont"></i> 15天免費退貨 </a> </li> <li> <a href="#"> <i class="iconfont"></i> 滿150元包郵 </a> </li> <li> <a href="#"> <i class="iconfont"></i> 520余家售后網站 </a> </li> </ul> </div> <div class="footer-links clearfix"> <dl class="col-links"> <dt>幫助中心</dt> <dd>賬戶管理</dd> <dd>購物指南</dd> <dd>訂單操作</dd> </dl > <dl class="col-links"> <dt>服務支持</dt> <dd>售后政策</dd> <dd>自助服務</dd> <dd>相關下載</dd> </dl> <dl class="col-links"> <dt>線下門店</dt> <dd>小米之家</dd> <dd>服務網點</dd> <dd>授權體驗店</dd> </dl> <dl class="col-links"> <dt>關於小米</dt> <dd>了解小米</dd> <dd>加入小米</dd> <dd>投資者關系</dd> </dl> <dl class="col-links"> <dt>關於我們</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>聯系我們</dd> </dl> <dl class="col-links"> <dt>特色服務</dt> <dd>F碼通道</dd> <dd>禮物碼</dd> <dd>防偽查詢</dd> </dl> <div class="col-contact"> <p class="iphone">400-100-5678</p> <p>周一至周日 8:00-18:00 <br> （僅收市話費） </p> <a href=""> <i class="iconfont"></i> 聯系客服 </a> </div> </div> </div> </div> </body> </html>
css代碼:
reset.css：
body,p,ul,ol,dl,dt,h1,h2,h3,h4,h5,h6,dl,dd,dt{ margin: 0; padding: 0; } ul,ol,li{ list-style: none; } input{ border: none; outline: none; } a{ text-decoration: none; }
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: 18px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .shop .iconfont{ margin-right: 5px; } .site-search .iconfont{ cursor: pointer; }
index.css:
body{ font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif; color: #333; } /*小米頂部樣式css*/ .topBar{ width: 100%; height: 40px; background-color: #333; } .container{ width: 1226px; margin: 0 auto; height: 100%; } .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 .shop a{ width: 120px; height: 40px; } .topBar .shop a:hover{ background-color: #fff; color: orange; } .topBar .login{ float: right; } .topBar a{ color: #b0b0b0; font-size: 12px; display: inline-block; line-height: 40px; } .topBar a:hover{ color: #fff; } .topBar span{ margin: 0 7px; color: #888; } /*小米頂部欄end*/ /*小米導航欄start*/ .header{ height: 100px; } .header .site-logo{ width: 62px; float: left; margin-top: 22px; } .header .site-logo a{ display: block; width: 56px; height: 57px; } .header .site-list{ float: left; width: 800px; } .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.site-category{ position: relative; z-index: 3; } .header .site-list ul li.site-category .category{ position: absolute; width: 234px; height: 460px; background-color: rgba(0,0,0,0.4); top: 88px; left: -92px; } .category>ul{ width: 234px; height: 420px; padding: 20px 0; } .category>ul>li{ height: 42px; } .category>ul>li>a{ padding-left: 30px; display: block; height: 42px; line-height: 42px; color: #fff; font-size: 14px; position: relative; } .category>ul>li>a>span{ position: absolute; top: 0px; right: 20px; font-size: 16px; } .category>ul>li>a:hover{ background-color: #ff7600; } .header .site-list>ul>li>a{ /*a 24px*/ display: block; padding: 26px 10px 38px; /*text-align: center;*/ color: #333; } .header .site-list>ul>li>a:hover{ color: #ff6700; } .header .site-search{ float: right; width: 296px; height: 50px; margin-top: 25px; /*background-color:#777;*/ } .header .site-search form{ width: 296px; /*height: 50px;*/ position: relative; } .header .site-search form .search-text{ /*245px width*/ width: 223px; height: 48px; border: 1px solid #e0e0e0; font-size: 14px; padding: 0 10px; float: left; } .header .site-search form .search-but{ width: 50px; height: 50px; float: left; background-color: white; border: 1px solid #e0e0e0; margin-left: -1px; } .header .site-search form .search-word{ position: absolute; font-size: 12px; top: 15px; right: 65px; } .header .site-search form .search-word a{ background-color: #eee; margin-left:20px; padding: 0 5px; color: #757575; } .header .site-search form .search-word a:hover{ background-color:#ff6700; color: #fff; } /*小米導航欄end*/ /*主頁內容部分start*/ .site-content .site-slider{ position: relative; } .site-content .site-slider>a{ width: 1226px; height: 460px; display: block; } .site-content .site-slider>a>img{ width: 1226px; } .site-content .site-slider>span{ position: absolute; width: 41px; height: 69px; background: url(../images/icon-slides.png) no-repeat 0 0; top: 37%; z-index:2; cursor: pointer; } .site-content .site-slider span.prev{ background-position:-83px 0 ; left: 234px; } .site-content .site-slider span.prev:hover{ background-position:0 0 ; left: 234px; } .site-content .site-slider span.next{ background-position:-123px; 0 ; right: 0; } .site-content .site-slider span.next:hover{ background-position:-41px 0 ; right: 0; } .site-content .site-slider .silder-item{ position: absolute; width: 200px; height: 30px; line-height: 30px; text-align: right; /*background-color: green;*/ bottom:20px; right: 40px; } .site-content .site-slider .silder-item>a{ display: inline-block; background-color: #e0e0e0; width: 6px; height: 6px; border-radius: 6px; margin: 0 5px; border: 1px solid #e0e0e0; border-color: #fff; } .site-content .site-slider .silder-item>a:hover{ background-color: #fff; } /*向導圖*/ /*清楚浮動，撐不起父盒子的高度*/ .clearfix::after{ content: ''; display: block; clear: both; } .content-sub{ margin-top: 20px; /*height: 170px;*/ overflow: hidden; } .content-sub .content-channel{ float: left; width: 234px; } .content-sub .content-channel>ul{ /*background-color: red;*/ font-size: 13px; } .content-sub .content-channel>ul>li{ float: left; width: 76px; height: 85px; /*line-height: 50px;*/ text-align: center; border: 1px solid #b0b0b0; background-color: #5f5750; } .content-sub .content-channel>ul>li a{ display: block; margin-top: 17px; /*padding-top: 17px;*/ color: rgba(255,255,255,.6); } .content-sub .content-channel>ul>li a i{ font-size: 23px; } /*模塊照片*/ .content-sub .content-list{ float: left; width: 992px; } .content-sub .content-list ul{ width: 100%; } .content-sub .content-list ul li{ float: left; margin-left: 10px; } .content-sub .content-list ul li a{ display: block; height: 174px; } .content-sub .content-list ul li:hover{ position: relative; top: -5px; box-shadow: 0 0px 10px #b0b0b0; } .content-sub .content-list ul li a img{ width: 320px; height: 174px; } /*banner圖*/ .site-content .banner{ margin-top: 20px; } .site-content .banner a { display: block; width: 1226px; height: 120px; } .site-content .banner a img{ width: 1226px; height: 120px; } /*主頁內容部分end*/ /*小米內容描述start*/ .content-desc{ background-color: #f5f5f5; padding-top: 20px; margin-top: 30px; } /*標題*/ .content-desc .box-hd{ height: 58px; position: relative; } .content-desc .box-hd h2{ font-weight: 100; font-size: 22px; line-height: 58px; color: #333; } .content-desc .box-hd .more{ position: absolute; right: 0; top: 0; } .content-desc .box-hd .more a{ line-height: 58px; font-size: 16px; color: #424242; } .content-desc .box-hd .more a i{ font-size: 14px; color: #fff; padding: 4px; width: 12px; height: 12px; border-radius: 12px; background-color: #b0b0b0; vertical-align: 2px; margin-left: 5px; } .content-desc .box-hd .more:hover a{ color: #ff6700; } .content-desc .box-hd .more:hover a i{ background-color: #ff6700; } /*標題end*/ /*內容start*/ .box-bd .row-l{ float: left; width: 234px; } .box-bd .row-l a{ display: block; width: 100%; height: 100%; } .box-bd .row-l a img{ width: 234px; height: 614px; } .box-bd .row-r ul{ overflow: hidden; } .box-bd .row-r ul li{ position: relative; float: left; height:260px; width: 234px; padding: 20px 0; background-color: #fff; border: 1px solid #fff; margin: 6px; } .box-bd .row-r ul li .figure{ width: 160px; height: 160px; margin: 0 auto 18px; } .box-bd .row-r ul li .figure a{ display: block; } .box-bd .row-r ul li .figure a img{ width: 160px; height: 160px; } .box-bd .row-r ul li .title{ font-size: 14px; font-weight: 400; text-align: center; } .box-bd .row-r ul li .title a{ display: block; color: #333; margin-top: -10px; } .box-bd .row-r ul li .desc{ height: 18px; font-size: 12px; text-align:center; color:#b0b0b0; overflow: hidden; white-space: nowrap; } .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: #83c44e; text-align: center; color: #fff; left: 50%; margin-left: -32px; } .box-bd .row-r li:hover{ box-shadow: 0 10px 10px #e0e0e0; } .box-bd .row-r{ float: left; width: 992px; } /*腳部欄*/ .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 li.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: -4px; } .footer .footer-service ul li a:hover{ color: #ff6700; } .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: 10px; 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; color: #616161; } .footer .footer-links .col-contact .iphone{ margin-bottom: 5px; font-size: 24px; color: #ff6700; } .footer .footer-links .col-contact p{ font-size: 12px; margin-bottom: 16px; } .footer .footer-links .col-contact a{ border: 1px solid #ff6700; font-size: 12px; padding: 5px 20px; color: #ff6700; } .footer .footer-links .col-contact a i{ font-size: 12px; } .footer .footer-links .col-contact a:hover{ background-color: #ff6700; color: #fff; }