百度首页

京东首页布局与交互实现

最新推荐文章于 2022-03-21 15:57:18 发布

转载最新推荐文章于 2022-03-21 15:57:18 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/grf0529/p/5962409.html

文章标签：

#javascript #ViewUI

本文详细介绍了京东首页的设计布局及交互实现方式，包括搜索组件、轮播图、导航栏等核心元素的具体实现细节。

	<!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" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l1.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l2.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l3.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l4.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l5.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l6.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l7.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l8.jpg" alt=""/></a></li>
	<li><a href="javascript:;"><img src="images/l1.jpg" alt=""/></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" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav1.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav2.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav3.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav4.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav5.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav6.png" alt=""/>
	<p>分类</p>
	</a>
	</li>
	<li>
	<a href="javascript:;">
	<img src="images/nav7.png" alt=""/>
	<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" alt=""/>
	</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" alt=""/>
	</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" alt=""/>
	</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" alt=""/></a>
	<a class="w50 b_bottom f_right" href="javascript:;"><img src="images/cp2.jpg" alt=""/></a>
	<a class="w50 f_right" href="javascript:;"><img src="images/cp3.jpg" alt=""/></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" alt=""/></a>
	<a class="w50 b_bottom f_left" href="javascript:;"><img src="images/cp5.jpg" alt=""/></a>
	<a class="w50 f_left" href="javascript:;"><img src="images/cp6.jpg" alt=""/></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" alt=""/></a>
	<a class="w50 b_bottom f_right" href="javascript:;"><img src="images/cp2.jpg" alt=""/></a>
	<a class="w50 f_right" href="javascript:;"><img src="images/cp3.jpg" alt=""/></a>
	</div>
	</section>
	</main>
	</div>
	<script src="js/commen.js"></script>
	<script src="js/index.js"></script>
	</body>
	</html>