DIV布局 京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）
2024-05-24 06:04:17
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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/foot.jpg" alt=""></div></div>
</body>
</html>四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
DIV布局 京东商城购物网站(4页) 基于Html+Css+javascript的网页制作（购物主题）相关推荐
- HTML5期末考核大作业：基于Html+Css+javascript的网页制作（化妆品公司网站制作）
- HTML5期末考核大作业：基于Html+Css+javascript的网页制作（化妆品公司网站制作）...
- HTML网页期末作业：基于Html+Css+javascript的网页制作（化妆品企业官网设计20页）...
- HTML网页期末作业：基于Html+Css+javascript的网页制作（化妆品企业官网设计20页）
- HTML5期末大作业：动漫网站设计——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计...
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- HTML5期末大作业：重庆火锅网站设计——代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业
HTML5期末大作业:重庆火锅网站设计--代码质量好-重庆火锅(5页) HTML+CSS+JavaScript 大学生网页制作期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- HTML5期末大作业：XXX 网站设计——电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业
HTML5期末大作业:XXX 网站设计--电影请以你的名字呼唤我(4页)HTML+CSS+JavaScript html网页制作期末大作业成品_网页设计期末作业 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：网上预订网站设计——火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业
HTML5期末大作业:网上预订网站设计--火车票网上预订网站(4个页面) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. ...
- 静态HTML网页设计作品——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 文章目录 HTML5期末大作业:动漫网站设计--火影忍者动漫(7页 ...
最新文章
- CSS3 Box-shadow 阴影效果用法
- 关于GPU-driver for linux的资料
- 快速找到Word 2007长文档的某一页
- 荣耀7x Android8,荣耀8/畅玩7X确认升级安卓8.0
- JAVA_IO流四大家族（2）
- PCB设计检查表( 布局后检查一次 ； 布线完再检查一次 )
- 视音频编解码学习工程：H.264分析器
- ARC107——D - Number of Multisets
- 使用PHREAK算法实现Drools 6性能
- mysql报错 DuplicateKeyException分析与解决
- 数据可视化常用LED字体
- 使用Docker部署ShareLaTex并简单配置中文环境
- python deamon example
- linux音频设备接口,OSS--跨平台的音频接口简介
- k8s篇-POD资源管理
- 安卓手机投屏软件_直播教程 | 安卓手机投屏队伍语音解决方案1
- iOS安全攻防（二十）：越狱检测的攻与防
- 常见的压力面试题及面试技巧
- JDK1.8的安装方式
- mtd和mtdblock的区别