2018-10-27

小米閃購(gòu)商城的基本結(jié)構(gòu)還原

原圖1.png
原圖2.png
制作1.png
制作2.png

html代碼
<!DOCTYPE html>
<html>
<head>
<title>小米閃購(gòu)-小米商城</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="topbar">
<div class="container">
<div class="topbar-nav">
<a href="#" class="first">小米商城</a><span>|</span>
<a href="#">MIUI</a><span>|</span>
<a href="#">IoT</a><span>|</span>
<a href="#">云服務(wù)</a><span>|</span>
<a href="#">金融</a><span>|</span>
<a href="#">有品</a><span>|</span>
<a href="#">小愛(ài)開放平臺(tái)</a><span>|</span>
<a href="#">政企服務(wù)</a><span>|</span>
<a href="#">下載app</a><span>|</span>
<a href="#">Select Region</a>
</div>
<div class="topbar-cart">
<a href="#">購(gòu)物車
<span>(0)</span>
</a>
</div>
<div class="topbar-info">
<a href="#">登錄</a><span>|</span>
<a href="#">注冊(cè)</a><span>|</span>
<a href="#" class="xiaoxi">消息通知</a>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="head-logo">
<a class="logo" title="小米商城">mi</a>
</div>
<div class="head-nav">
<span>全部商品分類</span>
<span>小米手機(jī)</span>
<span>紅米</span>
<span>電視</span>
<span>筆記本</span>
<span>空調(diào)</span>
<span>新品</span>
<span>路由器</span>
<span>智能硬件</span>
<span>服務(wù)</span>
<span>社區(qū)</span>
</div>
<div class="head-search">
<form class="search-form">
<input type="search" class="search-text">
<input type="submit" class="search-btn" value="搜索">
</form>
</div>
</div>
</div>
<div class="seckill">
<div class="seckill-head"></div>
<div class="container relative">
<div class="seckill-banner">
<ul>
<li class="active">
<a href="#">
<em>18:00</em>
<span>
<em id="qianggou">
搶購(gòu)中


距離結(jié)束
<span id="hour">01:</span>
<span id="min">00:</span>
<span id="fen">00</span>
<script type="text/javascript" src="js.js"></script>
</em>
</span>
</a>
</li>
<li>
<a href="#">
<em>20:00</em>
<span>
<em>
即將開始
</em>
</span>
</a>
</li>
<li>
<a href="#">
<em>22:00</em>
<span>
<em>
即將開始
</em>
</span>
</a>
</li>
<li>
<a href="#">
<em>00:00</em>
<span>
<em>
明日開始
</em>
</span>
</a>
</li>
<li>
<a href="#">
<em>10:00</em>
<span>
<em>
明日開始
</em>
</span>
</a>
</li>
</ul>
</div>
<div class="seckill-con">
<span class="container seckillCon">
<ul>
<li>
<a href="#">
<span class="img-com">
<img src="img/01.png" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米頭戴式耳機(jī)</span>
<span class="desc tips">好聲音，伴你整個(gè)青春</span>
<span class="price">
9.90元
<del>199元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="img-com">
<img src="img/02.png" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">米家驅(qū)蚊器 白色</span>
<span class="desc tips">長(zhǎng)效驅(qū)蚊 靜享一整個(gè)夏天</span>
<span class="price">
1.00元
<del>59元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</a>
</li>
<li>
<span class="img-com">
<img src="img/03.png" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米指環(huán)支架 銀色</span>
<span class="desc tips">鉆進(jìn)手機(jī)的小“圈套”</span>
<span class="price">
1.00元
<del>19元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/04.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米手環(huán)2腕帶 綠色</span>
<span class="desc tips">多彩腕帶 出色生活</span>
<span class="price">
16.90元
<del>19.9元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/05.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">九號(hào)平衡車 白色</span>
<span class="desc tips">年輕人的酷玩具</span>
<span class="price">
1949.00元
<del>1999元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/06.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米移動(dòng)電源</span>
<span class="desc tips">大容量，一個(gè)就夠用</span>
<span class="price">
119.00元
<del>129元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/07.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米多功能都市休閑胸...</span>
<span class="desc tips">裝下你出行的所有需求</span>
<span class="price">
59.00元
<del>69元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/08.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">天然氣報(bào)警器</span>
<span class="desc tips">安全保障持續(xù)“在線”</span>
<span class="price">
179.00元
<del>100元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/09.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">米兔積木礦山卡車 白色</span>
<span class="desc tips">小零件，拼接出大樂(lè)趣</span>
<span class="price">
89.00元
<del>99元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/10.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">米家空氣凈化器</span>
<span class="desc tips">凈化室內(nèi)空氣看不見(jiàn)的細(xì)菌</span>
<span class="price">
139.00元
<del>159元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/11.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米凈水器</span>
<span class="desc tips">有效濾除抗生素，重金屬，細(xì)菌</span>
<span class="price">
469.00元
<del>499元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
<li>
<span class="img-com">
<img src="img/12.jpg" class="done">
</span>
<span class="pro-con">
<span class="name" title="小米頭戴式耳機(jī)">小米路由器</span>
<span class="desc tips">全新一代智能家庭中心</span>
<span class="price">
398.00元
<del>499元</del>
</span>
<span class="callme">提醒我</span>
<span class="askme">已有27018人設(shè)置提醒</span>
</span>
</li>
</ul>
</span>
</div>
<div class="seckill-last">
*小米閃購(gòu)活動(dòng)規(guī)則：小米閃購(gòu)商品不享受該商品在小米商城的其他優(yōu)惠政策（包括但不限于優(yōu)惠券、贈(zèng)品、滿減、滿贈(zèng)等）


