HTML5期末大作业：网页网站设计——仿京东首页(1页) HTML+CSS+JS网页设计期末课程大作业 web前端开发技术
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>电商网上商城</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/global.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jsstyle.js"></script>
</head>
<body>
<div id="top">
<div id="top_main">
<ul class="topu">
<li>
<div class="xing"></div>
<a href="">收藏电商</a> </li>
<li class="xuan">
<div class="erwei"></div>
<a href="" class="aa">关注电商
<div class="erweitu"></div>
</a> </li>
<li>
<div class="didian"></div>
<strong style="padding-left: 20px">北京</strong><a href="" style="padding-left: 0px">[更换]</a> </li>
</ul>
<div id="hello"> <span>您好，欢迎来到电商！ <a href="">[登陆]</a><a href="">[免费注册]</a> </span> </div>
<div class="topright">
<ul>
<li>
<div class="cun"> <a href="">我的订单</a> </div>
</li>
<li>
<div class="cun">
<div class="vip"></div>
<a href="">会员俱乐部</a> </div>
</li>
<li>
<div class="cun">
<div class="bjd"></div>
<a href="">企业频道</a> </div>
</li>
<li class="hidetu">
<div class="cun"> <a href="" class="dong">手机电商</a>
<div class="phonetu"></div>
<div class="downjian11"></div>
</div>
<div class="erwei">
<div class="shoudan"></div>
<div class="jd"></div>
<div class="span1"> <span>电商客户端</span> </div>
<div class="apple"></div>
<div class="andr"></div>
<div class="ewtu"></div>
<div class="span1"> <span>网银钱包客户端</span> </div>
<div class="apple"></div>
<div class="andr"></div>
</div>
</li>
<li class="kefu">
<div class="cun">
<div class="a1">
<div class="kefuhide"> <span>客户服务</span>
<div class="downjian1"></div>
<ul>
<li><a href="">帮助中心</a></li>
<li><a href="">售后服务</a></li>
<li><a href="">在线客服</a></li>
<li><a href="">投诉中心</a></li>
<li><a href="">客服邮箱</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="wangzhan">
<div class="cun"> <span>网站导航</span>
<div class="downjian1"></div>
</div>
<div class="wangzhanhide">
<div class="tese"><span>特色栏目</span></div>
<div class="tesemain"> <a href="">电商通信</a> <a href="">校园之星</a> <a href="">视频购物</a> <a href="">电商社区</a> <a href="">在线读书</a> <a href="">装机大师</a> <a href="">电商E卡 </a> <a href="">家装城</a> <a href="">搭配购 </a> <a href="">我喜欢 </a> <a href="">游戏社区</a> </div>
<div class="tese"><span>企业服务</span></div>
<div class="tesemain1"> <a href="">企业采购</a> <a href="">办公直通车</a> </div>
<div class="tese"><span>旗下网站</span></div>
<div class="tesemain2"> <a href="">English Site</a> </div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="serach">
<div class="logo"> <img src="images/logo.png" alt="" />
<div class="dongtu"></div>
</div>
<div class="sou">
<div class="sousuo">
<input type="text" class="kuang" value="跨界" style="color:#999;font-size:14px" />
<div class="souzi"><a href="">搜索</a></div>
</div>
<div class="reci"> <span>热门搜索:</span> <a href="" style="color:red">校园之星</a> <a href="">影院到家</a> <a href="">JD制暖节</a> <a href="">腕表领券</a> <a href="">自营满减</a> <a href="">N3抢购</a> <a href="">图书换购</a> <a href="">12.12</a> </div>
</div>
<div class="myjd">
<div class="mytu"></div>
<a href="">我的电商</a>
<div class="jiantou"></div>
<div class="myjdhide">
<div class="hello"> <span>您好，请</span> <a href="">登录</a> </div>
<div class="hey">
<div class="heyleft">
<ul>
<li><a href="">待处理订单</a></li>
<li><a href="">咨询回复</a></li>
<li><a href="">降价商品</a></li>
<li><a href="">返修退换货</a></li>
<li><a href="">优惠券</a></li>
</ul>
</div>
<div class="heyright">
<ul>
<li><a href="">我的关注></a></li>
<li><a href="">我的京豆></a></li>
<li><a href="">我的理财></a></li>
<li><a href="">我的白条></a></li>
</ul>
</div>
</div>
<div class="hidebot">
<div class="bottop"> <span>最近浏览的商品:</span> <a href="">查看浏览历史></a> </div>
<div class="botdown"> <span>「暂无数据」</span> </div>
</div>
</div>
</div>
<div class="gouwuche">
<div class="chetu"></div>
<a href="">去购物车结算</a>
<div class="jianleft"></div>
<div class="num">
<div class="numright"></div>
<div class="numzi"><span>0</span></div>
</div>
<div class="hideche">
<div class="kongche"></div>
<span>购物车中还没有商品，赶紧选购吧！</span> </div>
</div>
<div class="jubao"></div>
</div>
<div id="daohang">
<div class="dhleft">
<a href="">全部商品分类</a>
<div class="erjimenu">
<ul>
<li class="li1">
<div class="mulu"> <a href="">图书</a>、 <a href="">音像</a>、 <a href="">数字商品</a>
<div class="jian"></div>
<div class
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
