第一課：頂部菜單欄
使用工具： VSCode
工具下載地址：https://code.visualstudio.com/
操作步驟：
第一步：新建目錄
第二步：打開vscode ，打開目錄
第三步：
新建js、css、img、index.html
修改index.html代碼如下：
<!doctype html> <html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="xiaomi.css"> <link rel="stylesheet" type="text/css" href="iconfont.css"> <link rel="stylesheet" type="text/css" href="iconfont2.css"> <link rel="stylesheet" type="text/css" href="iconfont3.css"> <link rel="stylesheet" type="text/css" href="iconfont4.css"> <link rel="stylesheet" type="text/css" href="iconfont5.css"> <link rel="stylesheet" type="text/css" href="iconfont6.css"> <link rel="stylesheet" type="text/css" href="iconfont8.css"> <title>小米閃購-小米商城</title> </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=""><i class="iconfont"></i>購物車<span>(0)</span></a> </div> <div class="topbar-info"> <a href="">登錄</a><span>|</span> <a href="">注冊</a><span>|</span> <a href="" class="sep">消息通知</a> </div> </div> </div> <!--頭部導航欄--> <div class="header"> <div class="container"> <div class="header-logo"> <a href="" class="lr">小米官網</a> </div> <div class="header-nav"> <ul class="nav-list"> <li class="content-cartgary"><a href="">全部商品分類</a></li> <li class="content-item"><a href="">小米手機</a></li> <li class="content-item"><a href="www.baidu.com">紅米</a></li> <li class="content-item"><a href="">電視</a></li> <li class="content-item"><a href="">筆記本</a></li> <li class="content-item"><a href="">家電</a></li> <li class="content-item"><a href="">新品</a></li> <li class="content-item"><a href="">路由器</a></li> <li class="content-item"><a href="">智能硬件</a></li> <li class="content-item"><a href="">服務</a></li> <li class="content-item"><a href="">社區</a></li> </ul> </div> <!--搜索框為表單--> <div class="header-search"> <form action="" class="search-form"> <input type="search" name="keyword" class="search-text"> <input type="submit" value="" class="search-button iconfont"> </form> </div> <div> </div> <!--閃購頁面--> <div class="seckill"> <div class="test"></div> <div class="seckill-head" ></div> <div class="container"> <div class="seckill-nav"> <ul> <li class="active"><em>10:00</em><span>搶購已結束</span></li> <li><em>12:00</em><span>即將開始</span></li> <li><em>14:00</em><span>即將開始</span></li> <li><em>16:00</em><span>即將開始</span></li> <li><em>18:00</em><span>即將開始</span></li> </ul> </div> <!--商品信息卡--> <div class="seckill-goods"> <ul class="fix"> <li> <div class="png"><a href=""><img src="images/photo1.jpg" alt="空調"></a></div> <div class="info"> <span><a href="" class="name">米家互聯網空調(一級能效)</a></span> <span><a href="" class="des">1.5匹，全直流變頻</a></span> <span><a href="" class="price">2499.00元<del>2599元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> <li> <div class="png"><a href=""><img src="images/watch.jpg" alt="米家石英表"></a></div> <div class="info"> <span><a href="" class="name">米家石英表 黑色</a></span> <span><a href="" class="des">腕上的科技與美學</a></span> <span><a href="" class="price">99.00元<del>349元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> <li> <div class="png"><a href=""><img src="images/phone3.jpg" alt="小米米家對講機"></a></div> <div class="info"> <span><a href="" class="name">小米米家對講機1s藍色</a></span> <span><a href="" class="des">再次出發,陪你輕聊一路</a></span> <span><a href="" class="price">9.9.00元<del>249元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> <li> <div class="png"><a href=""><img src="images/photo3.jpg" alt="米家安防"></a></div> <div class="info"> <span><a href="" class="name">米家智能廚房米家安防</a></span> <span><a href="" class="des">再次出發,陪你輕聊一路</a></span> <span><a href="" class="price">449.00元<del>497元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> <li> <div class="png"><a href=""><img src="images/photo4.jpg" alt="小米藍牙音響"></a></div> <div class="info"> <span><a href="" class="name">小米藍牙音響</a></span> <span><a href="" class="des">全金屬外殼,內置麥克風</a></span> <span><a href="" class="price">1.00元<del>69元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> <li> <div class="png"><a href=""><img src="images/photo5.jpg" alt="保溫杯"></a></div> <div class="info"> <span><a href="" class="name">保溫杯白色</a></span> <span><a href="" class="des">12小時保溫保冷</a></span> <span><a href="" class="price">85.00元<del>99元</del></a></span> <span><a href="" class="gobuy">登錄后搶購</a></span> </div> </li> </ul> </div> <p>*小米閃購活動規則：小米閃購商品不享受該商品在小米商城的其他優惠政策 （包括但不限於優惠券、贈品、滿減、滿贈等）<br> 溫馨提示：因可能存在系統緩存、頁面更新導致價格變動異常等不確定性情況出現， 如您發現活動商品標價或促銷信息有異常，請您立即聯系小米客服，以便我們及時補正.</p> </div> </div> <!--底部服務信息--> <div class="reserve"> <div class="container"> <ul class="server"> <li><a href="" class="server-first"><i class="iconfont"></i>預約維修服務</a><span>|</span></li> <li><a href="" ><i class="iconfont"></i>7天無理由退貨</a><span>|</span></li> <li><a href="" ><i class="iconfont"></i>15天免費換貨</a><span>|</span></li> <li><a href="" ><i class="iconfont"></i>滿150元包郵</a><span>|</span></li> <li><a href=""><i class="iconfont"></i>520余加售后網點</a></li> </ul> </div> <hr> <!--表格布局底部服務信息--> <div class="info-footer"> <div class="container"> <div class="table-left"> <table> <tr class="first-tr"> <td>幫助中心</td> <td>服務支持</td> <td>線下門店</td> <td>關於小米</td> <td>關注我們</td> <td>特色服務</td> </tr> <tr class="second-tr"> <td><a href="">賬戶管理</a></td> <td><a href="">售后政策</a></td> <td><a href="">小米之家</a></td> <td><a href="">了解小米</a></td> <td><a href="">新浪微博</a></td> <td><a href="">F碼通道</a></td> </tr> <tr class="second-tr"> <td><a href="">購物指南</a></td> <td><a href="">自助服務</a></td> <td><a href="">服務網點</a></td> <td><a href="">加入小米</a></td> <td><a href="">官方微信</a></td> <td><a href="">禮物碼</a></td> </tr> <tr class="second-tr"> <td><a href="">訂單操作</a></td> <td><a href="">相關下載</a></td> <td><a href="">授權體驗店</a></td> <td><a href="">投資者關系</a></td> <td><a href="">聯系我們</a></td> <td><a href="">防偽查詢</a></td> </tr> </table> </div> <div class="card-right"> <div class="card-right-top"> <p class="top">400-100-5678</p> <span>周一至周日8:00-18:00<br>(僅收市話費)</span> </div> <div class="card-right-bottom"> </div> </div> </div> </div> </div> <div class="footer-info"> </div> </body> </html>
第四步：在css下增加style.css文件並增加如下內容：
*{ padding:0; margin:0; } .container::before{ content:""; display:block; } .container{ content:""; display:block; clear:both; } ul{ list-style:none; } .topbar{ background:#333; height:40px; } .container{ margin:0 auto; width:1226px; } .topbar-nav{ float:left; height:40px; line-height:40px; font-size:0;/*為了配置豎線分割符先去掉后在找回來*/ } /*找回豎線分隔符*/ .topbar-nav span{ font-size:12px; color:#424242; margin:0.5em; } .topbar-info{ float:right; } .topbar-cart{ float:right; } a{ text-decoration:none; } .topbar a{ font-size:12px; color:#b0b0b0; } /*鼠標移上變色效果*/ .topbar a:hover{ color:#fff; } /*購物車配置*/ .topbar-cart a{ display:block; height:40px; line-height:40px; text-align:center; width:120px; background-color:#424242; } .topbar-cart span{ margin-left:4px; font-size:12px; } .topbar-cart i{ margin-right:5px; font-height:bold; } .topbar-cart a:hover{ background-color:#fff; color:#ff6700; } /*登錄注冊消息通知*/ .topbar-info a{ float:left; height:40px; line-height:40px; padding:0 5px; } .topbar-info span{ float:left; height:40px; line-height:40px; font-size:12px; color:#424242; } .topbar-info .sep{ padding:0 10px; } .topbar-info{ margin-right:15px; } /*頭部導航欄的配置*/ .header{ height:100px; } .header-logo{ float:left; width:62px; margin-top:22px; height:55px; /*border:1px solid black;*/ } .header-logo a{ display:block; height:55px; width:55px; background-image:url(images/xiaomilogo.jpg); background-repeat:no-repeat; } .header .lr{ text-align:left; text-indent:-150px; overflow:hidden; } .header-nav{ float:left; width:820px; height:100px; } .header-search{ float:right; width:296px; height:50px; margin-top:25px; } .nav-list{ height:88px; width:820px; font-size:16px; padding:12px 0 0 30px; font-weight:bold; } .header .content-item{ float:left; } .nav-list .content-item a{ display:block; color:#333; padding:26px 10px 38px; } .nav-list .content-cartgary{ float:left; width:127px; padding:0 15px 0 0; } .nav-list .content-cartgary a{ display:block; color:#333; padding:26px 0 38px; } /* .header-logo::before,.header-nav::before,.content-cartgary::before, .content-item::before{ content:""; display:block; } .header-logo::after,.header-nav::after,.content-cartgary::after, .content-item::after{ content:""; display:block; clear:both; } */ .content-item a:hover{ color:#ff6700; } /*搜索框*/ .header-search .search-form{ position:relative; display:block; width:296px; height:50px; } .header-search .search-form .search-text{ position:absolute; top:0; right:51px; height:50px; width:245px; display:block; line-height:50px; border:1px solid #e0e0e0;; outline:0; } .header-search .search-form .search-button{ position:absolute; top:0; right:0; display:block; height:50px; width:52px; border:1px solid #e0e0e0; font-size:24px; outline:0; background:#fff; color:#616161; lineheight:24px; } .header-search .search-form .search-button:hover{ background-color:#ff6700; color:#fff; font-size:24px; } /*閃購頁面*/ .seckill{ background-color:#f5f5f5; } .test{ background-color:#fff; height:100px; } .seckill .seckill-head{ background:url(images/seckill.jpg); background-repeat:no-repeat; height:170px; margin-top:19px; } /* .seckill-nav{ margin:-68px 0 22px; } */ .seckill-nav ul{ margin-top:-68px; height:68px; background-color:#414141; } .seckill-nav li{ display:block; color:#fff; float:left; height:68px; width:20%; line-height:68px; text-align:center; cursor:pointer; } .seckill-nav li em{ display:inline-block; font-style:normal; font-size:18px; line-height:1; vertical-align:middle; margin-left:30px; } .seckill-nav li span{ display:inline-block; font-size:14px; line-height:1; text-align:left; margin-left:15px; vertical-align:middle; } .seckill-nav .active{ background-color:#f1393a; } /*商品列表*/ .seckill-goods ul{ margin-right:-8px; } .seckill-goods li{ float:left; width:404px; height:190px; background-color:#fff; margin-right:7px; margin-bottom:7px; margin-top:7px; } .seckill-gooods .fix::before{ content:""; display:table; } .seckill-gooods .fix::after{ content:""; display:table; clear:both; } /*底部小米閃購活動規則說明文字部分*/ p{ margin-top:100px; margin-bottom:35px; display:inline-block; font-size:12px; color:#999; } /*一個信息列表開始*/ .seckill-goods .fix .png{ width:190px; height:190px; float:left; } .seckill-goods .fix .png img{ height:190px; } .seckill-goods .fix .info{ width:190px; height:190px; margin-left:200px; } .seckill-goods .fix .info .name{ display:inline-block; padding-top:20px; font-size:16px; color:#333; } .seckill-goods .fix .info .des{ display:inline-block; font-size:12px; color:#999; } .seckill-goods .fix .info .price{ display:inline-block; margin-top:15px; color:#f1393a; } .seckill-goods .fix .info del{ font-size:12px; color:#999; padding-left:15px; } .seckill-goods .fix .info .gobuy{ display:inline-block; margin-top:20px; background-color:#f1393a; color:black; color:#fff; height:40px; width:100px; line-height:40px; text-align:center; } /*一個信息列表完畢*/ /*頁底部信*/ .reserve .container{ margin:0 auto; width:100%; } .server li{ float:left; height:68px; width:16%; display:block; line-height:68px; margin-left:20px; margin-right:20px; text-align:center; } .server{ height:120px; background-color:#fff; padding-top:20px; } .server a{ display:block; float:left; font-size:18px; color:#333; } .server span{ margin-left:30px; color:#999; } .server .server-first{ margin-left:20px; } hr{ margin-top:-50px; } /*底部圖標配置*/ .server i { font-size:24px; margin-right:5px; } /*底部信息欄*/ .info-footer{ height:200px; margin-top:30px; } .table-left{ float:left; width:74%; height:200px; } .card-right{ float:right; height:200px; width:24%; } .first-tr td{ height:20px; width:50px; color:#333; font-size:16px; } table{ height:200px; width:100%; } .second-tr td{ height:10px; width:50px; } .second-tr a{ color:#999; padding-top:-10px; } .second-tr a:hover{ color:#ff6700; } .card-right-top .top{ display:inline-block; height:70px; width:100%; line-height:80px; font-size:20px; text-align:center; margin-top:0px; color:#ff6700; } .card-right-top span{ display:inline-block; height:40px; width:100%; margin-top:-25px; line-height:40px; text-align:center; font-size:12px; } /*footr-info*/ .footer-info{ background-color:#f5f5f5; width:100%; height:200px; }
第五步：在index.html中引入style.css
第六步：引入相關圖片，效果如下：