溫馨提示：因可能存在系統(tǒng)緩存、頁(yè)面更新導(dǎo)致價(jià)格變動(dòng)異常等不確定性情況出現(xiàn)，如您發(fā)現(xiàn)活動(dòng)商品標(biāo)價(jià)或促銷信息有異常，請(qǐng)您立即聯(lián)系小米客服，以便我們及時(shí)補(bǔ)正。
</div>
</div>
</div>
<div class="site-footer">
<div class="container">
<div class="footer-service">
<ul>
<li>
<a href="#">預(yù)約維修服務(wù)</a>
</li>
<li>
<a href="#">7天無(wú)理由退貨</a>
</li>
<li>
<a href="#">15天免費(fèi)換貸</a>
</li>
<li>
<a href="#">滿150元包郵</a>
</li>
<li class="last">
<a href="#">520余家售后網(wǎng)點(diǎn)</a>
</li>
</ul>
</div>
</div>
</div>+
</body>
</html>

css代碼
*{
margin: 0;
padding: 0;
}
body{
height: 1500px;
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
.topbar{
background: #333;
height: 40px;
}
.topbar .container{
height: 40px;
width: 1226px;
margin: 0 auto;
color: #b0b0b0;

}
.topbar a{
color: #b0b0b0;
text-decoration: none;
font-size: 12px;
}
.container::before,.container::after{
content: "";
display: table;
}
.container::after{
clear: both;
}
.topbar-nav{
float: left;
}
.topbar-info{
float: right;
}
.topbar-cart{
float: right;
}
.topbar-nav span{
font-size: 12px;
margin: 0.5em;
color: #424242;
font-family: sans-serif;
}
.topbar-nav{
height: 40px;
line-height: 40px;
font-size: 0;
}
.topbar-nav a:hover{
color: #fff;
}
.topbar-cart a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 120px;
background-color: #404040;
}
.topbar-cart a:hover{
background-color: #fff;
color: #ff6700;
}
.topbar-cart span{
margin-left: -4px;
font-size: 12px;
}
.topbar-info a{
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
}
.topbar-info a:hover{
color: #fff;
}
.topbar-info .xiaoxi{
padding: 0 15px;
}
.topbar-info{
margin-right:5px;
}
.topbar-info a{
float: left;
padding: 0 5px;
line-height: 40px;
height: 40px;
}
.topbar-info span{
float: left;
line-height: 40px;
height: 40px;
font-family: sans-serif;
font-size: 12px;
color: #424242;
}
.site-header{
height: 100px;
position: relative;

}
.site-header .container{
margin: 0 auto;
height: 100px;
width: 1226px;
}
.logo{
background-color: #ff6700;
width: 55px;
height: 55px;
background-size: 55px 55px;
display: block;
line-height: 55px;
text-align: center;
font-size: 30px;
}
.head-logo{
margin-top: 22px;
float: left;
width: 62px;
height: 55px;
}
.head-nav{
float: left;
width: 820px;
height: 88px;
padding: 13px 0 0 60px;
margin-top: 25px;
}
.head-nav span{
width: 127px;
padding-right: 15px;
cursor: pointer;
text-align: right;
color: #333;
font-size: 16px;
}
.head-search{
float: right;
height: 50px;
margin-top:25px;
position:relative;
}
.site-header a{
color: #fff;
text-decoration: none;
}
.search-form{
display: block;
height: 50px;
}
.header-search .search-form .search-text{
display: block;
width: 245px;
height: 50px;
line-height: 50px;
border: 1px solid #e0e0e0;
outline: 0;
}
.search-text{
right: 51px;
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
}
.search-btn{
right: 0;
top: 0;
width: 52px;
height: 50px;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
}
.search-text:hover{
border-color: black;
}
.header-search .search-form .search-btn{
display: block;
width: 52px;
height: 50px;
border: 1px solid #e0e0e0;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
outline: 0;
}
.search-btn:hover{
color: #fff;
background-color: orange;
}
.head-nav span:hover{
color: orange;
}

