HTML静态网页作业成品(HTML+CSS)——动漫犬夜叉主题网页设计制作(1个页面)

🎉不定期分享源码，关注不丢失哦

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- 1、HTML代码
- 2、CSS部分代码
五、源码获取

一、作品介绍

🏷️本套采用DIV+CSS布局，未使用Javacsript代码，共有1个页面。

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

1、HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div id="h">
		<img src="./images/logo.jpeg" alt="" id="logo">
	</div>
	<div id="b">
		<img src="./images/1.jpg" alt="" id="img">
	</div>
	
	
	<div id="t">
		<h1>剧情简介</h1>
		<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大妖怪犬大将斗牙王与人类公主十六夜的儿子---犬夜叉，因为自己半妖的身份受到人类与妖怪的排斥，为了成为真正的妖怪而想得到四魂之玉；而巫女桔梗为了保护和净化四魂之玉，运用灵力不断与前来抢夺四魂之玉的妖怪战斗而犬夜叉也看到了渴望过平凡生活的巫女桔梗。在不断的相互了解中，两人相爱了，并最终约定利用四魂之玉的力量，把犬夜叉变成人类，守护使命结束的桔梗也可以回归到平凡生活。但是，在约定的日子里，发生了难以预料的变故。被假犬夜叉袭击而受到重伤的桔梗在背叛的愤怒中，用尽力气把犬夜叉封印在御神木上，然后带着四魂之玉在火焰中死去。悲剧就此拉开序幕……
		</p>
		<p>
			<img src="./images/2.jpg" alt="">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500年后的现代一个普通的少女——日暮戈薇，因为自己身体里的四魂之玉，被妖怪百足妖妇强行拉入食骨之井中，跌入犬夜叉被封印后50年的战国时代，与被封印在御神木上的犬夜叉邂逅，并在迫不得已的情况下解开了少年的封印。在随后与妖怪的战斗中戈薇的箭射中了四魂之玉使之散落成碎片。一心想变成大妖怪的犬夜叉无奈之下跟能看见四魂之玉的戈薇，不得不陪伴着戈薇去寻找四处飘落的碎片，寻找四魂碎片的旅程就此开始了。中途碰到了七宝、弥勒、珊瑚并与他们成为了伙伴，这些伙伴都有着悲惨的遭遇，小狐狸七宝的爸爸被雷兽兄弟所杀害，所以来抢戈薇手中的四魂之玉，后来犬夜叉杀掉了雷兽兄弟替七宝报了仇。无家可归的七宝便跟随犬夜叉他们一起开始了寻找四魂之玉碎片的旅途。弥勒的家族从祖父开始被奈落下了风穴的诅咒，右手掌上的洞可以无限吸进任何东西，最终连自己都会被吸入消失。他的父亲和祖父都是因为这样失去了生命。弥勒便想抢到四魂之玉杀掉奈落解除诅咒，同时为家人报仇。此间遇到了犬夜叉他们，互相了解后，结伴同行。珊瑚是身为妖怪退治屋的除妖师，被奈落陷害，全村人被杀害，自己的家人也被让奈落控制的亲弟弟杀害，还被奈落挑拨说是犬夜叉所为，便找犬夜叉报仇，经过和犬夜叉的一番战斗了解真相后，互相成为了朋友，一起踏上了旅途。之后，他们在与奈落的斗争中一起成长。
		</p>
	</div>

2、CSS部分代码

* {
	padding: 0;
	margin: 0;
}
body {
	background-color: rgb(254, 160, 178);
}
#h {
	width: 1320px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	background-color: #fff;
}
#logo {
	width: 180px;
}

#b {
	width: 1320px;
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
}
#img {
	display: inline-block;
	width: 1320px;
}

#t {
	width: 1320px;
	margin: 0 auto;
	background-color: #fff;
}
#t h1 {
	text-align: center;
	line-height: 72px;
	text-align: center;
}
#t p {
	line-height: 32px;
	padding: 0 40px;
	padding-bottom: 20px;
}

#t p img {
	float: right;
	width: 300px;
	margin-left: 20px;
}
#tt {
	width: 1320px;
	margin: 0 auto;
	background-color: #fff;
	padding-bottom: 20px;
}
#tt h1 {
	text-align: center;
	line-height: 72px;
	text-align: center;
}