首页 > 代码库 > 京东首页静态页面
京东首页静态页面
预览效果
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="layout"> <header class="jd_header"> <div class="jd_header_box"> <a href="#" class="icon_logo"></a> <form action="#"> <span class="icon_search"></span> <input type="search" placeholder="提示站位"> </form> <a href="#" class="login">登录</a> </div> </header> <div class="jd_banner"> <ul class="clearfix"> <li><a href=""></a><img src="images/l8.jpg" alt=""></li> <li><a href=""></a><img src="images/l1.jpg" alt=""></li> <li><a href=""></a><img src="images/l2.jpg" alt=""></li> <li><a href=""></a><img src="images/l3.jpg" alt=""></li> <li><a href=""></a><img src="images/l4.jpg" alt=""></li> <li><a href=""></a><img src="images/l5.jpg" alt=""></li> <li><a href=""></a><img src="images/l6.jpg" alt=""></li> <li><a href=""></a><img src="images/l7.jpg" alt=""></li> <li><a href=""></a><img src="images/l8.jpg" alt=""></li> <li><a href=""></a><img src="images/l1.jpg" alt=""></li> </ul> <ul> <li class="now"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!--nav.jd_nav>ul>(li>a>img+p{分类查询})*8--> <nav class="jd_nav"> <ul class="clearfix"> <li><a href=""><img src="images/nav0.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav1.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav2.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav3.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav4.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav5.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav6.png" alt=""> <p>分类查询</p> </a></li> <li><a href=""><img src="images/nav7.png" alt=""> <p>分类查询</p> </a></li> </ul> </nav> <!--商品--> <main class="jd_product"> <section class="product_box jd_sk"> <div class="product_box_tit no_border"> <div class="f_left m_l10"> <span class="sk_icon"></span> <span class="sk_name m_l10">掌上秒杀</span> <div class="sk_time m_l10"> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> <span>:</span> <span>0</span> <span>0</span> </div> </div> <div class="f_right m_r10"><a href="">更多></a></div> </div> <div class="product_box_con"> <ul class="clearfix"> <li><a href=""><img src="images/detail01.jpg" alt=""></a> <p>¥10.00</p> <p>¥100.00</p> </li> <li><a href=""><img src="images/detail02.jpg" alt=""></a> <p>¥10.00</p> <p>¥100.00</p> </li> <li><a href=""><img src="images/detail01.jpg" alt=""></a> <p>¥10.00</p> <p>¥100.00</p> </li> </ul> </div> </section> <section class="product_box clearfix"> <div class="product_box_tit"><h3>京东超市</h3></div> <div class="product_box_con"> <a href="" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""></a> <a href=""><img class="f_right w_50 b_bottom" src="images/cp2.jpg" alt=""></a> <a href=""><img class="f_right w_50" src="images/cp3.jpg" alt=""></a> </div> </section> <section class="product_box clearfix"> <div class="product_box_tit"><h3>京东超市</h3></div> <div class="product_box_con"> <a href="" class="f_right w_50 b_left"><img src="images/cp4.jpg" alt=""></a> <a href="" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt=""></a> <a href="" class="f_left w_50"><img src="images/cp6.jpg" alt=""></a> </div> </section> <section class="product_box"> <div class="product_box_tit"><h3>京东超市</h3></div> <div class="product_box_con"> <a href="" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt=""></a> <a href=""><img class="f_right w_50 b_bottom" src="images/cp2.jpg" alt=""></a> <a href=""><img class="f_right w_50" src="images/cp3.jpg" alt=""></a> </div> </section> </main> </div> </body> </html>
index.css
.layout{ width:100%; max-width: 640px; min-width: 300px; margin:0 auto; position: relative; } .jd_header{ position: fixed; left: 0; top:0; height:40px; width:100%; z-index:1000; } .jd_header>.jd_header_box{ position: relative; width: 100%; max-width: 640px; min-width: 300px; margin:0 auto; background: rgba(201,21,35,0); height:40px; } .jd_header>.jd_header_box>.icon_logo{ width:60px; height:36px; position: absolute; /*background: url("../images/sprites.png") no-repeat;*/ /*background-size:200px 200px;*/ background-position: 0 -103px; top: 4px; left: 10px; } .jd_header>.jd_header_box>.login{ width: 50px; height: 40px; line-height:40px; text-align: center; color: #ffffff; position: absolute; right:0; top:0; font-size: 15px; } .jd_header>.jd_header_box>form{ width:100%; padding-left:75px; padding-right:50px; height:40px; position: relative; } .jd_header>.jd_header_box>form>input{ width:100%; height:30px; border-radius:15px; margin-top:5px; padding-left:34px; } .jd_header>.jd_header_box>form>.icon_search{ height:20px; width:20px; position: absolute; background-position: -60px -109px; top:10px; left:85px; } .jd_banner{ width: 100%; position: relative; overflow: hidden; } .jd_banner>ul:first-child{ width: 1000%; transform: translateX(-10%); -webkit-transform:translateX(-10%); } .jd_banner>ul:first-child>li{ width: 10%; float: left; } .jd_banner>ul:first-child>li>a{ width: 100%; display: block; } .jd_banner>ul:first-child>li>a>img{ width: 100%; display: block; } .jd_banner>ul:last-child{ width: 118px; position: absolute; height: 6px; bottom: 6px; left: 50%; margin-left: -59px; } .jd_banner>ul:last-child>li{ width: 6px; height: 6px; float: left; border-radius: 3px; border:1px solid #ffffff; margin-left: 10px; } .jd_banner>ul:last-child>li.now{ background: #ffffff; } .jd_banner>ul:last-child>li:nth-child(1){ margin-left: 0; } /*导航栏模块*/ .jd_nav{ width: 100%; background: #ffffff; border-bottom: 1px solid #e0e0e0; } .jd_nav>ul{ width: 100%; padding:10px 0; } .jd_nav>ul>li{ width: 25%; float: left; } .jd_nav>ul>li>a{ display: block; } .jd_nav>ul>li>a>img{ width: 40px; height: 40px; display: block; margin:0 auto ; } .jd_nav>ul>li>a>p{ text-align: center; color: #666666; font-size: 12px; padding: 6px 0; } /*商品主盒子*/ .jd_product{ padding:0 5px; } .jd_product>.product_box{ width: 100%; background: #ffffff; margin-top: 10px; box-shadow: 0 0 1px #e0e0e0; } .jd_product>.product_box>.product_box_tit{ height: 32px; line-height: 32px; border-bottom: 1px solid #e0e0e0; } .jd_product>.product_box>.product_box_tit.no_border{ border-bottom: none; } .jd_product>.product_box>.product_box_tit>h3{ font-weight: normal; font-size: 15px; padding-left: 20px; position: relative; color: #666666; } .jd_product>.product_box>.product_box_tit>h3::before{ content: ‘‘; position: absolute; top: 10px; left: 10px; width: 3px; height: 12px; background: #d8505c; } /*掌上秒杀*/ .jd_sk{} .jd_sk .sk_icon{ background:url("../images/seckill-icon.png") no-repeat; background-size:16px 20px; width: 16px; height: 20px; float: left; margin-top: 6px; } .jd_sk .sk_name { color: #d8505c; font-size: 15px; float: left; } .jd_sk .sk_time { float: left; margin-top: 8px; } .jd_sk .sk_time>span { float: left; width: 15px; height: 15px; line-height: 15px; text-align: center; background: #333333; color: #ffffff; margin-left: 3px; } .jd_sk .sk_time>span:nth-child(3n) { background: #ffffff; color: #333333; width: 5px; } .jd_sk .product_box_con>ul{ width: 100%; font-size: 12px; padding-top: 10px; } .jd_sk .product_box_con>ul>li{ width: 33.333%; float: left; text-align: center; } .jd_sk .product_box_con>ul>li>a{ display: block; width: 100%; border-right: 1px solid #e0e0e0; } .jd_sk .product_box_con>ul>li:last-child>a{ border-right:0; } .jd_sk .product_box_con>ul>li>a>img{ width: 64%; display: block; margin: 0 auto; } /*e:first-of-type 选择e同类型的同级的 第一个元素*/ /*e:last-of-type 选择e同类型的同级的 第一个元素*/ /*e:nth-of-type(n) 选择e同类型的同级的 第n个元素*/ .jd_sk .product_box_con>ul>li>p:first-of-type{ color:#d8505c; margin-top: 5px; margin-top: 5px; } .jd_sk .product_box_con>ul>li>p:last-of-type{ text-decoration: line-through; color: #666666; margin-top: 5px; } /*组合样式*/ .w_50{ width: 50%; display: block; } .w_50 >img{ display: block; width: 100%; } .b_left{ border-left:1px solid #e0e0e0; } .b_right{ border-right:1px solid #e0e0e0; } .b_bottom{ border-bottom:1px solid #e0e0e0; }
base.css
/*重置样式*/ *,::before,::after{ /*选择所有的标签*/ margin:0; padding:0; /*清楚移动端默认的 点击高亮效果*/ -webkit-tap-highlight-color:transparent; /*设置所有的都是以边框开始计算宽度 百分比*/ -webkit-box-sizing:border-box;/*兼容*/ box-sizing:border-box; } body{ font-size:14px; font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/ color:333; } a{ color:333; text-decoration:none;/*不显示下划线*/ } a:hover{ text-decoration:none;/*不显示下划线*/ } ul,ol{ list-style:none; } input{ border:none; outline:none; /*清除移动端默认的表单样式*/ -webkit-appearance:none; } /*公共样式*/ .f_left{ float:left; } .f_right{ float:right; } .clearfix::before,.clearfix::after{ content:""; height:0; line-height:0; display:block; visibility:hidden; clear:both; } [class^="icon_"]{ background: url("../images/sprites.png") no-repeat; background-size:200px 200px; } .m_l10{ margin-left: 10px; } .m_r10{ margin-right: 10px; } .m_b10{ margin-bottom: 10px; } .m_t10{ margin-top: 10px; }
box-shadow: 0 0 1px #e0e0e0;
.jd_sk .sk_time>span:nth-child(3n)
/*e:first-of-type 选择e同类型的同级的 第一个元素*/
/*e:last-of-type 选择e同类型的同级的 第一个元素*/
/*e:nth-of-type(n) 选择e同类型的同级的 第n个元素*/
.jd_sk .product_box_con>ul>li>p:first-of-type{
.clearfix::before,.clearfix::after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
京东首页静态页面
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。