.seckill{
background: #f5f5f5;
margin-top: 20px;
}
.seckill-head{
background: url(img/01.jpg) 50% 0 no-repeat;
height: 170px;
}
.seckill-banner{
background-color: #414141;
height: 68px;
margin-bottom: 22px;
width: 1226px;
margin: -68px auto 0;
}
.seckill-banner ul{
width: 100%;
overflow: hidden;
height: 68px;
background-color: #414141;
}
.seckill-banner li{
width: 20%;
cursor: pointer;
line-height: 68px;
height: 68px;
text-align: center;
float: left;
list-style: none;
}
.active{
background: #f1393a;
}
.seckill-banner a{
color: #fff;
text-decoration: none;
cursor: pointer;
}
.seckill-banner em{
display: inline-block;
margin-left: 20px;
font-size: 18px;
font-style: normal;
line-height: 1;
vertical-align: middle;
}
.seckill-banner span em{
display: inline-block;
margin-left: 15px;
text-align: left;
line-height: 1.5;
vertical-align: middle;
font-size: 14px;
}

/商品/

.seckillCon ul{
list-style: none;
}
.seckill-con{
width: 1226px;
margin: 0 auto;
padding-top: 20px;
}
.seckillCon ul{
margin-left: -13px;
}
.seckillCon ul li{
background: #fff;
width: 400px;
height: 190px;
margin-left: 13px;
margin-bottom: 13px;
float: left;
}

.img-com{
width: 190px;
height: 190px;
float: left;
margin-left: 0;
padding-top: 0;
background: #e9e9e9;
border: 0 none;
overflow: hidden;
}
.img-com .done{
width: 100%;
height: 190px;
display: block;
padding: 0 ;
border-style: none;

}
.pro-con{
margin-left: 25px;
padding-top: 30px;
position: absolute;
}
.pro-con .name{
font-size: 16px;
color: #333;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
line-height: 16px;
}
.desc{
margin-top: 10px;
color: rgba(0,0,0,0.54);
font-size: 12px;
line-height: 35px;
}
.price{
font-size: 16px;
color: #f1393a;
margin-top: 0px;
display: block;
}
.price del{
margin-left: 10px;
font-size: 12px;
color: rgba(0,0,0,0.54);
}
.callme{
margin-top: 14px;
font-size: 14px;
background-color: #83c44e;
background: #83c44e;
color: #fff;
width: 118px;
height: 28px;
line-height: 28px;
text-align: center;
display: block;
}
.callme:hover{
background-color: green;
}
.askme{
color: rgba(0,0,0,0.54);
font-size: 12px;
margin-top: 10px;
position: absolute;
}
.seckill-last{
font-size: 12px;
color: rgba(0,0,0,0.27);
margin:100px auto 35px;
width: 1226px;
}

.site-footer{
width: 1226px;
margin:0 auto;
}
.footer-servier{
border-bottom: 1px solid #e0e0e0;
}
.footer-service li{
float: left;
width: 19.8%;
height: 25px;
border-right: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
text-align: center;
list-style: none;
border-left: 0;
margin-top: 50px;
}
.footer-service a{
color: #616161;
text-decoration: none;
}
.footer-service .last{
border-right: 0;
}
.footer-service a:hover{
color: orange;
}

js代碼 （計(jì)時(shí)器）

var h = 1,
m=59,
s=0;
t=0;
setInterval(function(){
h--;
s--;
t++;
if(h<=0){
h=0;
}
if(s<=0){
s=59;
}
if(t>=2&&s<=0){
m--;
}
document.getElementById("hour").innerHTML = "00"+":";
document.getElementById("min").innerHTML = m+":";
document.getElementById("fen").innerHTML = s;
},1000);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 不會(huì)用代碼框，所以看著有些亂套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個(gè)帥氣的名字閱讀 1,922評(píng)論 0贊 0
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 2,015評(píng)論 0贊 1
  • 1、垂直對(duì)齊 如果你用CSS，則你會(huì)有困惑：我該怎么垂直對(duì)齊容器中的元素？現(xiàn)在，利用CSS3的Transform，...
    kiddings閱讀 3,311評(píng)論 0贊 11
  • 【患難見(jiàn)真情】煜茗早上來(lái)了又吐又拉。同位鴻雷跑前跑后，陪他在廁所吐，陪他在廁所蹲坑，陪他等媽媽。平常兩人嬉笑怒罵，...
    向著明亮那方的我們閱讀 524評(píng)論 1贊 7
  • 今天要告訴你的是學(xué)習(xí)沒(méi)有界限。首先解釋一下從高中開始，就已經(jīng)分為了文科和理科，大學(xué)又進(jìn)一步的細(xì)化了你所學(xué)習(xí)的專業(yè)...
    閆慧龍閱讀 398評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容