DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码）

最新推荐文章于 2023-08-05 14:02:35 发布
最新推荐文章于 2023-08-05 14:02:35 发布
阅读量451 收藏 4
点赞数 1
分类专栏： web大学生个人网站作业模 学生div+css静态网页设计成品 html网页设计作业 文章标签： css html javascript 商城 购物
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/122349389
版权

HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码）

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

作品介绍

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

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

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

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易购商城</title>
<link href="images/styel.css" rel="stylesheet"/>
<link rel="shortcut icon" href="images/pic.ico" type="image/x-icon">
</head>

<body>
<div class="header">
<div class="top">
	<div class="top1">
		<a>亲,欢迎回来！</a>
		<a href="#"><img src="images/top1.jpg" />查看购物车</a>
		<a href="#"><img src="images/top2.jpg" />用户中心！</a>
		<a href="#"><img src="images/top2.jpg" />联系我们</a>
	</div>
</div>
<div class="logobg">
	<div class="center">
		<div class="logo">
			<img src="images/logo.jpg" width="249" height="55" />
		</div>
		<div class="search">
			<input class="left" type="text" /><input class="right" type="button" style=" cursor:pointer;" value=""/>
		</div>
	</div>
</div>
	<div class="bottom">
		<div class="nav">
			<a href="#" class="now">首页</a>
			<a href="#">团购促销</a>
			<a href="#">名师荟萃</a>
			<a href="#">艺品驿站</a>
		</div>
	</div>
</div>
<div class="content">
	<div class="top">
		<div class="center"></div>
			<div class="left">
				<div class="menu"><a>所有商品分类</a></div>
					<div class="tab">
						<p>木艺</p>
						<div class="left">
							<a href="#">书香文房</a>
							<a href="#">佛件</a>
							<a href="#">木艺佛道</a>
						</div>
						<div class="right">
							<a href="#">桂品</a>
							<a href="#">美玉</a>
						</div>
					</div>
					<div class="tab">
						<p>石艺</p>
						<div class="left">
							<a href="#">书香文房</a>
							<a href="#">佛件</a>
							<a href="#">木艺佛道</a>
						</div>
						<div class="right">
							<a href="#">桂品</a>
							<a href="#">美玉</a>
						</div>
					</div>
					<div class="tab">
						<p>陶艺</p>
						<div class="left">
							<a href="#">书香文房</a>
							<a href="#">佛件</a>
							<a href="#">木艺佛道</a>
						</div>
						<div class="right">
							<a href="#">桂品</a>
							<a href="#">美玉</a>
						</div>
					</div>
			</div>
		<div class="right">
			<div class="title"></div>
			<div class="tab">
				<div class="left"></div>
				<div class="rigft">
					<a class="now">顶尖的设计</a>
					<a>来这里的基本上都是</a>
					<a>来喝茶的人，有的..</a>
				</div>			
			</div>
			<div class="tab">
			<div class="left"></div>
				<div class="rigft">
					<a class="now">顶尖的设计</a>
					<a>来这里的基本上都是</a>
					<a>来喝茶的人，有的..</a>
				</div>			
			</div>
			<div class="tab tab1">
			<div class="left"></div>
				<div class="rigft">
					<a class="now">顶尖的设计</a>
					<a>来这里的基本上都是</a>
					<a>来喝茶的人，有的..</a>
				</div>			
			</div>
			<div class="bottom">
				<a href="#">查看更多>></a>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<div class="main">
	<div class="menu menu1">
		<div class="tab"><samp>样品推存</samp><a href="#">查看更多>></a></div>
		<div class="com">
			<a href="#" class="ex01">
				<img src="images/ex_02.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_03.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_04.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_05.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a> 
		</div>
	</div>
	<div class="menu menu2">
	<div class="tab"><samp>新品上市</samp><a href="#">查看更多>></a></div>
		<div class="com">
			<a href="#" class="ex01">
				<img src="images/ex_06.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_07.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_04.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_05.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a> 
		</div>
	</div>
	<div class="menu menu3">
	<div class="tab"><samp>热卖商品</samp><a href="#">查看更多>></a></div>
		<div class="com">
			<a href="#" class="ex01">
				<img src="images/ex_02.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_03.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_04.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a>
			<a href="#" class="ex01">
				<img src="images/ex_05.jpg" width="207" height="193" />
				<p>极品岩茶正宗武夷特产 特级大红袍</p>
				<div class="bottom"><samp>商城价:￥58元</samp><input type="button" style=" cursor:pointer;" value="购买" /></div>	
			</a> 
		</div>
	</div>
