当前位置：首页 > news >正文

基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档

news 2025/7/4 22:59:04

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

五、⚙️网站代码

🧱HTML结构代码

💒CSS样式代码

六、🔧完整源码下载

七、📣更多

一、📔网站题目

⭐ 基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档。

❤ 我的主页：【🚀获取更多优质源码】

❤ 更多源码：【🔥Web网页设计作业成品源码分享(持续更新)】

二、✍️网站描述

🏷️基于web的海贼王动漫介绍 html+css静态网页设计6页+设计文档，网页成品，其中包含：html文件6个、css文件1个、images图片14个。

其中标签用到了：div、p、h1、a、img、等标签。

其中6个网页包含：海贼王首页、漫画简介页、作者介绍页、漫画角色介绍、最近新闻页、漫画赏析页。

三、📚网站介绍

📔网站布局：采用DIV+CSS进行网页布局，兼容各大浏览器保证可以正常展示；

📘网站素材：图片均采自网络素材，符合了页面主题规范；

📒网站文件：其中HTML是网页的结构、CSS是网页的样式、JS是页面的动态效果；

📙网页编辑：如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad++)都可修改代码。

四、🌐网站演示

五、⚙️网站代码

🧱HTML结构代码

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>欢迎来到海贼王基地，喜欢海贼王的朋友都可以来我们网站参观</title><link rel="stylesheet" type="text/css" href="index.css">
</head><body><center><div class="top"><div id="page"><!--欢迎开始--><div class="huanying"><p>您好，欢迎来到海贼王基地！</p><span><a href="jieshao.html">海贼王介绍</a> </span></div><!--欢迎结束--><!--头部开始--><div class="head"><div class="headA"><img src="images/flashA.jpg" width="700" height="120" /></div><div class="headB"></div></div><!--头部结束--><div class="clearit"></div><div class="hSpace10"></div><!--中部开始--><div class="content"><!--左部分开始--><div class="content_l"><ul><li><a href="index.html">海贼王首页</a></li><li><a href="jieshao.html">漫画简介</a></li><li><a href="zuozhe.html">作者介绍</a></li><li><a href="juese.html">漫画角色介绍</a></li><li><a href="xinwen.html">最近新闻</a></li><li><a href="tupian.html">漫画赏析</a></li></ul><div class="hSpace10"></div><div class="zuo"><img src="images/zuo.jpg" /></div></div><!--左部分结束--><!--右部分开始--><div class="content_r"><!--左尾部开始--><div class="l_weibu"><!--介绍开始--><div class="jieshao"><div class="jieshaoA"><h4>漫画简介</h4></div><div class="clearit"></div><p>&nbsp;　&nbsp;《one piece》（中译《海贼王》/海盗路飞）是尾田荣一郎在《周刊少年JUMP》上连载的漫画。“ONEPIECE”在故事中为“一个大秘宝”之意。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONEPIECE”，许多人为了争夺“ONEPIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，蒙其·D·路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标：当上“海贼王”。</p><p>　　故事讲述了主人公路飞立志成为海盗王，为了寻找传说中的秘宝ONEPIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界，一路历经各种艰难挫折，不断朝伟大航路的终点站迈进。</p></div><!--介绍结束--></div><!--左尾部结束--><!--右尾部开始--><div class="r_weibu"><!--动态开始--><div class="hSpace5"></div><div class="xundao"><img src="images/xundao.jpg" /></div><!--动态结束--><div class="hSpace5"></div><!--介绍开始--><div class="mingxing"><div class="jieshaoA"><h4>最近新闻</h4></div><div class="clearit"></div><ul><li><a href="xinwen.html"> [新闻] 艾斯不死之理由!!</a></li><li><a href="xinwen.html"> [新闻] 收集各集的细节分析第十人</a></li><li><a href="xinwen.html"> [新闻] 海贼645话分析 鱼人岛和诺亚的命运</a></li><li><a href="xinwen.html"> [新闻] 奇功绝技之Hancoke</a></li><li><a href="xinwen.html"> [新闻] 草帽物语丨OP644：鱼人岛黑暗面的吞噬</a></li></ul></div><!--介绍结束--></div><!--右尾部结束--><div class="hSpace10"></div><!--推荐开始--><div class="tuijian"><div class="tuijianA"><h4>漫画赏析</h4></div><div class="tuijianB"><a href="images/tu1.jpg" target="_blank"><img src="images/tu1.jpg" border="0" /></a><a href="images/tu2.jpg" target="_blank"><img src="images/tu2.jpg" border="0" /></a><a href="images/tu3.jpg" target="_blank"><img src="images/tu3.jpg" border="0" /></a><a href="images/tu4.jpg" target="_blank"><img src="images/tu4.jpg" border="0" /></a></marquee><div class="clearit"></div></div></div><!--推荐结束--></div><!--右部分结束--><div class="clearit"></div><div class="hSpace10"></div><div class="adA"><img src="images/adB.jpg" /></div><div class="hSpace10"></div><div class="hSpace10"></div></div><!--中部结束--></div></div></center>
</body></html>

💒CSS样式代码

