京东秒杀功能HTML源码展示

实例

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>京东秒杀功能HTML源码展示</title><linkrel="stylesheet"href="static/css/index.css"><linkrel="stylesheet"href="static/icon-font/iconfont.css"></head><body><!--页眉--><divclass="header"><!--搜索框左侧菜单按钮--><divclass="menuiconfonticon-menu"></div><!--搜索框--><divclass="search"><divclass="logo">JD</div><divclass="zoomiconfonticon-search"></div><inputtype="text"value=""placeholder="特价品牌手表"class="words"></div><!--登录按钮--><ahref="#"class="login">登录</a></div><!--主体部分--><divclass="main"><!--主导航区--><ulclass="nav"><li><ahref=""><imgsrc="static/images/dh/nav-1.png"alt=""></a><ahref="">京东超市</a></li><li><ahref=""><imgsrc="static/images/dh/nav-2.png"alt=""></a><ahref="">数码电器</a></li><li><ahref=""><imgsrc="static/images/dh/nav-3.png"alt=""></a><ahref="">京东服饰</a></li><li><ahref=""><imgsrc="static/images/dh/nav-4.png"alt=""></a><ahref="">京东生鲜</a></li><li><ahref=""><imgsrc="static/images/dh/nav-5.png"alt=""></a><ahref="">京东到家</a></li><li><ahref=""><imgsrc="static/images/dh/nav-6.png"alt=""></a><ahref="">充值缴费</a></li><li><ahref=""><imgsrc="static/images/dh/nav-7.png"alt=""></a><ahref="">9.9元拼</a></li><li><ahref=""><imgsrc="static/images/dh/nav-8.png"alt=""></a><ahref="">领卷</a></li><li><ahref=""><imgsrc="static/images/dh/nav-9.png"alt=""></a><ahref="">领金贴</a></li><li><ahref=""><imgsrc="static/images/dh/nav-10.png"alt=""></a><ahref="">PLUS会员</a></li></ul><!--秒杀区域--><divclass="ms"><!--秒杀头部--><divclass="ms-top"><divclass="left"><divclass="title">京东秒杀</div><divclass="notice"><divclass="tips">12点专场</div><divclass="time">00:55:11</div></div></div><divclass="right">更多秒杀</div></div><!--秒杀主体区--><ulclass="ms-body"><liclass="item"><ahref=""><imgsrc="static/images/ms/ms-1.jpg"alt=""></a><divclass="iconfonticon-rmb">200</div><divclass="iconfonticon-rmb">558</div></li><liclass="item"><ahref=""><imgsrc="static/images/ms/ms-2.jpg"alt=""/></a><divclass="iconfonticon-rmb">88</div><divclass="iconfonticon-rmb">258</div></li><liclass="item"><ahref=""><imgsrc="static/images/ms/ms-3.jpg"alt=""/></a><divclass="iconfonticon-rmb">588</div><divclass="iconfonticon-rmb">999</div></li><liclass="item"><ahref=""><imgsrc="static/images/ms/ms-4.jpg"alt=""/></a><divclass="iconfonticon-rmb">888</div><divclass="iconfonticon-rmb">1234</div></li></ul></div></div><divclass="footer"><div><!--上面图标--><divclass="iconfonticon-home"></div><!--下面文字--><span>首页</span></div><div><!--上面图标--><divclass="iconfonticon-menu"></div><!--下面文字--><span>分类</span></div><div><!--上面图标--><divclass="iconfonticon-layers"></div><!--下面文字--><span>京喜</span></div><div><!--上面图标--><divclass="iconfonticon-shopping-cart"></div><!--下面文字--><span>购物车</span></div><div><!--上面图标--><divclass="iconfonticon-user"></div><!--下面文字--><span>未登录</span></div></div></body></html>

index.css

margin:0;padding:0;box-sizing:border-box;}a{/*去掉a的下划线*/text-decoration:none;color:#7b7b7b;}li{list-style:none;}body{background-color:#f6f6f6;}/*:root===html*/:root{/*字号是可继承的属性,为了后面使用rem*/font-size:10px;}body{/*font-size:16px;*//*16px=1.6*10px*//*10px==1rem*/font-size:1.6rem;}@mediascreenand(min-width:480px){:root{font-size:12px;}}@mediascreenand(min-width:640px){:root{font-size:14px;}}@mediascreenand(min-width:720px){:root{font-size:16px;}}.header{background-color:#e43130;color:#fff;height:4.4rem;position:fixed;left:0;top:0;right:0;}.main{position:absolute;top:4.4rem;left:0;right:0;min-width:auto;}.footer{background-color:#ccc;color:#fff;height:4.4rem;position:fixed;left:0;right:0;bottom:0;}/*headercss*/.header{display:flex;align-items:center;}.header.menu{flex:1;font-size:2.5rem;text-align:center;}.header.search{flex:6;background-color:white;border-radius:3rem;padding:0.5rem;display:flex;}.header.search.logo{color:#e43130;flex:014rem;font-size:2rem;text-align:center;line-height:2rem;}.header.search.zoom{color:#ccc;font-size:2rem;flex:014rem;text-align:center;line-height:2rem;border-left:1pxsolid;}/*右边登录*/.header.login{flex:1;color:white;text-align:center;}.header.search.words{flex:auto;border:none;outline:none;color:#aaa;}/*底部CSS*/.footer{display:flex;justify-content:space-around;align-items:center;color:#666;background-color:#eee;box-shadow:006px#aaa;}/*flex支持嵌套布局，flex项目本身也可以是一个flex容器，它内部的子元素也可以使用flex布局*/.footerdiv{display:flex;flex-flow:columnnowrap;align-items:center;}.footerdiv:hover{cursor:pointer;}.footer>div>.iconfont{font-size:2rem;}.footer>div>span{font-size:1rem;}/*搜索框左边NAVCSS*/.main.navimg{height:4rem;width:4rem;}.main.nav{/*border:1pxsolid;*/padding:1rem;display:flex;flex-flow:rowwrap;}.main.navli{flex:1120%;display:flex;flex-flow:columnwrap;align-items:center;}/*秒杀CSS*/.main.ms{background-color:#fff;/*border:1pxsolid#000;*/padding:1rem;margin:1rem0;}/*头部*/.main.ms.ms-top{font:1.3rem;height:3rem;display:flex;justify-content:space-between;}/*头部的左*/.main.ms.ms-top.left{display:flex;}.main.ms.ms-top.left.notice{display:flex;height:2rem;font-size:1.1rem;border:1pxsolid#e43130;border-radius:2rem;justify-content:center;align-items:center;}.main.ms.ms-top.left.notice.tips{background-color:#e43130;color:#fff;border-radius:2rem;padding:0.3rem0.5rem;}.main.ms.ms-top.right{color:#e43130;font-size:1.2rem;}/*秒杀主体区*/.main.ms.ms-body{display:flex;justify-content:space-between;}/*图片与价格居中对齐*/.main.ms.ms-body.item{/*display:flex;flex-flow:columnnowrap;align-items:center;*/text-align:center;}.main.ms.ms-body.itemimg{height:8rem;width:8rem;}/*当前秒杀价*/.main.ms.ms-body.itemdiv:first-of-type{color:#e43130;font-weight:bolder;}/*原价*/.main.ms.ms-body.itemdiv:last-of-type{color:#666;text-decoration-line:line-through;text-decoration-color:#666;}

实例

更多相关文章

随机推荐