网页编写练习小米闪购

https://www.mi.com/seckill/

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>小米闪购 - 小米商城</title><link rel="shortcut icon" href="img/favicon.ico"/><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/iconfont/iconfont.css" /></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="">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="">Select Region</a></div><div class="topbar-cart"><a href=""><i class="iconfont"></i>购物车<span>（0）</span></a></div><div class="topbar-info clearfix"><a href="">登录</a><span>|</span><a href="">注册</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div><div class="herder"><div class="container"><div class="header-logo"><a href="" class="lr">小米官网</a></div><div class="header-nav"><!--ul>li.nav-item*11>a--><ul class="nav-list clearfix"><li class="nav-category"><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><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="header-search"><form action="" class="search-form"><input type="text" name="key-word" class="search-text"/><input type="submit" value="" class="search-btn iconfont"/></form></div></div></div>    <div class="seckill"><div class="seckill-head"></div><div class="container"><div class="seckill-nav"><ul><li class="active"><em>00:00</em><span><em>即将开始<br>距开始 00:36:41</em></span></li><li><em>10:00</em><span>明日开始</span> </li>    <li><em>12:00 </em><span>明日开始</span></li><li><em>18:00 </em><span>明日开始</span></li><li><em>20:00 </em><span>明日开始</span></li></ul></div>    </div></div></body>
</html>

View Code

