web网页设计期末课程大作业：动漫主题网站设计——关于我转生史莱姆这件事(6页)HTML+CSS

最新推荐文章于 2023-12-14 09:03:17 发布

IT-北溟有鱼

最新推荐文章于 2023-12-14 09:03:17 发布

阅读量76

点赞数

分类专栏： web课程设计文章标签：前端 css html dreamweaver 学生期末作业作品html

本文链接：https://blog.csdn.net/qq__3200628753/article/details/126213775

版权

web课程设计专栏收录该内容

744 篇文章 11 订阅

订阅专栏

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网页介绍📖

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 rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="page">
			<div class="header"><img src="img/banner.jpg" alt=""></div>
			<div class="nav">
				<ul>
					<a href="index.html"><li>首页</li></a>
					<a href="gsjj.html"><li>故事简介</li></a>
					<a href="zyjs.html"><li>主要角色</li></a>
					<a href="yyjs.html"><li>用语解说</li></a>
					<a href="jmtc.html"><li>精美图册</li></a>
					<a href="sppd.html"><li>视频片段</li></a>
				</ul>
			</div>
			<div class="mid">
				<div class="mb20">
					<h1 class="title">关于我转生变成史莱姆这档事 <span>（伏瀬著作的轻小说作品）</span></h1>
					<div class="wz">
						<p>《关于我转生变成史莱姆这档事 》是伏瀬著作、みっつばー插画，GC NOVELS所属的轻小说作品。亦有同名改编漫画及电视动画。</p>
						<p>单行本日文版由マイクロマガジン社出版发行，繁体中文版由台湾角川代理发行。</p>
						<p>至日文版单行本第7卷发售时，累计销量突破40万部。</p>
						<p>2020年9月，官方发布2000万部发行量突破纪念抽奖活动</p>
						<img src="img/t1.jpg" alt="" >
						<dl>
							<dt>中文名</dt>
							<dd>关于我转生变成史莱姆这档事</dd>
							<dt>别&emsp;名</dt>
							<dd>关于我转生后成为史莱姆的那件事</dd>
							<dt>作&emsp;者</dt>
							<dd>伏濑</dd>
							<dt>类&emsp;型</dt>
							<dd>穿越，奇幻</dd>
							<dt>原版名称</dt>
							<dd>転生したらスライムだった件</dd>
							<dt>&emsp;</dt>
							<dd>&emsp;</dd>
						</dl>
						<dl>
							<dt>插&emsp;画</dt>
							<dd>みっつばー</dd>
							<dt>译&emsp;者</dt>
							<dd>杨惠琪</dd>
							<dt>地&emsp;区</dt>
							<dd>日本</dd>
							<dt>出版社</dt>
							<dd>マイクロマガジン社</dd>
							<dt>所属文库</dt>
							<dd>GC NOVELS</dd>
							<dt>其他出版社</dt>
							<dd>台湾角川</dd>
						</dl>
					</div>
					<div class="zb">
						<h2 class="title"><span></span>动漫周边</h2>
						<ul>
							<li>
								<img src="img/zb1.jpg" alt="">
								<p>史莱姆团子抱枕萌王莉姆鲁</p>
								<p>￥50</p>
								<p>月销3万</p>
								<p>立即购买</p>
							</li>
							<li>
								<img src="img/zb2.jpg" alt="">
								<p>史莱姆萌王莉姆鲁同人手办</p>
								<p>￥899</p>
								<p>月销3.5万</p>
								<p>立即购买</p>
							</li>
							<li>
								<img src="img/zb3.jpg" alt="">
								<p>萌王莉姆鲁大抱枕</p>
								<p>￥120</p>
								<p>月销4.2万</p>
								<p>立即购买</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="foot">关于我转生史莱姆这件事</div>
		</div>
	</body>
</html>

2.CSS样式代码 🏠