/* CSS Document */body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {margin: 0;padding: 0;border: 0;
}* {margin: 0;padding: 0;border: 0;
}body {font-family: "宋体";font-size: 12px;color: #000000;line-height: 20px;text-align: left;background: #2b020a;
}td,
th {font-family: "宋体";font-size: 12px;color: #000000;
}a {color: #000000;
}A:link {TEXT-DECORATION: none;
}A:visited {TEXT-DECORATION: none;
}A:hover {text-decoration: underline;
}ul,
li {list-style-type: none;
}li a:hover {text-decoration: underline;
}object {margin: 0;padding: 0;border: 0;
}.clearit {clear: both;
}.hSpace1 {height: 1px;line-height: 1px;overflow: hidden;clear: both;
}.hSpace5 {height: 5px;line-height: 5px;overflow: hidden;clear: both;
}.hSpace10 {height: 10px;line-height: 10px;overflow: hidden;clear: both;
}.hSpace5F {height: 5px;line-height: 5px;background: #FFFFFF;overflow: hidden;clear: both;
}.p5 {padding: 5px;
}.borderU {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;
}.borderU_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;padding: 5px;
}.borderH {border-right: 1px solid #75819e;border-left: 1px solid #75819e;
}.borderH_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;padding: 5px;
}.line_X {background: url("images/lineX.gif") repeat-x;overflow: hidden;line-height: 1px;
}#page {width: 970px;margin: 0 auto;background: #d9d9d9
}.top {width: 100%;padding-top: 300px;background: url("images/top.jpg") no-repeat top center;
}.head {width: 970px;margin: 0 auto;
}.headA {width: 700px;height: 120px;float: left;
}.headB {width: 270px;height: 120px;float: left;background: url("images/headB.jpg") no-repeat;
}.headB ul li {text-align: center;color: #FFFFFF;
}.content {width: 970px;margin: 0 auto;
}.content_l {width: 159px;float: left;background: #eaf2ff;
}.content_l ul li {width: 159px;height: 30px;display: block;font-weight: bolder;background: url("images/navA_bg.jpg") no-repeat;font-size: 14px;line-height: 30px;margin-top: 10px;
}.content_l ul li a:hover {color: #091e9d;
}.content_r {width: 801px;float: right;
}.l_weibu {width: 398px;height: 338px;border: 1px solid #d5d5d5;float: left
}.dongtai {width: 390px;height: 145px;background: url("images/dongtai_bg.jpg") no-repeat;margin-top: 4px;
}.dongtaiA h4 {font-size: 14px;font-weight: bolder;color: #091e9d;text-align: left;line-height: 30px;margin-left: 10px;float: left;display: inline
}.dongtaiA span {float: left;margin-left: 10px;display: inline;line-height: 30px;color: #091e9d;
}.dongtai ul {text-align: left;line-height: 24px;padding-top: 5px;margin-left: 10px;
}.jieshao {width: 390px;height: 344px;background: #2b0208;
}.jieshaoA {width: 100%;height: 30px;overflow: hidden;border-bottom: 1px solid #FFFFFF;
}.jieshaoA h4 {font-size: 14px;font-weight: bolder;color: #ffffff;text-align: left;line-height: 30px;margin-left: 10px;float: left;display: inline
}.jieshaoA span {float: left;margin-left: 10px;display: inline;line-height: 30px;color: #ffffff;
}.jieshao p {text-align: left;line-height: 22px;width: 368px;padding-top: 5px;color: #FFFFFF
}.r_weibu {width: 389px;height: 338px;border: 1px solid #d5d5d5;float: right
}.xundao {width: 379px;height: 192px;margin: 0 auto;
}.xundao img {border: 1px solid #000000;display: block;
}.mingxing {width: 379px;height: 142px;background: #2b0208;
}.mingxing ul {text-align: left;margin-left: 20px;padding-top: 5px;
}.mingxing ul li a {color: #FFFFFF;
}.nav {width: 970px;height: 25px;background: url("images/zhanshiA_bg.gif") no-repeat;
}.nav ul {margin-left: 120px;
}.nav ul li {display: block;float: left;width: 100px;font-size: 14px;font-weight: bolder;line-height: 25px;margin-left: 20px;
}.lianjie {width: 970px;margin: 0 auto;background: #eaf2ff;height: 60px;
}.lianjie ul {margin-left: 160px;
}.lianjie ul li {width: 100px;height: 30px;border: 1px solid #000000;background: #5c8be7;float: left;display: block;margin-left: 20px;display: inline;font-size: 14px;font-weight: bolder;line-height: 30px;
}.huanying {width: 970px;height: 29px;background: url("images/huanying.gif") repeat-x;line-height: 29px;
}.huanying p {float: left;line-height: 29px;padding-left: 10px;display: inline
}.huanying span {float: right;line-height: 29px;padding-left: 20px;background: url("../compic/shoucang_bg.gif") no-repeat left;margin-right: 10px;display: inline
}.foot {width: 970px;margin: 0 auto;background: #eaf2ff;line-height: 22px;padding: 20px 0;
}.tuijian {width: 796px;background: #ffffff
}.tuijianA {width: 796px;height: 37px;background: #2b0208;
}.tuijianA h4 {font-size: 14px;font-weight: bold;text-align: left;line-height: 37px;padding-left: 30px;color: #ffffff
}.tuijianB {border-bottom: 1px solid #b2c7eb;border-left: 1px solid #b2c7eb;border-right: 1px solid #b2c7eb;padding: 10px 0;
}.tuijianB img {border: 1px solid #000000;float: left;margin-left: 20px;display: inline;width: 160px;height: 113px;
}.new_r {width: 801px;float: right;
}.new {width: 780px;margin: 0 auto;
}.new h1 {font-size: 16px;font-weight: bold;text-align: center;line-height: 30px;padding: 10px 0;
}.new_cont {text-align: left;line-height: 24px;font-size: 14px;padding-bottom: 20px;
}.new_tu {text-align: left;line-height: 24px;font-size: 14px;padding-bottom: 20px;
}.new_tu img {width: 160px;display: block;padding: 2px;border: 1px solid #666666;float: left;margin-left: 20px;display: inline;
}