常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>网上书城简介</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="web">
<!----网站头部开始---->
<div class="top">
<div class="logo"><img src="images/logo.png"></div>
</div>
<!----导航开始---->
<hr />
<div id="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html">网站简介</a></li>
<li><a href="wenxue.html">文学综合馆</a></li>
<li><a href="ertong.html">儿童书馆</a></li>
</ul>
</div>
<hr />
<div class="about">
<h1>网上书城简介</h1>
<p>网上书城成立于2008年9月，专注于数字阅读，是我国领先的移动阅读分发平台。公司自成立以来，一直秉承专注、务实的企业精神，目前已与国内国际600家优质的版权方合作，引进海量高质量的图书数字版权，为全球150多个国家和地区的数亿用户提供高品质的图书内容和智能化的用户体验。目前公司月活跃用户达到1.1亿。</p>
<p>网上书城先后当选中国版权协会、中国音像与数字出版协会、中国出版协会常务理事单位。2014年，网上书城获得国家版权局授予的"全国版权示范单位"；因在正版领域的推广运用效果显著，2015年网上书城荣获"第四届世界知识产权组织版权金奖"；2016年，网上书城入选国家新闻出版广电总局首批新闻出版业科技与标准重点实验室；2017年，网上书城荣获"第四届中国出版政府奖先进出版单位"；2018年入围第十届"全国文化企业30强"名单及提名企业名单。</p>
<p>以"全球最专业的阅读平台"为愿景的网上书城科技，自2015年开始进军外海市场，目前网上书城已有100多部原创作品授权到海外，翻译成韩日泰英多种文字。2018年初，国家文化出口重点企业和重点项目公布公示名单，网上书城均有上榜。</p>
<p>网上书城是享誉国内外的现代化大型综合购书中心和知名文化品牌。网上书城品种齐全、功能完备、管理先进，致力于为读者提供多功能、全方位、高质量的一站式文化消费服务。在全国同业中率先引进大型综合超市(GMS)的经营业态，内设有商务中心、餐饮中心、总服务台、邮电代办所、银行等服务设施，采用城中设店布局、出版物全品种营销，经销全国800多家出版生产商的各类书刊、音像制品、电子出版物、文化艺术品、PDA产品等约23万种。</p>
<p>书城在国际同业中率先提出并实践"五星级书店"的服务理念，在全国书店第一家实行夏季延长营业时间1小时，采用BIMS系统计算机管理连锁经营，提供商品查询、导购、预订、邮寄等服务，2003年书城通过国际权威认证机构英国BSI公司ISO9001质量管理体系认证。</p>
<p>网上书城连续多年被授予"国家常备图书定点销售店"、"全国新华书店精神文明示范单位"、 2002年4月被中央文明办和国务院纠风办评为"全国创建文明行业示范点"。被市民誉为城市的"文化公园"、"第二图书馆"、"读书人的幸福城堡"。</p>
</div>
<div class="foot">版权所有 @ 网上书城</div>
</div>
</body>
</html>

2.CSS样式代码 🏠


body {
	margin: 0 auto;
	font-size: 14px;
	font-family: "微软雅黑";
	line-height: 22px;
}

div,p,input,ul,li,h1,h2,h3 {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: all 0.6s;
}
 /*---top开始-----*/
.web {
	width: 1000px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

.top {
	width: 1000px;
	height: 55px;
	margin: 0 auto;
}

.logo {
	width: 186px;
	height: 39px;
	margin-top: 30px;
}

#nav {
	width: 1000px;
	height: 35px;
	margin: 0 auto;
}

#nav ul {
	margin: 0 auto;
}

#nav ul li {
	height: 35px;
	line-height: 35px;
	color: #FFF;
	float: left;
	text-align: center;
}

#nav li a {
	color: #000;
	font-family: "微软雅黑";
	font-size: 14px;
	height: 35px;
	line-height: 35px;
	display: block;
	padding: 0px 40px;
}

.box1 {
	width: 958px;
	height: 300px;
	border: #CCC 1px solid;
	padding: 20px;
	margin-top: 20px;
}

.box1 img {
	float: left;
	margin-right: 15px;
}

.box1 h1 {
	font-size: 16px;
	height: 35px;
	line-height: 35px;
}

.box1 p {
	font-size: 14px;
	line-height: 30px;
}

.box2 {
	width: 958px;
	height: 300px;
	border: #CCC 1px solid;
	padding: 20px;
	margin-top: 20px;
}

.box2 ul li {
	width: 238px;
	height: 290px;
	float: left;
	text-align: center;
}

.box2 ul li img {
	width: 220px;
	height: 250px;
}

.box2 ul li h1 {
	color: #353637;
	font-size: 14px;
	line-height: 25px;
	height: 25px;
	font-weight: normal;
}

.foot {
	width: 1000px;
	height: 60px;
	margin-top: 20px;
	line-height: 60px;
	font-size: 14px;
	text-align: center;
}

.about {
	width: 1000px;
	height: auto;
	overflow: hidden;
}

.about h1 {
	height: 60px;
	line-height: 60px;
	font-size: 18px;
	text-align: center;
}

.about p {
	line-height: 25px;
	font-size: 14px;
	text-indent: 2em;
}

.liebiao-ner {
	width: 100%;
	height: 300px;
}

.liebiao-ner ul li {
	height: 137px;
	float: left;
	border-bottom: #9c9b9a 1px dashed;
	margin-bottom: 15px;
}

.liebiao-ner ul li img {
	float: left;
	width: 98px;
	height: 121px;
	margin-right: 10px;
}

.liebiao-ner ul li h1 {
	color: #1084db;
	font-size: 14px;
	font-weight: normal;
	height: 30px;
	line-height: 30px;
	text-align: left;
}

.liebiao-ner ul li h2 {
	color: #909191;
	font-size: 12px;
	margin-bottom: 10px;
}

.liebiao-ner ul li p {
	color: #030303;
	font-size: 12px;
	line-height: 18px;
}

.ertong {
	width: 958px;
	height: auto;
	overflow: hidden;
	padding: 20px;
	margin-top: 20px;
}

.ertong ul li {
	width: 238px;
	height: 290px;
	float: left;
	text-align: center;
}

.ertong ul li img {
	width: 220px;
	height: 250px;
}

.ertong ul li h1 {
	color: #353637;
	font-size: 14px;
	line-height: 25px;
	height: 25px;
	font-weight: normal;
}