@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
li{
	list-style: none;
}
a{
	color: #000;
	text-decoration: none;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
body{
	background-color: #fafafa;
}
.page{
	width: 1000px;
	margin: 0 auto;
	background-color: #FFF;
}
.header{
	width: 100%;
	height: 400px;
	overflow: hidden;
}
.nav{
	width: 100%;
	overflow: hidden;
	background-color: #bce1f4;
}
.nav ul{
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
.nav li{
	width: 160px;
	text-align: center;
	float: left;
	line-height: 35px;
	font-size: 14px;
	color: #333;
}
.nav li:hover{
	color: #FFF;
	background-color: #93b9e7;
}
.mid{
	width: 100%;
	padding: 20px 0;
	overflow: hidden;
}
.mb20{
	overflow: hidden;
	margin-bottom: 20px;
}
h1.title{
	font-size: 32px;
	font-weight: 400;
	text-align: center;
}
h1.title span{
	font-size: 18px;
}
.wz{
	width: 94%;
	padding: 3%;
	overflow: hidden;
}
.wz b{
	font-weight: 700;
	font-size: 18px;
	line-height: 35px;
	margin-bottom: 25px;
}
.wz p{
	line-height: 35px;
	text-indent: 2em;
	font-size: 14px;
	margin-bottom: 10px;
}
.wz img{
	display: block;
	margin: 15px auto;
}
.wz dl{
	width: 50%;
	float: left;
	line-height: 35px;
}
.wz dt{
	width: 30%;
	font-family: "微软雅黑";
	font-weight: 400;
	float: left;
	border-bottom: dashed 1px #000;
	text-align: center;
}
.wz dd{
	width: 70%;
	font-family: "微软雅黑";
	border-bottom: dashed 1px #000;
	float: left;
	color: #666;
}
h2.title{
	padding-left: 10px;
	font-size: 24px;
	font-weight: 400;
	line-height: 50px;
	margin-bottom: 30px;
	border-bottom: solid #93b9e7 2px;
	color: #93b9e7;
}
h2.title span{
	display: inline-block;
	width: 6px;
	height: 24px;
	background-color: #93b9e7;
	border-radius: 2px;
	margin: 13px 8px 0 0;
	float: left;
}
.zb ul{
	width: 990px;
	margin: 0 auto;
	overflow: hidden;
}
.zb li{
	width: 300px;
	padding: 8px;
	margin: 6px;
	float: left;
	border: solid 1px #bce1f4;
	border-radius: 5px;
}
.zb li:hover{
	border-color: #93b9e7;
}
.zb li img{
	display: block;
	width: 100%;
	overflow: hidden;
}
.zb li p:nth-of-type(1){
	font-size: 18px;
	line-height: 35px;
	margin: 10px 0;
	font-weight: 400;
}
.zb li p:nth-of-type(2){
	color: orangered;
	font-size: 20px;
	line-height: 35px;
}
.zb li p:nth-of-type(3){
	color: #999;
	font-size: 14px;
	line-height: 35px;
	text-align: right;
}
.zb li p:nth-of-type(4){
	cursor: pointer;
	width: 150px;
	line-height: 35px;
	text-align: center;
	font-size: 16px;
	color: #FFF;
	background-color: #DC143C;
	margin: 15px auto;
	border-radius: 5px;
}
.zb li p:nth-of-type(4):hover{
	background-color: #c11134;
}


.foot{
	width: 100%;
	text-align: center;
	line-height: 35px;
	font-size: 14px;
	color: #333;
	background-color: #bce1f4;
}
.rw{
	width: 100%;
	overflow: hidden;
}
.rw .left{
	width: 700px;
}
.rw .right{
	width: 300px;
}
.rw .right img{
	width: 296px;
	border: solid 2px #bce1f4;
	border-radius: 5px;
	display: block;
	margin-bottom: 15px;
}
.tc img{
	float: left;
	margin: 10px;
	transition: all 0.6s;
}
.tc img:hover{
	transform: scale(1.05);
}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

IT-北溟有鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web网页设计期末课程大作业：动漫主题网站设计——关于我转生史莱姆这件事(6页)HTML+CSS

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
复制链接

扫一扫