HTML5期末大作业:商城网站设计——节日礼品购物商城网站html((14页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


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



1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。


作品介绍

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

2.网页作品编辑​​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

3.网页作品布局​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。


文章目录

一、作品展示

1.首页

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_css

2.提交订单

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_css_02

3.确认订单

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_网页设计_03

4.登录/注册

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_网页设计_04

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_javascript_05

5. 商品展示

HTML网页设计结课作业:商城网站设计——节日礼品购物商城网站html(14页) HTML+CSS+JavaScript_css_06

二、文件目录

consignee.html

dd.html

dd_pay.html

dd_success.html

dd_xq.html

goods.html

index.html

Login.html

LoginAndRegister.html

Login_moban.html

Product.html

register.html

sellInfo.html

三、代码实现

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="清心老师">
<meta name="Keywords" content="ecshop商城开发">
<meta name="Description" content="一个月打造商城-清心主讲">
<title>Ecshop商城开发产品页--清心老师</title>
<!--引用外部样式-->
<link type="text/css" rel="stylesheet" href="css/basic.css">
<link type="text/css" rel="stylesheet" href="css/web.css">
</head>
<body>

<div id="TopMain">
<!-- 广告开始 -->
<div id="topAdv">
<a href="#"> <img src="images/adv.jpg" /> </a>
<img src="images/close.png" class="close"/>
</div>
<!-- 广告结束-->

<!--Top开始-->
<div id="Top">
<div class="banner"><a href="#"><img src="images/logo.png" /></a></div>
<!--search begin-->
<div class="search">
<form>
<input type="text" class="txt"/>
<input type="submit" class="but" value=""/>
</form>
</div>
<!--search end-->
<div class="user">
<!--用户登录前状态
<font><span class="iconfont">&#xe60b;</span><a href="">登录</a></font>
<font><span class="iconfont">&#xe60e;</span><a href="">注册</a></font>-->


<!--用户登录后状态-->
您好!wlm123,欢迎你回来 <a href="" class="usertxt">用户中心</a><a href="" class="usertxt">退出</a>

<font><span class="iconfont">&#xe646;</span><a href="">加入购车</a></font>
</div>
</div>
<!--Top结束-->
</div>

<!--网站导航开始 滚动到一定高,给他加上 class="gd"-->
<div id="Logo" >
<ul>
<li class="first"><font class="iconfont">&#xe627;</font>全部商品分类
<!--<div class="Menu">
<ol>
<li>
<h3>节日礼物</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>生日礼物</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>蛋糕</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>商务礼物</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>个性定制</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<h3>鲜花</h3>
<P><a href="">生日</a><a href="">表白</a><a href="">订婚</a><a href="">结婚</a></p>
<div class="moreNav"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
</ol>
</div>-->
</li>
<li><a href="index.html" target="_blank">首页</a></li>
<li><a href="Product.html" target="_blank">节日礼物</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 class="last"></li>
</ul>
</div>
<!--网站导航结束-->




<!--内容推荐开始-->
<div id="webIntro">
<div class="webIntroCon">
<!--热点推荐开始-->
<div class="hotIntro">
<img src="images/webintro.jpg" class="hotimg"/>
<div class="hotList">
<dl>
<dt><a href="goods.html" target="_blank"><img src="images/webpic1.jpg" /></a></dt>
<dd class="ti">味多美 生日聚会送礼 水果蛋糕 缤纷盛果</dd>
<dd class="money">特价:<font>¥190.0</font></dd>
<dd class="buy"><a href="">立即抢购</a></dd>
</dl>
<dl>
<dt><a href="goods.html" target="_blank"><img src="images/webpic2.jpg" /></a></dt>
<dd class="ti">味多美 生日聚会送礼 水果蛋糕 缤纷盛果</dd>
<dd class="money">特价:<font>¥190.0</font></dd>
<dd class="buy"><a href="">立即抢购</a></dd>
</dl>
<dl>
<dt><a href="goods.html" target="_blank"><img src="images/webpic3.jpg" /></a></dt>
<dd class="ti">味多美 生日聚会送礼 水果蛋糕 缤纷盛果</dd>
<dd class="money">特价:<font>¥190.0</font></dd>
<dd class="buy"><a href="">立即抢购</a></dd>
</dl>
</div>
</div>
<!--热点推荐结束-->

<!--促销活动开始-->
<div class="newIntro">
<img src="images/commintro.jpg" class="imgNew" />
<ul>
<li><a href="">·&nbsp;&nbsp;国际起泡酒节 每天9.9元秒</a></li>
<li><a href="">·&nbsp;&nbsp;暑期狂欢游 美酒买一赠一</a></li>
<li><a href="">·&nbsp;&nbsp;大牌红酒1元秒</a></li>
<li><a href="">·&nbsp;&nbsp;酷爽7月 冰点价低至1折</a></li>
<li><a href="">·&nbsp;&nbsp;买酒送酒柜 比39元更低</a></li>
</ul>
</div>
<!--促销活动结束-->
</div>
</div>
<!--内容推荐结束-->


<!--面包屑导航开始-->
<div class="webLogo">当前位置:
<a href="">首页</a> > <a href="">手机类型</a> > <a href="">3G手机</a> > KD876
</div>
<!--面包屑导航结束-->


<!--礼物综合搜综分类开始-->
<div id="searchType">
<h3>礼物综合搜索</h3>

<dl>
<dt>送礼场合:</dt>
<dd><a href="" class="all">全部</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a></dd>
<div style="clear:both"></div>
</dl>
<dl>
<dt>送礼场合:</dt>
<dd><a href="" class="all">全部</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a></dd><div style="clear:both"></div>
</dl>
<dl>
<dt>送礼场合:</dt>
<dd><a href="" class="all">全部</a><a href="">生日</a><a href="">结婚</a><a href="">订婚</a><a href="">表白</a><a href="">纪念日</a>
<a href="">本命年</a><a href="">乔迁</a><a href="">晋升</a><a href="">分别</a><a href="">毕业</a><a href="">答谢</a></dd>
<div style="clear:both"></div>
</dl>
</div>
<!--礼物综合搜综分类结束-->


<!--产品展示部分开始-->
<div id="ProductList">
<div class="ti">商口显示</div>

<ul>
<li>
<img src="images/dg_img1.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img2.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img3.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img6.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img1.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img2.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img3.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img6.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img1.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>
<li>
<img src="images/dg_img1.jpg" width='200' height="200" />
<h3>趴趴熊-音乐枕</h3>
<p><span>¥258.00</span><a href="">立即购买</a></p>
<p>本产品售销量:<font>400</font></p>
</li>

</ul>

<div style="clear:both;"></div>
</div>
<!--产品展示部分结束-->




<!--网站底部开始-->
<img src="images/f.jpg" class="fbg"/>
<div id="Footer2">
<dl class="first">
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt><a href="#">关于我们</a></dt>
<dd><a href="#">诚聘英才</a></dd>
<dd><a href="#">品牌入驻</a></dd>
<dd><a href="#">友情链接</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>诚聘英才</dd>
<dd>品牌入驻</dd>
<dd>友情链接</dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>诚聘英才</dd>
<dd>品牌入驻</dd>
<dd>友情链接</dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>诚聘英才</dd>
<dd>品牌入驻</dd>
<dd>友情链接</dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>诚聘英才</dd>
<dd>品牌入驻</dd>
<dd>友情链接</dd>
</dl>
<dl class="last">
<dt>客服在线</dt>
<dd>4006-600-000</dd>
<dd><img src="images/QQ.jpg" /></dd>
</dl>

<div style="clear:both"></div>
</div>


<p class="Copy">Copyright © 2020 All Rights Reserved 版权所有:湖南潭州教育咨询有限公司 备案号:备XXX号</p>
<!--网站底部结束-->






<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>



<!--
1、在News大盒子里面,构建两个一样大小的长方形,一个用来设背景透明,一个利用绝定位,盖在透明
图层上面,用来放内容
2、利用 h3标签来制作标题部分(颜色,大小,字体类型,竖直居中,首行缩进text-indent:20px;)
3、利用 ul来制作新闻列表,文字竖直间距利用行高 line-height:30px; 给 ul添加对应的内边距,使文字与上右下左产生一定的间距。
4、给文字加上了 a标签超链接,如何优化我们代码,代码的性能,如果把常用样式,统一初始化,我们选择的是用标签来表达,而不是用 *
-->




</body>
</html>