标签：
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> | |
| <title>京东首页</title> | |
| <link rel="stylesheet" href="base.css"/> | |
| <link rel="stylesheet" href="index.css"/> | |
| </head> | |
| <body> | |
| <!--主体容器--> | |
| <div class="jd_layout"> | |
| <!--收索部分--> | |
| <header class="jd_header"> | |
| <div class="jd_header_box"> | |
| <a href="javascript:;" class="icon_logo"></a> | |
| <!--固定格式 在移动端可以调用出虚拟键盘 带有搜索按钮--> | |
| <form action="#"> | |
| <span class="icon_search"></span> | |
| <input type="search" placeholder="小依一"/> | |
| </form> | |
| <a href="javascript:;" class="login">登录</a> | |
| </div> | |
| </header> | |
| <!--轮播图--> | |
| <div class="jd_banner"> | |
| <ul class="clearfix"> | |
| <li><a href="javascript:;"><img src="images/l8.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l1.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l2.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l3.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l4.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l5.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l6.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l7.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l8.jpg" /></a></li> | |
| <li><a href="javascript:;"><img src="images/l1.jpg" /></a></li> | |
| </ul> | |
| <ul> | |
| <li class="now"></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <!-- 导航栏--> | |
| <nav class="jd_nav"> | |
| <ul class="clearfix"> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav0.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav1.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav2.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav3.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav4.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav5.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav6.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/nav7.png" /> | |
| <p>分类</p> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- 内容部分--> | |
| <main class="jd_product"> | |
| <section class="jd_product_box"> | |
| <div class="jd_product_tit no_border"> | |
| <div class="f_left mL10"> | |
| <span class="sk_icon"></span> | |
| <span class="sk_name">掌上秒杀</span> | |
| <div class="sk_time"> | |
| <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 mR10"> | |
| <a href="javascript:;">更多></a> | |
| </div> | |
| </div> | |
| <div class="jd_product_con"> | |
| <ul class="clearfix sk_product"> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/detail01.jpg" /> | |
| </a> | |
| <p class="new_price">¥10.00</p> | |
| <p class="old_price">¥1000.00</p> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/detail02.jpg" /> | |
| </a> | |
| <p class="new_price">¥10.00</p> | |
| <p class="old_price">¥1000.00</p> | |
| </li> | |
| <li> | |
| <a href="javascript:;"> | |
| <img src="images/detail01.jpg" /> | |
| </a> | |
| <p class="new_price">¥10.00</p> | |
| <p class="old_price">¥1000.00</p> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section class="jd_product_box"> | |
| <div class="jd_product_tit"><h3>京东超市</h3></div> | |
| <div class="jd_product_con clearfix"> | |
| <a class="w50 b-right f_left" href="javascript:;"><img src="images/cp1.jpg" /></a> | |
| <a class="w50 b_bottom f_right" href="javascript:;"><img src="images/cp2.jpg" /></a> | |
| <a class="w50 f_right" href="javascript:;"><img src="images/cp3.jpg" /></a> | |
| </div> | |
| </section> | |
| <section class="jd_product_box"> | |
| <div class="jd_product_tit"><h3>京东超市</h3></div> | |
| <div class="jd_product_con clearfix"> | |
| <a class="w50 b-right f_right " href="javascript:;"><img src="images/cp4.jpg" /></a> | |
| <a class="w50 b_bottom f_left" href="javascript:;"><img src="images/cp5.jpg" /></a> | |
| <a class="w50 f_left" href="javascript:;"><img src="images/cp6.jpg" /></a> | |
| </div> | |
| </section> | |
| <section class="jd_product_box"> | |
| <div class="jd_product_tit"><h3>京东超市</h3></div> | |
| <div class="jd_product_con clearfix"> | |
| <a class="w50 b-right f_left" href="javascript:;"><img src="images/cp1.jpg" /></a> | |
| <a class="w50 b_bottom f_right" href="javascript:;"><img src="images/cp2.jpg" /></a> | |
| <a class="w50 f_right" href="javascript:;"><img src="images/cp3.jpg" /></a> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script src="js/commen.js"></script> | |
| <script src="js/index.js"></script> | |
| </body> | |
| </html> |
标签：
原文地址：http://www.cnblogs.com/grf0529/p/5962409.html
