Web大学生网页作业成品——动漫猪猪侠网站设计与实现(HTML+CSS)（4个页面）

爱码网页

于 2024-08-07 08:18:08 发布

阅读量212

点赞数 4

分类专栏： html网页设计与制作静态网页学生HTML个人网页作业作品文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_42283461/article/details/140971367

版权

html网页设计与制作同时被 3 个专栏收录

6 篇文章 21 订阅

订阅专栏

静态网页

6 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

6 篇文章 17 订阅

订阅专栏

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

一、作品介绍 🔥

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有4个页面。

二、作品演示 ☁️

在这里插入图片描述

三、代码目录 🏠

在这里插入图片描述

四、网站代码 👿

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
	<head>

		<meta charset="UTF-8">
		<title>首页</title>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<div class="w">
					<div class="logo">
						<a href="index.html">
							<img src="./images/logo.png" class="logo_img">
						</a>
					</div>
					<ul class="nav">
						<li class="active"><a href="index.html">首页</a></li>
						<li><a href="xingxiang.html">角色形象</a></li>
						<li><a href="dianying.html">大电影</a></li>
						<li><a href="wenjuan.html">问卷表单</a></li>
					</ul>
				</div>
			</div>
			<div class="banner">
				<div class="w">
					<img src="./images/banner.jpg">
				</div>
			</div>


			<div class="main">
				<div class="w">
					
					<h1 class="main_title">动漫简介</h1>
					<p>猪猪侠是国产动画《猪猪侠》系列中的主角，一个出生于边境村镇、生活安逸的少年，个性调皮、乐观，富有好奇心。
喜爱零食，能仅靠糖果饼干度日，因为吃零食能启发猪猪侠的思维，所以每当他遇到阻碍时，他都会掏出一件零食，以帮自己渡过难关。</p>
					<div class="main_title">动漫图片</div>
					<div class="main_tu">
						<div class="tu">
							<img src="./images/tu1.jpeg">
						</div>
						<div class="tu">
							<img src="./images/tu2.jpeg">
						</div>
						<div class="tu">
							<img src="./images/tu3.jpeg">
						</div>
					</div>
					<h1 class="main_title">动漫视频</h1>
					<div class="video">
						<video src="./video/1.mp4" controls width="100%" poster="./images/video_fm.png"></video>
					</div>
				</div>
			</div>
			<div class="footer">
				猪猪侠 版权所有
			</div>
		</div>
	</body>
</html>