HTML5期末大作业：京东商城网站设计——京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）
文章目录
HTML5期末大作业：京东商城网站设计——京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）一、作品展示二、文件目录三、代码实现四、获取更多源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" type="text/css" href="./css/css.css"><script type="text/javascript" src='js/jquery-1.7.2.min.js'></script><script type="text/javascript">$(function(){$('.nav_mini ul li').hover(function(){$(this).find('.two_nav').show(100);},function(){$(this).find('.two_nav').hide(100);})$('.left_nav').hover(function(){$(this).find('.nav_mini').show(100);},function(){$(this).find('.nav_mini').hide(100);})})</script></head><body><div class="top"><div class="top_text"><a href="">用户登录</a><a href="">用户注册</a><a href="">供应商登录</a><a href="">供应商注册</a></div></div><div class="top_img"><img src="./images/top_img.jpg" alt=""></div><div class="search"><div class="logo"><img src="./images/logo.jpg" alt=""></div><div class="search_on"><div class="se"><input type="text" name="search" class="lf"><input type="submit" class="clik" value="搜索"></div><div class="se"><a href="">取暖神奇</a><a href="">1元秒杀</a><a href="">吹风机</a><a href="">玉兰油</a></div></div><div class="card"><a href="">购物车<div class="num">0</div></a></div></div><div class="menu"><div class="nav"><div class="navs"><div class="left_nav">全部商品分类<div class="nav_mini" style="display:none"><ul><li><a href="">家用电器</a><div class="two_nav"><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a><a href="">11111</a></div></li><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><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><li><a href="">营养保健</a></li><li><a href="">图书</a></li><li><a href="">彩票</a></li><li><a href="">理财</a></li></ul></div></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><li><a href="">团购</a></li><li><a href="">拍卖</a></li><li><a href="">金融</a></li><li><a href="">智能</a></li></ul></div></div></div><div class="Sscreen"><div class="title">平板电视 商品筛选 共1205个商品</div><div class="list"><span>品牌：</span><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a><a href="">乐视TV(Letv)</a></div><div class="list"><span>价格：</span><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a><a href="">0-1399</a></div></div><div class="Sbox"><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div><div class="list"><div class="img"><img src="images/img_4.jpg" alt=""></div><div class="price">¥65.00</div><div class="title">双箭 雅思两层带门收纳柜 整理柜储物柜书柜 木</div></div></div><div class="footer"><div class="top"></div><div class="bottom"><img src="images/foot.jpg" alt=""></div></div></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
