小米商城网页制作代码
生活随笔
收集整理的這篇文章主要介紹了
小米商城网页制作代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
采用的架構為html+css+js
HTML
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>小米閃購-小米商城</title><!-- 引用圖標 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 連接css樣式 --><link rel="stylesheet" href="css\style.css"><link rel="stylesheet" href="css/iconfont.css"> </head><body><div class="header"><div class="container"><div class="header_nav"><a href=""> 小米商城 </a><span>|</span><a href=""> MIUI </a><span>|</span><a href=""> IoT </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=""> 智能生活 </a><span>|</span></div><div class="header_cart"><a href=""><i class="iconfont"></i> 購物車(0)</a></div><div class="header_info clearfix"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="">消息通知</a></div></div></div><div class="header2"><div class="container"><div class="header2_log"><a href="url" class="lr">小米官網</a></div><div class="header2_nav"><ul class="nav_list clearfix"><li class="nav_item2"><a href="">全部商品分類</a></li><li class="nav_item"><a href="">小米手機</a></li><li class="nav_item"><a href="">Redmi 紅米</a></li><li class="nav_item"><a href="">電視</a></li><li class="nav_item"><a href="">筆記本</a></li><li class="nav_item"><a href="">家電</a></li><li class="nav_item"><a href="">路由器</a></li><li class="nav_item"><a href="">智能硬件</a></li><li class="nav_item"><a href="">服務</a></li><li class="nav_item"><a href="">社區</a></li></ul></div><div class="header2_search"><form class="search-form" action=""><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="seckill-head"></div><div class="container"><div id="seckillNav" class="seckill-nav"><ul id="tabs"><li class="active"><em>18:00</em><span><em>即將開始<br>距開始 01:02:20</em></span></li><li><em>00:00</em><span>明日開始</span></li><li><em>10:00</em><span>明日開始</span></li><li><em>12:00</em><span>明日開始</span></li><li><em>14:00</em><span>明日開始</span></li></ul></div><div id="lists" class="seckill-goods"><ul class="clearfix active"><li><div class="bg"><img src="./img/1.png" alt=""></div><div class="info"><a href="" class="name">小米移動電源2C 20000mAh 白色</a><p class="tips">大容量，一個就夠用</p><!-- <del></del>是刪除標簽 --><p class="price">1元 <del>129元</del></p><a href="" class="btn">登錄后搶購</a><p class="person">已有83852人設置提醒</p></div></li></ul><ul class="clearfix"><li><div class="bg"><img src="./img/2.png" alt=""></div><div class="info"><a href="" class="name">小米移動電源2C 20000mAh 白色</a><p class="tips">大容量，一個就夠用</p><!-- <del></del>是刪除標簽 --><p class="price">1元 <del>129元</del></p><a href="" class="btn">登錄后搶購</a><p class="person">已有83852人設置提醒</p></div></li></ul><ul class="clearfix"><li><div class="bg"><img src="./img/3.png" alt=""></div><div class="info"><a href="" class="name">小米移動電源2C 20000mAh 白色</a><p class="tips">大容量，一個就夠用</p><!-- <del></del>是刪除標簽 --><p class="price">1元 <del>129元</del></p><a href="" class="btn">登錄后搶購</a><p class="person">已有83852人設置提醒</p></div></li></ul><ul class="clearfix"><li><div class="bg"><img src="./img/2.png" alt=""></div><div class="info"><a href="" class="name">小米移動電源2C 20000mAh 白色</a><p class="tips">大容量，一個就夠用</p><!-- <del></del>是刪除標簽 --><p class="price">1元 <del>129元</del></p><a href="" class="btn">登錄后搶購</a><p class="person">已有83852人設置提醒</p></div></li></ul><ul class="clearfix"><li><div class="bg"><img src="./img/1.png" alt=""></div><div class="info"><a href="" class="name">小米移動電源2C 20000mAh 白色</a><p class="tips">大容量，一個就夠用</p><!-- <del></del>是刪除標簽 --><p class="price">1元 <del>129元</del></p><a href="" class="btn">登錄后搶購</a><p class="person">已有83852人設置提醒</p></div></li></ul></div><p class="seckill-notice">*小米閃購活動規則：小米閃購商品不享受該商品在小米商城的其他優惠政策（包括但不限于優惠券、贈品、滿減、滿贈等）<br>溫馨提示：因可能存在系統緩存、頁面更新導致價格變動異常等不確定性情況出現，如您發現活動商品標價或促銷信息有異常，請您立即聯系小米客服，以便我們及時補正。</p></div></div> <script src="js/index.js"></script> </body></html>CSS
body {/* margin和padding用于去白邊 */margin: 0;padding: 0;height: 2500px; }ul, li {margin: 0;padding: 0; }ul {list-style-type: none; }a {/* 去掉下劃線 */text-decoration: none; }/* header */.header {/* border: 1px solid black; */background-color: #333;height: 40px; }.container {/* border: 1px solid black; */margin: 0 auto;/* 居中設置 */width: 1226px; }/* 解決浮動導致的邊界塌陷 */.container::before, .container::after,.clearfix::before, .clearfix::after {content: "";display: table; }.container::after, .clearfix::after {clear: both; }.header_nav {float: left;/* 設置居中 */height: 40px;line-height: 40px;font-size: 0; }.header_nav span {font-size: 12px; }.header_info {float: right; }.header_cart {float: right; }.header a {color: #b0b0b0;font-size: 12px; }/* 設置鼠標懸停變色 */.header a:hover {color: #fff; }.header_cart a {display: block;height: 40px;line-height: 40px;/* 文本居中 */text-align: center;width: 120px;background-color: #424242; }.header_cart a:hover {color: #ff6700;background-color: #fff; }.header_info a {float: left;padding: 0 5px;line-height: 40px;height: 40px; }.header_info span {float: left;font-size: 12px;color: #424242;line-height: 40px;height: 40px; }/* header2 */.header2 {height: 100px; }.header2_log {float: left;width: 62px;height: 55px;margin-top: 22px; }.header2_log a {display: block;width: 55px;height: 55px;background: #ff6700 url(../img/mi-logo.png) no-repeat 50% 50%; }/* 確保圖標消失時也可以點 */.header2_log .lr {text-align: left;text-indent: -9992em; }.header2_nav {float: left;width: 820px;height: 100px; }.header2_nav .nav_list {width: 820px;height: 88px;font-size: 16px;padding: 12px 0 0 30px; }.header2_nav .nav_list .nav_item {/* 使列表橫向 */float: left; }.header2_nav .nav_list .nav_item a {display: block;padding: 26px 10px 38px;color: #333; }.header2_nav .nav_list .nav_item a:hover {color: #ff6700; }.header2_nav .nav_list .nav_item2 {float: left;width: 127px;padding: 0 15px 0 0; }.header2_nav .nav_list .nav_item2 a {display: block;padding: 26px 0px 38px;text-align: right;color: #333; }.header2_search {float: right;width: 296px;height: 50px;margin-top: 25px;} .header2_search .search-form{position: relative;display: block;width: 296px;height: 50px; } .header2_search .search-form .search-text{display: block;position: absolute;top: 0;right: 51px;width: 245px;height: 50px;line-height: 50px;border: 1px solid #e0e0e0;outline: 0; } .header2_search .search-form .search-button{position: absolute;top: 0;right: 0;display: block;width: 52px;height: 50px;border: 1px solid #e0e0e0;font-size: 24px;line-height: 24px;background-color: #fff;color: #616161;outline: 0; } .header2_search .search-form .search-button:hover{background-color: #ff6700;color: #fff; }/* seckill */.seckill{background-color: #f5f5f5;}.seckill .seckill-head{margin-top: 19px;height: 170px;background: url(../img/seckill-head.jpg) no-repeat 50% 0;}.seckill-navfixed{position: fixed;top: 60px; }.seckill .seckill-nav{margin: -68px 0 22px;}.seckill .seckill-navfixed{position: fixed;top: 60px;}.seckill .seckill-nav ul{width: 1226px;height: 68px; background: #414141;}.seckill .seckill-nav li{display: block;float: left;width: 20%;color: #fff;height: 68px;line-height: 68px;text-align:center;cursor: pointer;}.seckill .seckill-nav li em{display: inline-block;font-style: normal;margin-left: 30px;font-size: 18px;line-height: 1px;vertical-align: middle;}.seckill .seckill-nav span{display: inline-block;text-align: left;line-height: 1px;margin-left: 15px;vertical-align: middle;font-size: 14px;}.seckill .seckill-nav .active{background: #f1393a;}.seckill .seckill-nav ul li span em{display: inline-block;font-size: 14px;margin-left: 0;font-style: normal;text-align: left;line-height: 20px;}.seckill .seckill-goods .active{display: block; }.seckill .seckill-goods ul{display: none;margin-right: -13px;}.seckill .seckill-goods li{float: left;width: 400px;height: 190px;background-color: #414141;margin-right: 13px;margin-bottom: 13px;}.seckill .seckill-goods .bg{float: left;width: 190px;height: 190px;}.seckill .seckill-goods .info{height: 190px;width: 190px;margin-left: 200px;color: #fff;padding-top: 30px;}.seckill .seckill-goods .bg img{height: 190px;width: 190px;}.seckill .seckill-goods .info .name{font-size: 16px;color: #fff;height: 16px;line-height: 16px;display: block;/* 取消換行 */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.seckill .seckill-goods .info .tips{font-size: 12px;line-height: 12px;color: #b0b0b0;margin-top: 10px;}.seckill .seckill-goods .info .price{font-size: 16px;line-height: 16px;color: #f1393a;margin-top: 14px;}.seckill .seckill-goods .info .price del{color: #999;font-size: 12px;line-height: 12px;margin-left: 10px;margin-bottom: 0;}.seckill .seckill-goods .info .btn{ display: inline-block; width: 118px; height: 28px; line-height: 28px; font-size: 14px; color: #fff; text-align: center; background-color: #f1393a; border: 1px solid #f1393a;}.seckill .seckill-goods .info .person{font-size: 12px;line-height: 12px;color: #b0b0b0;margin-top: 10px;}.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;padding-bottom: 35px; }JS
var tabs = document.getElementById("tabs").getElementsByTagName("li"); console.log(tabs); var lists = document.getElementById("lists").getElementsByTagName("ul"); console.log(lists); for(var i = 0; i< tabs.length; i++){tabs[i].onclick = showlist; }function showlist(){for( var i = 0; i<tabs.length; i++){if( tabs[i] === this){tabs[i].className = "active";lists[i].className = "clearfix active";}else {tabs[i].className = "";lists[i].className = "clearfix";}} } var seckillNav = document.getElementById("seckillNav"); window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;if( scrollTop >= 260){seckillNav.className = "seckill-nav seckill-navfixed"}else {seckillNav.className = "seckill-nav";}console.log(scrollTop); }頁面效果
總結
以上是生活随笔為你收集整理的小米商城网页制作代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql outfile csv_sq
- 下一篇： 使用Echarts实现地图3D效果