HTML5期末大作业：商城网站毕业设计——HTML静态购物网站模板11页(前台+后台) HTML+CSS+JavaScript...

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

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

作品介绍

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

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

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

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

文章目录

HTML5期末大作业：商城网站毕业设计——HTML静态购物网站模板11页(前台+后台) HTML+CSS+JavaScript
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、web前端(学习资料)
五、源码获取
六、更多源码

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易买网 - 首页</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/function.js"></script>
</head>
<body>
<div id="header" class="wrap">
<div id="logo"><img src="images/logo.gif" /></div>
<div class="help"><a href="shopping.html" class="shopping">购物车X件</a><a href="login.html">登录</a><a href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a></div>
<div class="navbar">
<ul class="clearfix">
<li class="current"><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 id="childNav">
<div class="wrap">
<ul class="clearfix">
<li class="first"><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>
<li><a href="#">饰品</a></li>
<li class="last"><a href="#">Investor Relations</a></li>
</ul>
</div>
</div>
<div id="position" class="wrap">
  您现在的位置：<a href="index.html">易买网</a> > <a href="product-list.html">图书音像</a> > 图书
</div>
<div id="main" class="wrap">
<div class="lefter">
<div class="box">
<h2>商品分类</h2>
<dl>
<dt>图书音像</dt>
<dd><a href="product-list.html">图书</a></dd>
<dd><a href="product-list.html">音乐</a></dd>
<dt>百货</dt>
<dd><a href="product-list.html">运动健康</a></dd>
<dd><a href="product-list.html">服装</a></dd>
<dd><a href="product-list.html">家居</a></dd>
<dd><a href="product-list.html">美妆</a></dd>
<dd><a href="product-list.html">母婴</a></dd>
<dd><a href="product-list.html">食品</a></dd>
<dd><a href="product-list.html">手机数码</a></dd>
<dd><a href="product-list.html">家具首饰</a></dd>
<dd><a href="product-list.html">手表饰品</a></dd>
<dd><a href="product-list.html">鞋包</a></dd>
<dd><a href="product-list.html">家电</a></dd>
<dd><a href="product-list.html">电脑办公</a></dd>
<dd><a href="product-list.html">玩具文具</a></dd>
<dd><a href="product-list.html">汽车用品</a></dd>
</dl>
</div>
</div>
<div id="product" class="main">
<h1>利仁2018M福满堂电饼铛 好用实惠</h1>
<div class="infos">
<div class="thumb"><img src="images/product/10.jpg" width="110" height="106" /></div>
<div class="buy">
        商城价：<span class="price">￥99.00</span><br />
        库　存：有货
<div class="button"><input type="button" name="button" value="" onclick="location.href = 'address.html'" /><a href="shopping.html">放入购物车</a></div>
</div>
<div class="clear"></div>
</div>
<div class="introduce">
<h2><strong>商品详情</strong></h2>
<div class="text">
        利仁2018M福满堂电饼铛 好用实惠<br />
        ......<br />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
  Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[  <-- For SVG support
if ('WebSocket' in window) {
    (function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
          }
parent.appendChild(elem);
        }
      }
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
      };
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
      }
    })();
  }
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  }
// ]]>
</script></body>
</html>

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

# 五、 👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻

更多推荐

HTML5期末大作业：商城网站毕业设计——HTML静态购物网站模板11页(前台+后台) HTML+CSS+JavaScript...