【HTML】HTML5网页作业----模仿京东，模仿站点
html作业，html作业，html设计，模仿京东，期末作业
·
1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
模仿京东首页采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
模仿京东首页采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计，使用less写的样式，使用弹性盒子写的布局，也有响应式布局，纯css效果，无js代码
3、作品演示
3.1、首页
相关代码：
<!-- 顶部包装 -->
<div class="navigation-wrapper">
<!-- 顶部导航栏 -->
<div class="navigation">
<!-- 位置 -->
<ul class="location">
<li class="address dt">
<a href="">
<i class="icon-weizhi"></i>
<span>湖南</span>
</a>
<ul class="location-list list">
<!-- 省份地区 -->
<li class="province">
<span><a href="javascript:;">北京</a></span>
<span><a href="javascript:;">上海</a></span>
<span><a href="javascript:;">天津</a></span>
<span><a href="javascript:;">钓鱼岛</a></span>
<span><a href="javascript:;">海外</a></span>
</li>
<!-- 下一个地区 -->
<li class="province-next">
<div>地区专享版本</div>
<ul class="next">
<li>中國港澳</li>
<li>中國台灣</li>
<li>京东全球</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- 顶部导航栏右边菜单 -->
<ul class="fr">
<!-- 登录注册 -->
<li class="logon">
<a href="" class="lo">你好，请登录</a>
<a href="" class="gon">免费注册</a>
</li>
<!-- 隔板 -->
<li class="spacer"></li>
<!-- 我的订单 -->
<li class="order">
<a href="">我的订单</a>
</li>
<li class="spacer"></li>
<!-- 我的京东 -->
<li class="my dt">
<a href="">
<span>我的京东</span>
<i class="icon-xiangshang-b"></i>
</a>
<ul class="my-jd list">
<li>
<span><a href="">待处理订单</a></span>
<span><a href="">消息</a></span>
<span><a href="">返修退还书</a></span>
<span><a href="">我的问答</a></span>
<span><a href="">降价商品</a></span>
<span><a href="">我的关注</a></span>
</li>
</ul>
</li>
<!-- 京东会员 -->
<li class="spacer"></li>
<li class="member">
<a href="">京东会员</a>
</li>
<li class="spacer"></li>
<!-- 企业采购 -->
<li class="enterprise dt">
<a href="">
<span>企业采购</span>
<i class="icon-xiangshang-b"></i>
</a>
</li>
<li class="spacer"></li>
<!-- 客户服务 -->
<li class="service">
<a href="">
客户服务
<i class="icon-xiangshang-b"></i>
</a>
</li>
<li class="spacer"></li>
<!-- 网站导航 -->
<li class="website dt">
<a href="">
网站导航
<i class="icon-xiangshang-b"></i>
</a>
</li>
<li class="spacer"></li>
<!-- 手机京东 -->
<li class="handset">
<a href="">手机京东</a>
<ul class="download">
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- header部分 -->
<div class="header-wrapper">
<div class="header">
<!-- logo -->
<h1 class="logo"></h1>
<!-- 搜索框 -->
<div class="search">
<form class="search-min" action="">
<i class="icon-tubiaozhizuo-"></i>
<input type="text" name="text" class="text" placeholder="车载手机支架" >
<input type="submit" class="icon-search" value="" name="search">
</form>
<!-- 搜索词 -->
<div class="search-word">
<a href="#">智能新生活</a>
<a href="#">进口日</a>
<a href="#">立秋盛典</a>
<a href="#">华硕巅峰</a>
<a href="#">秒杀狂欢</a>
<a href="#">新品上市</a>
<a href="#">精选日用</a>
<a href="#" class="min-none">电脑采购</a>
<a href="#" class="min-none">勋章钜惠</a>
</div>
</div>
<!-- 购物车 -->
<div class="shopping">
<i class="icon-gouwuche"></i>
<span>我的购物车</span>
</div>
<!-- 导航项目 -->
<div class="navitems">
<span class="items">秒杀</span>
<span class="items">优惠卷</span>
<span>PLUS会员</span>
<span>品牌闪购</span>
<span>拍卖</span>
<span>京东家电</span>
<span>京东超市</span>
<span>京东生鲜</span>
<span>京东国际</span>
<span>京东金融</span>
</div>
<!-- 广告 -->
<div class="ad"></div>
</div>
</div>
<!-- 大容器 -->
<div class="big-container">
<!-- 顶部容器 -->
<div class="container-top"></div>
<!-- 容器盒子 -->
<div class="container-box">
<!-- 左侧边栏 -->
<div class="left-sidebar">
<ul class="side">
<li class="item">
<a href="#">家用电器</a>
<ul class="subnav">
<li>
<!-- 商品详细信息 -->
<div class="goods-detailed">
<!-- 商品标签 -->
<div class="goods-label">
<p>家电馆 ></p>
<p>家电专卖店 ></p>
<p>家电服务 ></p>
<p>企业采购 ></p>
<p>商用电器 ></p>
<p>以旧换新 ></p>
</div>
<!-- 商品 -->
<div class="goods">
<dl>
<dt><a href="">电视 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
<a href="">油烟机</a>
<a href="">电力锅</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="item">
<a href="#">手机</a><span class='line'>/</span><a href="#">运营商</a><span class='line'>/</span><a href="#">数码</a>
<ul class="subnav">
<li>
<!-- 商品详细信息 -->
<div class="goods-detailed">
<!-- 商品标签 -->
<div class="goods-label">
<p>家电馆 ></p>
<p>家电专卖店 ></p>
<p>家电服务 ></p>
<p>企业采购 ></p>
<p>商用电器 ></p>
<p>以旧换新 ></p>
</div>
<!-- 商品 -->
<div class="goods">
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">电视 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">洗衣机 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
<a href="">油烟机</a>
<a href="">电力锅</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
</div>
</div>
<!-- 广告图片 -->
<div class="ad-picture">
<div class="mm">
<a href="#"><img src="./img/ad1.jpg" alt=""></a>
<a href="#"><img src="./img/ad2.jpg" alt=""></a>
<a href="#"><img src="./img/ad3.jpg" alt=""></a>
<a href="#"><img src="./img/ad4.jpg" alt=""></a>
<a href="#"><img src="./img/ad5.jpg" alt=""></a>
<a href="#"><img src="./img/ad6.jpg" alt=""></a>
<a href="#"><img src="./img/ad7.jpg" alt=""></a>
<a href="#"><img src="./img/ad8.jpg" alt=""></a>
</div>
<div class="ss">
<a href=""><img src="./img/add1.webp" alt=""></a>
<a href=""><img src="./img/add2.jpg" alt=""></a>
</div>
</div>
</li>
</ul>
</li>
<li class="item">
<a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a>
<ul class="subnav">
<li>
<!-- 商品详细信息 -->
<div class="goods-detailed">
<!-- 商品标签 -->
<div class="goods-label">
<p>家电馆 ></p>
<p>家电专卖店 ></p>
<p>家电服务 ></p>
<p>企业采购 ></p>
<p>商用电器 ></p>
<p>以旧换新 ></p>
</div>
<!-- 商品 -->
<div class="goods">
<dl>
<dt><a href="">电视 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">洗衣机 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
<dl>
<dt><a href="">空调 ></a></dt>
<dd>
<a href="">超薄电视</a>
<a href="">全面屏电视</a>
<a href="">智能电视</a>
<a href="">教育电视</a>
<a href="">OLED电视</a>
<a href="">智慧幕</a>
<a href="">4k超清电视</a>
<a href="">55英寸</a>
<a href="">65英寸</a>
<a href="">电视配件</a>
</dd>
</dl>
</div>
</div>
<!-- 广告图片 -->
<div class="ad-picture">
<div class="mm">
<a href="#"><img src="./img/ad1.jpg" alt=""></a>
<a href="#"><img src="./img/ad2.jpg" alt=""></a>
<a href="#"><img src="./img/ad3.jpg" alt=""></a>
<a href="#"><img src="./img/ad4.jpg" alt=""></a>
<a href="#"><img src="./img/ad5.jpg" alt=""></a>
<a href="#"><img src="./img/ad6.jpg" alt=""></a>
<a href="#"><img src="./img/ad7.jpg" alt=""></a>
<a href="#"><img src="./img/ad8.jpg" alt=""></a>
</div>
<div class="ss">
<a href=""><img src="./img/add1.webp" alt=""></a>
<a href=""><img src="./img/add2.jpg" alt=""></a>
</div>
</div>
</li>
</ul>
</li>总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献25条内容
所有评论(0)