admin管理员组

文章数量:1604456

HTML5期末大作业:京东网站设计——仿京东(7页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

文章目录

  • HTML5期末大作业:京东网站设计——仿京东(7页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
  • 作品介绍
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、学习资料
  • 六、更多源码

一、作品展示







二、文件目录

三、代码实现


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
		<link rel="stylesheet" href="css/cssreset.css">
		<link rel="stylecut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery-3.0.0.min.js"></script>
	</head>
	<body>
		<div class="fix1">
			<div>
				<h5></h5>
				<div>
					<div class="search"><input type="text" placeholder="监控摄像头"><span></span></div>
						<div class="car">
							我的购物车
							<span></span>
						</div>
				</div>
			</div>
		</div>
		<div class="fix2"></div>
		<div class="fix3">
			<ul>
				<li>京东秒杀</li>
				<li></li>
				<li>特色优选</li>
				<li>频道广场</li>
				<li>为你推荐</li>
				<li><span class="a">客服</span></li>
				<li><span class="b">反馈</span></li>
				<li><span class="c">顶部</span></li>
			</ul>
		</div>
		<div class="fix4"></div>
		<div class="header">
			<div>
				<img src="images/index/46.jpg.webp" alt="" class="img1">
				<img src="images/index/35.png.webp" alt="" class="img2">
				<img src="images/index/34.png.webp" alt=""class="img3">
				<span>×</span>
			</div>
		</div>
		<div class="bg">
			<header>
				<ul class="header-left">
					<li>
						<div></div>
						<!-- <span ></span>
						<a href="#">京东首页</a> -->
					</li>
					<li class="db">					
						<div>					
						<dl class="up">
							<dd>北京</dd>
							<dd>上海</dd>
							<dd>天津</dd>
							<dd>重庆</dd>
							<dd>河北</dd>
							<dd>山西</dd>
							<dd>河南</dd>
							<dd>辽宁</dd>
							<dd>吉林</dd>
							<dd>黑龙江</dd>
							<dd>内蒙古</dd>
							<dd>江苏</dd>
							<dd>山东</dd>
							<dd>安徽</dd>
							<dd>浙江</dd>
							<dd>福建</dd>
							<dd>湖北</dd>
							<dd>湖南</dd>
							<dd>广东</dd>
							<dd>广西</dd>
							<dd>江西</dd>
							<dd>四川</dd>
							<dd>海南</dd>
							<dd>贵州</dd>
							<dd>云南</dd>
							<dd>西藏</dd>
							<dd>陕西</dd>
							<dd>甘肃</dd>
							<dd>青海</dd>
							<dd>宁夏</dd>
							<dd>新疆</dd>
							<dd>港澳</dd>
							<dd>台湾</dd>
							<dd>钓鱼岛</dd>
							<dd>海外</dd>				
						</dl>
						<dl class="down">
							<dt><a href="#">Available Sites</a></dt>
							<dd><a href="#">Global Site</a></dd>
							<dd><a href="#">Сайт России</a></dd>
							<dd><a href="#">Situs Indonesia</a></dd>
							<dd><a href="#">Sitio de España</a></dd>
							<dd><a href="#">เว็บไซต์ประเทศไทย</a></dd>
						</dl>
						</div>
						<span class="gps"></span>
						<span class="place">广东</span>
					</li>
				</ul>
				<ul class="header-right">
					<li class="user">					
						<div>
							<div class="out">
								<img src="images/no-img_mid_.jpg" alt="">
								<span class="vplus"></span>
								<span>开通PLUS 平均省1012元/年></span>
							</div>
							<div class="choose">
								<ul>
									<li class="left"><</li>
									<li class="mid">
										<ol>
											<li>
												<span></span>
												<p>免费试用</p>
											</li>
											<li>
												<span></span>
												<p>运费免单</p>
											</li>
											<li>
												<span></span>
												<p>生日特权</p>
											</li>
											<li>
												<span></span>
												<p>闪电退款</p>
											</li>
											<li>
												<span></span>
												<p>上门换新</p>
											</li>
											<li>
												<span></span>
												<p>京享值礼包</p>
											</li>
											<li>
												<span></span>
												<p>贵宾专线</p>
											</li>
											<li>
												<span></span>
												<p>运费双免</p>
											</li>		
										</ol>
									</li>
									<li class="right">></li>
								</ul>
							</div>
						</div>
						<a href="#">代码小白</a>
						<span class="plus"></span>
						<span class="tip"></span>
					</li>
					<li>
						<div></div>
						<a href="html/myorder.html">我的订单</a>
					</li>
					<li class="myjd arrow">					
						<div>
							<dl>
								<dd><a href="#">待处理订单</a></dd>
								<dd><a href="#">返修退换货</a></dd>
								<dd><a href="#">降价商品</a></dd>
							</dl>
							<dl>
								<dd><a href="#">消息</a></dd>
								<dd><a href="#">我的问答</a></dd>
								<dd><a href="#">我的关注</a></dd>
							</dl> 
							
							<dl>
								<dd><a href="#">我的京豆</a></dd>
								<dd><a href="#">我的白条</a></dd>
							</dl>
							<dl>
								<dd><a href="#">我的优惠券</a></dd>
								<dd><a href="#">我的理财</a

本文标签: 京东作业网站制作网站设计静态