（html+css）静态小米闪购主页仿制
生活随笔
收集整理的這篇文章主要介紹了
（html+css）静态小米闪购主页仿制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
初學html+css，跟著視頻教學仿制了小米閃購的主頁，在打的過程中發現一些知識點還不太熟練，建議一邊聽課一遍看書學知識點。
HTML
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><title>小米閃購 - 小米商城</title><link href="favicon.ico" rel="stylesheet"><link href="StyleSheet1.css" type="text/css" rel="stylesheet" /> </head> <body><div class="top"><div class="center"><div class="top-bar1"><a href="https://www.mi.com/index.html">小米商城</a><span>|</span><a href="https://www.miui.com/">MIUI</a><span>|</span><a href="https://iot.mi.com/index.html">IoT|</a><span>|</span><a href="https://i.mi.com/">云服務</a><span>|</span><a href="https://jr.mi.com/?from=micom">金融</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="top-bar2"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="news">消息通知</a><span>|</span></div><div class="top-bar3" ><a href="">購物車<span>(0)</span></a></div></div></div><div class="header"><div class="center1"><div class ="header-log"><a href="#" ></a></div><div class="header-nav"><ul class="nav-list"><li class="item"><a href="">全部商品分類</a></li><li class="item"><a href="">小米手機</a></li><li class="item"><a href="">Redmi 紅米</a></li><li class="item"><a href="">電視</a></li><li class="item"><a href="">筆記本</a></li><li class="item"><a href="">家電</a></li><li class="item"><a href="">路由器</a></li><li class="item"><a href="">智能硬件</a></li><li class="item"><a href="">服務</a></li><li class="item"><a href="">社區</a></li></ul></div><div class="header-seache"><form action="" class="seache-form"><input type="search" class="seache-text" name="keyword"> <input type="submit" class="seache-btn" value="搜索"></form></div></div></div><div class="seckill"><div class="seckill-head"> </div><div class="center"><div class="seckill-nav"> <ul><li class="active">20:00搶購中</li><li><em>00:00</em> <span>明日開始</span></li><li><em>10:00</em> <span>明日開始</span></li><li><em>14:00</em><span> 明日開始</span></li><li><em>20:00</em> <span>明日開始</span></li></ul></div><div class="seckill-goods"><ul class="clearfix"><li><div class="bg"> <img src="../小米閃購素材/img/1.png" alt=""> </div><div class="info"> <a href="" class="name">小米移動電源2c 20000白色</a><p class="tips">大容量,一個就夠</p><p class="price"> 1元 <del>129元</del></p><a href="">提醒我</a><p>已有1個人領取</p></div></li></ul></div><p class="seckill-notices">*小米秒殺活動規則： <br>1.秒殺商品是否參加活動，以訂單結算頁顯示為準，活動包括但不限于優惠券、贈品、滿減、滿贈等；<br>2.秒殺商品數量有限，活動以下單支付成功為準，請加入購物車后盡快下單支付；<br>3.秒殺價不含運費，最終以訂單結算頁價格為準。<br>溫馨提示：因可能存在系統緩存、頁面更新導致價格變動異常等不確定性情況出現，如您發現活動商品標價或促銷信息有異常，請您立即聯系小米客服，以便我們及時補正。<br></p></div></div> </body> </html>CSS
body ul li {margin: 0px;padding: 0px; } body {height: 2600px; } ul{list-style: none; } a{text-decoration: none; } .top {background-color:#333;height:40px; } .center{ margin: 0 auto;width: 1226px;height: 38px; } .top a { color: #b0b0b0; font-size: 12px; } .top-bar1 :hover {color:salmon; } .center::before, .center::after {content: "";display:table; } .center::after {clear: both; } .top-bar1 {float: left;height: 40px;line-height: 40px;font-size: 0px; } .top-bar1 span {font-size: 8px;color: #424242;font-family: sans-serif;margin: 0.5em;} .top-bar2,.top-bar3 {float:right; } .top-bar3 a {display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242; } .top-bar3 span {margin-left:0px;font-size: 12px; } .top-bar3 :hover {background-color: #fff;color: #ff6700; } .top-bar2 {margin-right: 15px; } .top-bar2 a {float: left;height: 40px;padding: 0 5px;line-height: 40px;} .top-bar2 span {float: left;font-family: sans-serif;font-size: 12px;color: #424242;line-height: 40px; } .top-bar2 .news {padding: 0 10px; } .top-bar2 a:hover { color: aqua; } /* header*/ .header {height: 100px;} .header-log { margin-top:22px ; height: 55px;margin-left: 80px;}.header-seache { float: right;width: 296px;height: 50px; margin-top: -50px;margin-right:150px;}.header-log {display: block;width: 55px;width: 55px;background: #ff6700 url(../小米閃購素材/img/mi-logo.png) no-repeat 50% 50%;} .u1 { list-style-type: none; } .header-nav {width: 720px;height: 100px;margin-top: -70px;margin-left: 200px;float: left; }.header-nav a:hover { color: #ff6700; } .header-nav .nav-list .item {float: left; } .header-nav .nav-list .item a { display: block; padding: 26px 10px 38px; color: black; font-size: 13px; } .header-seache .seache-form {display: block;width:296px;height: 56px; position: relative; } .header-seache .seache-form .seaech-text { display: block;width: 245px;height: 50px;line-height: 50px;border: 1x solid #e0e0e0;outline: 0; } .header-seache .seache-form .seaech-btn { display: block; width: 52px; height: 50px; border: 1px solid #e0e0e0; font-size: 24px; line-height: 24px; background: white; color: #616161; outline: 0; } .seckill {background-color:#f5f5f5; } .seckill-head {background :url(../小米閃購素材/img/seckill-head.jpg) no-repeat ;margin-top: 19px;height: 170px; } .seckill-nav {margin: -68px 0 22px;} .seckill-nav ul {height: 68px;background: #414141; } .seckill-nav li { float: left;display: block;color: #fff;width: 20%;height: 68px;line-height:68px;text-align: center;cursor: pointer; } .seckill-nav .active {background-color: #f1393a; } .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;text-align: left;line-height: 1;vertical-align:middle ;font-size: 14px;margin-left: 15px; } /* seckill-goods*/ .seckill-goods li {float: left; width: 400px; height: 190px; background-color: #fff; margin-right: 13px; margin-bottom: 13px; }.clearfix:after {content:""; display: block; clear:both; }.seckill-notices{font-size: 12px;color: #999;margin-top: 100px;padding: 35px;}.seckill-goods .bg{float: left;width: 190px;height: 190px;}.seckill-goods .bg img{height: 190px;}.seckill-goods .info{margin-left: 210px;width: 190px;height: 190px;padding-top: 30px;}.seckill-goods .info .name {font-size: 14px;color: #333;height: 16px;line-height: 16px;display: block;white-space: nowrap;overflow: hidden; } .seckill-goods .info .tips {font-size: 12px;line-height: 12px;color: #b0b0b0; } .seckill-goods .info .price {font-size: 16px;line-height: 16px;color: red;margin-top: 16px;} .seckill-goods .info .price del {font-size: 12px;line-height: 12px;color: #999;margin-left: 10px; }總結
以上是生活随笔為你收集整理的（html+css）静态小米闪购主页仿制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php导出excel时间错误（同一个时间
- 下一篇： allegro大十字光标设置方法