body,ul,li{margin: 0;padding: 0;
}
body{font:14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
ul{list-style-type: none;
}
a{text-decoration: none;
}
.topbar{background: #333;/*border: 1px solid black;*/height: 40px;
}
.container{margin: 0 auto;/*border: 1px solid red;*/width: 1226px;
}
.container::before,.container::after,
.clearfix::before,.clearfix::after{content: "";display: table;
}
.container::after{clear: both;
}
.topbar a{color: #b0b0b0;font-size: 12px;
}
.topbar a:hover{color: #fff;
}.topbar-nav{float: left;height: 40px;line-height: 40px;font-size: 0;}
.topbar-nav span{font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em;
}
.topbar-info{float: right;margin-right: 15px;
}
.topbar-cart{float: right;
}.topbar-cart a{display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242;
}
.topbar-cart a:hover{color:#ff6700;background-color: #fff;
}
.topbar-cart span{margin-left: -4px;font-size: 12px;}
.topbar-cart i{font-size: 20px;line-height: 20px;margin-right: 4px;vertical-align: -4px;
}
.topbar-info a{float: left;padding: 0 5px;line-height: 40px;height: 40px;
}.topbar-info span{float: left;font-size: 12px;color:#424242;font-family: sans-serif;line-height: 40px;height: 40px;
}
.topbar-info .sep{padding: 0 10px;
}.herder{height: 100px;
}
.header-logo{float: left;width: 62px;/*height: 55px;*/margin-top: 22px;/*border: 1px solid red;*/
}
.header-logo a{display: block;width: 55px;height: 55px;background:#FF6700 url(../img/logo.png) no-repeat 50% 50% ;
}
.header-logo a.lr{text-align: left;text-indent: -1999em;
}
.header-nav{float: left;width: 820px;height: 100px;/*border: 1px solid red;*/
}
.header-nav .nav-list{width: 820px;height: 88px;font-size: 16px;padding: 12px 0 0 30px;
}
.header-nav .nav-list .nav-category{float: left;}
.header-nav .nav-list .nav-category a{display: block;text-align: right;padding: 26px 0 38px;color: #333;
}
.header-nav .nav-list .nav-category a:hover{/*background-color: #FF6700;color: #fff;*/
}
.header-nav .nav-list .nav-item{float: left;
}
.header-nav .nav-list .nav-item a{display: block;padding: 26px 10px 38px;color: #333;
}
.header-nav .nav-list .nav-item a:hover{color: #FF6700;
}.header-search{float: right;width: 296px;height: 50px;margin-top: 25px;/*border: 1px solid red;*/
}
.header-search .search-form{position: relative;display: block;width: 296px;height: 50px;
}
.header-search .search-form .search-text{position: absolute;top: 0px;right: 51px;display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #101010;outline: 0;
}
.header-search .search-form .search-btn{position: absolute;top: 0;right: 0;display: block;width: 52px;height: 54px;border: 1px solid #101010;font-size: 24px;line-height: 24px;background: #fff;color: #616161;}
.header-search .search-form .search-btn:hover{background-color: #FF6700;color: #fff;
}
.seckill{background-color: #f5f5f5;
}
.seckill-head{margin-top: 19px;height: 170px;background: url(../img/seckill-head.jpg) no-repeat 50% 0;}
.seckill-nav{margin: -68px 0 22px;
}
.seckill-nav ul{height: 68px;background-color: #414141;
}
.seckill-nav li{display: block;float: left;color: #FFF;width: 20%;height: 68px;line-height: 68px;text-align: center;cursor: pointer;
}
.seckill-nav li em{display: inline-block;margin-left: 30px;font-style: normal;font-size: 18px;line-height: 1;vertical-align: middle;
}
.seckill-nav li span{display: inline-block;margin-left: 15px;text-align: left;line-height: 1;vertical-align: middle;font-size: 14px;
}
.seckill-nav .active{background-color: #f1393a;
}
.seckill-nav ul li span em{display: inline-block;font-size: 14px;margin: 0;font-style: normal;text-align: left;line-height: 20px;
}

View Code

转载于:https://www.cnblogs.com/Mengchangxin/p/9788892.html

网页编写练习小米闪购相关推荐

做xx闪购网站准备工作
1. 创建文件夹cc -->cc中创建 css,img,js 文件夹与 index.html文件: 2.在 css 文件夹-->创建文本文档--> 重命名为 style.cs ...
小米在英国的1英镑闪购活动凸显其不熟悉欧洲市场
在印度市场大获成功,让小米的信心膨胀了,其在今年开始强势进军欧洲市场,希望在该市场取得同样的成功,然而近日小米在英国的1英镑闪购活动惹怒英国消费者却凸显出这家企业不熟悉欧洲市场. 欧洲市场与新兴市场不 ...
“闪购”神话的牛皮吹出了泡沫
昨天创业家杂志一篇<神秘公司"闪购"估值百亿调查>亮瞎了众多人的"势利眼",很多电商公司对这家突然估值"百亿"的公司投去羡慕嫉妒 ...
网站网页编写需要注意哪些问题？
在网站建设过程中对网页的制作必须按照一定的步骤进行制作,这样才不会显得网站页面太过杂乱,以便根据网站建设的习惯性制作好网页以及素材图片融合等内容.那么在网站页面制作的过程中需要注意哪些问题呢?下面就为 ...
Bifrost微前端框架及其在美团闪购中的实践
Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...
提交数据网页设计_网站网页编写需要注意哪些问题？
在网站建设过程中对网页的制作必须按照一定的步骤进行制作,这样才不会显得网站页面太过杂乱,以便根据网站建设的习惯性制作好网页以及素材图片融合等内容.就以大连网龙科技旗下产品云霸屏为例来讲,云霸屏作为一款 ...
闪购网站Gilt从Rails迁移到Scala
闪购网站Gilt.com是一个新生的电子商务模式,其特点是在几秒钟内流量爆棚100倍,每天大概持续15分钟,这家网站的首席架构师Eric Bowman谈了如何从Ruby On Rails迁移到Scal ...
PHP版本美团闪购开放平台sdk
对接美团闪购开放平台美团闪购开放平台只有java的sdk,特此封装php板sdk 美团闪购平台开发文档:https://open-shangou.meituan.com/home/doc/marke ...
小荷特卖：切中女装童装品类、聚焦三线以下城镇市场的闪购平台
说到闪购模式的电商,国外比较有名的有Gilt(唯品会的师傅).Amazon旗下的Myhabit.专注母婴市场的Zulily.前阵子刚爆出被收购传闻的Fab等.而在国内,闪购做的好的可能要数唯品会.聚美 ...
HTML/JSP/CSS网页编写实例，附源码
最近在刚接触web前端,学习网页编写,虽然网上案例很多但是实战起来还是问题很多,经过不懈努力终于完成了一个简单的web页面,在此记录一下,分享源码大家共同学习. 最终效果如下: 如上图所示整个页面有5 ...

网页编写练习小米闪购

网页编写练习小米闪购相关推荐

最新文章

热门文章

网页编写练习 小米闪购

网页编写练习 小米闪购相关推荐

最新文章

热门文章

网页编写练习小米闪购

网页编写练习小米闪购相关推荐