失眠网 > web前端页面设计海贼王动漫网页作业 HTML+CSS简单的学生网页作业源码

web前端页面设计海贼王动漫网页作业 HTML+CSS简单的学生网页作业源码

时间：2021-01-10 03:33:02

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

B01.海贼王中乔巴专题漫画(5个页面)

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/styles.css" type="text/css" rel="stylesheet" /><title>海贼王-乔巴专题</title></head><body><style>A.applink:hover {border: 2px dotted #dce6f4;padding: 2px;background-color: #ffff00;color: green;text-decoration: none;}A.applink {border: 2px dotted #dce6f4;padding: 2px;color: #2f5bff;background: transparent;text-decoration: none;}A.info {color: #2f5bff;background: transparent;text-decoration: none;}A.info:hover {color: green;background: transparent;text-decoration: underline;}</style><div class="banner"><img src="images/banner.gif" /></div><div class="content"><div class="content_nav"><a href="index.html" class="now_nav">漫画简介</a><a href="pic.html">乔巴简介</a><a href="qb.html">乔巴图集</a><a href="mh.html">漫画欣赏</a><a href="author.html">网站介绍</a></div><div class="content_qb"><img src="images/qb.png" /><p>《onepiece》（中译《海贼王》/海盗路飞）是尾田荣一郎在《周刊少年JUMP》上连载的漫画。"ONEPIECE"在故事中为"一个大秘宝"之意。传说中'海贼王'哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏"ONEPIECE"，许多人为了争夺"ONEPIECE"，争相出海，许多海贼开始树立霸权，而形成了"大海贼时代"。十年后，蒙其·D·路飞为了要实现与因救他而断臂的四皇'红发'香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入"伟大航道"，目标：当上"海贼王"。故事讲述了主人公路飞立志成为海盗王，为了寻找传说中的秘宝ONEPIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界，一路历经各种艰难挫折，不断朝伟大航路的终点站迈进。</p></div><div class="content_mh"><h1><img src="images/mh.gif" /></h1><a href="#"><img src="images/1_03.gif" /></a><a href="#"><img src="images/2_03.gif" /></a><a href="#"><img src="images/3_03.gif" /></a><a href="#"><img src="images/4_03.gif" /></a><a href="#"><img src="images/1_03.gif" /></a></div><div class="content_foot"><p></p></div></div></body></html>

🏠CSS样式代码

@charset "utf-8";/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {margin: 0;padding: 0;}* {margin: 0;padding: 0;border: 0;}body {font-family: "宋体";font-size: 14px;background: url(../images/body.gif) repeat-x;}a {text-decoration: none;color: #fff;}ul,li {list-style-type: none;}img {border: 0;}.banner,.content {width: 1584px;height: 351px;margin: auto;}.content {height: 724px;background: url(../images/content.png) no-repeat;position: absolute;top: 325px;}.content_nav {width: 960px;height: 80px;margin: auto;}.content_nav a {line-height: 80px;padding-left: 25px;padding-right: 50px;font-weight: bold;}.content_nav a:hover,.now_nav {color: #429cd1;}.content_qb,.content_mh,.content_foot,.content_mh1 {width: 960px;margin: auto;}.content_qb img {width: 259px;height: 271px;float: left;margin: 40px 25px 0px 40px;}.content_qb p {width: 600px;float: left;text-indent: 2em;line-height: 24px;color: #b8b3b3;margin-top: 60px;}.content_mh {clear: both;}.content_mh h1 {margin: 0px 0px 20px 40px;padding-top: 60px;}.content_mh a,.content_mh1 a {display: inline-block;margin-left: 25px;}.content_foot {margin-top: 55px;}.content_foot p {text-align: center;height: 24px;color: #b8b3b3;font-size: 12px;}.content1 {background: url(../images/content1.png) no-repeat;}.content_mh1 a {margin-top: 63px;}.content_mh1 a img {width: 157px;height: 108px;}.content_mh1 p {line-height: 24px;color: #b8b3b3;padding-left: 50px;}.content_mh1 h1 {font-size: 14px;color: #fff;padding-left: 50px;}