HTML+CSS简单漫画网页设计成品--(红猪（9页）带注释)-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML+CSS简单漫画网页设计成品--(红猪（9页）带注释)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫网页设计成品模板 | 简单漫画网页设计成品 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

红猪网站,HTML5期末大作业,web期末作业设计网页,web网页设计与开发,html,css,javascript,dreamweaver,前端

HTML结构代码



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>红猪网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>

<body>

<div class="container">
	
	<div class="wrapper">
	
		<div class="header">
			<a href="index.html"><img src="images/header.jpg"></a>
		</div>
		
		<div class="nav">
			<a href="index.html">红猪首页</a>
			<a href="info.html">影片信息</a>
			<a href="plot.html">影片剧情</a>
			<a href="person.html">影片人物</a>
			<a href="make.html">影片制作</a>
			<a href="gag.html">幕后花絮</a>
			<a href="mean.html">影片意义</a>
			<a href="word.html">影片评价</a>
			<a href="register.html">影迷注册</a>
			<a href="login.html">影迷登录</a>
		</div>
	
		<div class="focus">
			<a href="info.html"><img src="images/focus.jpg"/></a>
		</div>

		<div class="line">
			<b>影片剧情</b>
			<p><a href="plot.html">第一次世界大战结束不久后的意大利。1920年代的亚德里亚海，一群无恶不作的空中海盗横行无忌，他们到处抢掠（除了一间酒吧）。前意大利空军英雄，一生挚爱飞行的波鲁克决意从人世的庸俗生活中脱身而出，自施魔法变成一头猪，凭借出色的技术驾驶红色飞艇孤身与横行在亚德里亚海的空中强盗周旋，以赚取赏金逍遥度日。一天，波鲁克又赢了海盗们，让海盗们感到自己能得到的利益越来越少，海盗们为了对付波鲁克，从美国请来外援“马面人”卡奇斯。卡奇斯和波鲁克在吉娜的酒吧见面，相互嘲讽。。。。。</a></p>
			<a href="plot.html"><img src="images/plot.jpg"/></a>
			<audio src="media/media.mp3" controls="controls"></audio>
		</div>
		
		<div class="line">
			<b>影片制作</b>
			<a href="make.html"><img src="images/make.jpg"/></a>
			<p><a href="make.html">《红猪》将背景设定在二十世纪二十年代的意大利，欧洲风味的背景和音乐，为了更加真实地表达出欧洲当地的风土人情，制作委员会曾到过阿德里亚沿海进行实地考查。除了波鲁克去米兰那段，大部分故事是发生在意大利和前南斯拉夫之间的亚得里亚海。波鲁克就住在亚得里亚海沿克罗地亚海岸的一个岛上。一开始，宫崎骏打算把故事的背景设定在克罗地亚的Dovrok。然而，就在他创作《红猪》的时期，前南斯拉夫内战爆发了，这让宫崎骏非常震惊。因此，故事比他预期的要严肃一点，而且，他把故事搬出了克罗地亚。</a></p>
		</div>
		
		<div class="item">
			<h3>影片人物</h3>
			<p>
				<a href="person.html"><img src="images/person1.jpg"/></a>
				<span><a href="person.html">波鲁克·罗梭，原本是一名空军飞行员，一战后对自己施加咒语，把自己变成了一个像猪的人形。</a></span>
			</p>
			<p>
				<a href="person.html"><img src="images/person2.jpg"/></a>
				<span><a href="person.html">吉娜，波鲁克的青梅竹马，也是好友，经营一家酒店，高贵优雅，有一副好嗓音，深爱着波鲁克。</a></span>
			</p>
			<p>
				<a href="person.html"><img src="images/person3.jpg"/></a>
				<span><a href="person.html">菲欧·保可洛，保可洛老爹的孙女，成长于美国，聪明勤劳，大胆活泼，对飞机设计有惊人的天赋和能力。</a></span>
			</p>
			<p>
				<a href="person.html"><img src="images/person4.jpg"/></a>
				<span><a href="person.html">保可洛老爹，保可洛飞机公司老板，著名飞机设计师，曾帮波鲁克设计制造了第一代的红色水上飞机。</a></span>
			</p>
			<p>
				<a href="person.html"><img src="images/person5.jpg"/></a>
				<span><a href="person.html">菲拉林，波鲁克的老战友，担任意大利空军飞行员，穿着一身意大利军装，保护波鲁克，为其提供情报。</a></span>
			</p>
		</div>
	
		<div class="line">
			<b>影片意义</b>
			<p><a href="mean.html">《红猪》中的主角波鲁科是一战中意大利空军的王牌飞行员，但在经历了残酷战争后，自我诅咒成一头猪。关于这种诅咒，影片并没有交代，但一个较为普遍的解读是波鲁科目睹了队友的牺牲以及战争的残酷后，开始厌恶和嫌弃自己。影片中他在电影院和昔日少佐菲拉林的对话中可以看出：要我加入法西斯，我宁愿做一头猪。这种对不法战争的厌恶，也正是在亲眼目睹了80年代世界格局变化以及局部地区冲突不断情况下宫崎骏的内心发声。很多人认为这部电影有宫崎骏自传的性质，其实他的很多作品都有着个人印记。</a></p>
			<a href="mean.html"><img src="images/mean.jpg"/></a>
		</div>
	
		<div class="line">
			<b>影片评价</b>
			<a href="word.html"><img src="images/word.jpg"/></a>
			<p><a href="word.html">宫崎骏的影片总是反复出现一些意象。天空应该是他最钟爱的情感，一睁开眼睛，什么也听不见。那一种平静里，连自己都被忘却。海涛显然是另一种，潜在水底的时候，也是睁开眼睛，什么也听不见。因此水上飞机是最好的连接，有天空，有海涛。其实人类也是水天之间最好的连接，他们可以在白云里看见海面的倒影，也可以在水中仰望蓝天。天空，海，人，当他们在一起的时候，世界就是善良的。这是宫崎骏动画系列中非常特殊的一部，是唯一一部完全是从成年人角度拍摄成年人题材的作品。</a></p>
		</div>
	
		<div class="footer">Copyright @ 2022 hongzhu.com 红猪网 版权所有</div>
	
	</div>
	
</div>

</body>
</html>