<!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> |
时间: 2024-11-03 22:36:19