2018-10-27

作者: 一曲一人听 | 来源:发表于2018-10-27 15:19 被阅读0次

这么多年你都去哪里了
Johnson的ScalersTalk第四轮新概念朗读持续力训练
萨莎的ScalersTalk第四轮新概念朗读持续力训练Day5
Artemis的Scalers Talk第四轮新概念朗读持续力训
小程序复盘
忆梅☕️明朗的清晨
今日分享
#阿达复盘#第23期北京香蕉船书友会
#阿达复盘#第23期北京香蕉船书友会
森森早餐

小米闪购商城的基本结构还原

原图1.png

原图2.png

制作1.png

制作2.png

html代码
<!DOCTYPE html>
<html>
<head>
<title>小米闪购-小米商城</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>|
<a href="#">MIUI</a>|
<a href="#">IoT</a>|
<a href="#">云服务</a>|
<a href="#">金融</a>|
<a href="#">有品</a>|
<a href="#">小爱开放平台</a>|
<a href="#">政企服务</a>|
<a href="#">下载app</a>|
<a href="#">Select Region</a>
</div>
<div class="topbar-cart">
<a href="#">购物车
(0)
</a>
</div>
<div class="topbar-info">
<a href="#">登录</a>|
<a href="#">注册</a>|
<a href="#" class="xiaoxi">消息通知</a>
</div>
</div>
</div>
<div class="site-header">
<div class="container">
<div class="head-logo">
<a href="https://www.mi.com/index.html" class="logo" title="小米商城">mi</a>
</div>
<div class="head-nav">
全部商品分类
小米手机
红米
电视
笔记本
空调
新品
路由器
智能硬件
服务
社区
</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="#">
18:00


抢购中

距离结束
01:
00:
00
<script type="text/javascript" src="js.js"></script>


</a>
</li>
<li>
<a href="#">
20:00


即将开始


</a>
</li>
<li>
<a href="#">
22:00


即将开始


</a>
</li>
<li>
<a href="#">
00:00


明日开始


</a>
</li>
<li>
<a href="#">
10:00


明日开始


</a>
</li>
</ul>
</div>
<div class="seckill-con">

<ul>
<li>
<a href="#">

<img src="img/01.png" class="done">


小米头戴式耳机
好声音，伴你整个青春

9.90元
<del>199元</del>

提醒我
已有27018人设置提醒

</a>
</li>
<li>
<a href="#">

<img src="img/02.png" class="done">


米家驱蚊器白色
长效驱蚊静享一整个夏天

1.00元
<del>59元</del>

提醒我
已有27018人设置提醒

</a>
</li>
<li>

<img src="img/03.png" class="done">


小米指环支架银色
钻进手机的小“圈套”

1.00元
<del>19元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/04.jpg" class="done">


小米手环2腕带绿色
多彩腕带出色生活

16.90元
<del>19.9元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/05.jpg" class="done">


九号平衡车白色
年轻人的酷玩具

1949.00元
<del>1999元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/06.jpg" class="done">


小米移动电源
大容量，一个就够用

119.00元
<del>129元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/07.jpg" class="done">


小米多功能都市休闲胸...
装下你出行的所有需求

59.00元
<del>69元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/08.jpg" class="done">


天然气报警器
安全保障持续“在线”

179.00元
<del>100元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/09.jpg" class="done">


米兔积木矿山卡车白色
小零件，拼接出大乐趣

89.00元
<del>99元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/10.jpg" class="done">


米家空气净化器
净化室内空气看不见的细菌

139.00元
<del>159元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/11.jpg" class="done">


小米净水器
有效滤除抗生素，重金属，细菌

469.00元
<del>499元</del>

提醒我
已有27018人设置提醒

</li>
<li>

<img src="img/12.jpg" class="done">


小米路由器
全新一代智能家庭中心

398.00元
<del>499元</del>

提醒我
已有27018人设置提醒

</li>
</ul>

</div>
<div class="seckill-last">
*小米闪购活动规则：小米闪购商品不享受该商品在小米商城的其他优惠政策（包括但不限于优惠券、赠品、满减、满赠等）

温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。
</div>
</div>
</div>
<div class="site-footer">
<div class="container">
<div class="footer-service">
<ul>
<li>
<a href="#">预约维修服务</a>
</li>
<li>
<a href="#">7天无理由退货</a>
</li>
<li>
<a href="#">15天免费换贷</a>
</li>
<li>
<a href="#">满150元包邮</a>
</li>
<li class="last">
<a href="#">520余家售后网点</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代码（计时器）

这么多年你都去哪里了
这么多年了你都去哪里了～ 2018-10-27 乌鲁木齐
Johnson的ScalersTalk第四轮新概念朗读持续力训练
练习材料： [Day 20 2018-10-27] Lesson20 One man in a boat Fish...
萨莎的ScalersTalk第四轮新概念朗读持续力训练Day5
练习材料： [Day 1492 2018-10-27] Lesson20One man in a boat Fis...
Artemis的Scalers Talk第四轮新概念朗读持续力训
练习材料： [Day 1492 2018-10-27] Lesson20 One man in a boat Fi...
小程序复盘
时间：2018-10-27 至 2018-11-2 时间轴： 2018-10...
忆梅☕️明朗的清晨
迎着晨曦出门月儿身后给我送行于是我拥抱了日月明朗忆梅2018-10-27
今日分享
焦点网络初级11期（信阳）刘鸿梅 2018-10-27 周六坚持分享第81天
#阿达复盘#第23期北京香蕉船书友会
主题：阅读带来的改变/说书分享时间:2018-10-27 16:30-18:30 地点:茵味茶...
#阿达复盘#第23期北京香蕉船书友会
主题：阅读带来的改变/说书分享时间:2018-10-27 16:30-18:30 地点:茵味茶...
森森早餐
2018-10-27 森森早餐＃早餐要吃好＃芝麻鸡蛋牛奶/煎饼/洋葱西葫芦吃的好，心情好。周末愉快！