</div>
<div class="bottom">
	<div class="top">
		<a class="a1">品质保证</a>
		<a class="a2">配送保证</a>
		<a class="a3">服务保证</a>
		<a class="a4">配送指南</a>
		<a class="a5">7天退还货</a>
	</div>
	<div class="content">
		<div class="b1">
			<h1 >官方热线</h1>
			<h2>400-123-456</h2>
			<h3>客服邮箱</h3>
			<h4>12345678@163.com</h4>
		</div>
		<div class="b">
			<h1 class="c1">公司简介</h1>
			<h2>帐户自助服务</h2>
			<h2>新用户注册</h2>
			<h2>怎样下订单</h2>
		</div>
		<div class="b">
			<h1 class="c2">联系我们</h1>
			<h2>账号 & 密码问题</h2>
			<h2>缺货登记</h2> 
		</div>
		<div class="b">
			<h1 class="c3">隐私保护</h1>
			<h2>退换货原则和流程</h2>     
			<h2>服务保障承诺</h2>
			<h2>验货与签收</h2>  
	    </div>
	    <div class="b">
			<h1 class="c4">免责条款</h1>
			<h2>支付方式</h2>
			<h2>在线支付介绍</h2>
			<h2>汇款单招领</h2> 
		</div>
	</div>
	<div class="clear"></div>
</div>
<div class="bottom2">
	© 2005-2013 艺购商城版权所有，并保留所有权利    广东省东莞市茶山镇茶山村东岳路95号五楼 E-mail: 123456789@qq.com
</div>
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
在这里插入图片描述

五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

优质内容贡献
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 6547
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码）
11-25 455
HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码） 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生
纯html和css制作商城页面
weixin_71587749的博客
05-09 3322
reset.css(取消特殊的格式，方便布局)main.css(防止高度塌陷)
HTML+CSS做的商城页面
qq_53682646的博客
10-04 1万+
品优购小商城，用html+css做的三个静态页面
学生HTML个人网页作业作品 HTML+CSS+JavaScript环保页面设计与实现md
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
水墨风格书画艺术品网站html静态模板
12-04
水墨风格书画艺术品网站html静态模板
Exhibition:艺术品展览的网站
04-20
展览 艺术品展览的网站。
某工艺品公司网站源码
11-20
很好的网站源代码ASP+ACCESS
HTML商城主页面
06-25
小商城源代码，适合学习，基本没啥问题 适合学生下载
HTML-商城界面
07-22
利用table标签制作商城主网页，源码带注释。最早的网页制作就是使用table标签制作的
商品购物网页设计（HTML）
weixin_65314914的博客
08-05 3776
HTML网页设计是计算机科学领域中的一个重要分支，它涉及到网页的布局、设计、交互等方面。随着互联网的发展，HTML网页设计已成为了一个必备的技能，无论是企业还是个人都需要掌握这一技能。本教程将介绍HTML的基础知识，包括HTML标签、CSS样式、JavaScript脚本等内容，帮助读者快速入门HTML网页设计，并能够创建出美观、实用、交互性强的网页。同时，我们也将介绍一些实用的工具和技巧，帮助读者更加高效地完成网页设计工作。希望本教程能够对广大网页设计爱好者有所帮助！
购物网站HTML（首页）
m0_56078449的博客
02-11 1万+
购物网站HTML（首页）
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
网站开发之DIV+CSS简单布局网站入门篇（五）
杨秀璋的专栏
11-08 1万+
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：main.html主页面代码：主要通过div进行布局的，同时用户设置导航条，鼠标悬停时背景颜色切换。css/main.css代码：该部分代码主
使用html+css实现一个静态页面(含源码)三个网页
最新发布
01-06
实现静态页面需要使用HTML和CSS语言。我们可以创建三个不同的网页来展示这种技能。 首先，我们可以创建一个简单的个人主页。在HTML中，我们可以使用`<div>`标签和`<h1>`标签来创建页面的标题和内容区块。然后，利用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值