临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：海贼王 故事介绍 主要人物 海贼美图 注册用户 随笔留言 等总共 6 个页面html下载。
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
文章目录
1.海贼王
2.故事介绍
3.主要人物
4.海贼美图
5. 注册用户
6.随笔留言
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>海贼王</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="#"><img src="images/logo.png" class="logo"/></a>
</div>
<div id="menu">
<ul>
<li><a href="index.html">海贼王</a></li>
<li><a href="jieshao.html">故事介绍</a></li>
<li><a href="renwu.html">主要人物</a></li>
<li><a href="meitu.html">海贼美图</a></li>
<li><a href="zhuce.html">注册用户</a></li>
<li><a href="liuyan.html">随笔留言</a></li>
</ul>
</div>
<div id="main">
<div class="content">
<ul class="list">
<li>
<img src="images/zy1.jpg" />
<h5>“草帽”蒙奇·D·路飞</h5>
<p>初次登场：漫画第1话 年龄：17岁→19岁 生日：5月5日 血型：F型 身高：172cm→174cm 身份：草帽海贼团船长 故乡：东海·风车村 ...</p>
<a href="#">详情...</a>
</li>
<li>
<img src="images/zy2.jpg" />
<h5>“小贼猫”娜美</h5>
<p>初次登场：漫画第8话 年龄：18岁→20岁 生日：7月3日 血型：X型 身份：阿龙海贼团测量员→草帽海贼团航海士 故乡：东海▪可可亚西村...</p>
<a href="#">详情...</a>
</li>
<li>
<img src="images/zy3.jpg" />
<h5>“海贼猎人”罗罗诺亚·索隆</h5>
<p>初次登场：漫画第3话 年龄：19岁→21岁 生日：11月11日 血型：XF型 身份：东海海贼赏金猎人→草帽海贼团战斗员 故乡：东海·霜月村...</p>
<a href="#">详情...</a>
</li>
<li>
<img src="images/zy4.jpg" />
<h5>“GOD”▪乌索普</h5>
<p>初次登场：漫画第23话 年龄：17岁→19岁 生日：4月1日 血型：S型 身份：乌索普海贼团船长→草帽海贼团狙击手 故乡：东海▪西罗普村...</p>
<a href="#">详情...</a>
</li>
</ul>
</div>
<div class="sidebar">
<div class="denglu">
<h2>用户登录</h2>
<p><span>账号：</span><input type="text" /></p>
<p><span>密码：</span><input type="password" /></p>
<div class="btn">
<a href="#"><img src="images/denglu.png" /></a>
<a href="#"><img src="images/zhuce.png" /></a>
</div>
</div>
<div class="chengyuan">
<h2>草帽海贼团成员</h2>
<ul>
<li><a href="#">“草帽”蒙奇·D·路飞</a></li>
<li><a href="#">“海贼猎人”罗罗诺亚·索隆</a></li>
<li><a href="#">“小贼猫”娜美</a></li>
<li><a href="#">“GOD”▪乌索普</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>
</ul>
<img src="images/chengyuan.jpg" />
</div>
</div>
</div>
<div id="footer">
<p><a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="e7006e6f017a64016e67017b6ea70152500f535b00696c">[email protected]</a>
<script data-yjshash='f9e31' type="text/javascript">
/* <![CDATA[ */ ! function(t, e, r, n, c, a, p) {
try {
t = document.currentScript || function() {
for (t = document.getElementsByTagName('script'), e = t.length; e--;)
if (t[e].getAttribute('data-yjshash')) return t[e]
}();
if (t && (c = t.previousSibling)) {
p = t.parentNode;
if (a = c.getAttribute('data-yjsemail')) {
for (e = '', r = '0x' + a.substr(0, 2) | 0, n = 2; a.length - n; n += 2) e += '%' + ('0' + ('0x' + a.substr(n, 2) ^ r).toString(16)).slice(-2);
p.replaceChild(document.createTextNode(decodeURIComponent(e)), c)
}
p.removeChild(t)
}
} catch (u) {}
}() /* ]]> */
</script>
</p>
</div>
</div>
</body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
扫一扫
4519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
