首页 > 代码库 > 百度首页

百度首页

2024-08-16 16:48:17   224人阅读

  <!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="http://www.mamicode.com/base.css"/>
  <link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/images/l8.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l1.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l2.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l3.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l4.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l5.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l6.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l7.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/images/l8.jpg" /></a></li>
  <li><a href="javascript:;"><img src="http://www.mamicode.com/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="http://www.mamicode.com/images/nav0.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav1.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav2.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav3.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav4.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav5.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/nav6.png" />
  <p>分类</p>
  </a>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/detail01.jpg" />
  </a>
  <p class="new_price">&yen;10.00</p>
  <p class="old_price">&yen;1000.00</p>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/detail02.jpg" />
  </a>
  <p class="new_price">&yen;10.00</p>
  <p class="old_price">&yen;1000.00</p>
  </li>
  <li>
  <a href="javascript:;">
  <img src="http://www.mamicode.com/images/detail01.jpg" />
  </a>
  <p class="new_price">&yen;10.00</p>
  <p class="old_price">&yen;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="http://www.mamicode.com/images/cp1.jpg" /></a>
  <a class="w50 b_bottom f_right" href="javascript:;"><img src="http://www.mamicode.com/images/cp2.jpg" /></a>
  <a class="w50 f_right" href="javascript:;"><img src="http://www.mamicode.com/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="http://www.mamicode.com/images/cp4.jpg" /></a>
  <a class="w50 b_bottom f_left" href="javascript:;"><img src="http://www.mamicode.com/images/cp5.jpg" /></a>
  <a class="w50 f_left" href="javascript:;"><img src="http://www.mamicode.com/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="http://www.mamicode.com/images/cp1.jpg" /></a>
  <a class="w50 b_bottom f_right" href="javascript:;"><img src="http://www.mamicode.com/images/cp2.jpg" /></a>
  <a class="w50 f_right" href="javascript:;"><img src="http://www.mamicode.com/images/cp3.jpg" /></a>
  </div>
  </section>
  </main>
  </div>
  <script src="http://www.mamicode.com/js/commen.js"></script>
  <script src="http://www.mamicode.com/js/index.js"></script>
  </body>
  </html>

百度首页


联系
我们