南通网站排名服务,谷歌paypal官网登录入口,郑州好的网站建设公司哪家好,音乐制作#x1f4c2;文章目录
一、#x1f4d4;网站题目
二、✍️网站描述
三、#x1f4da;网站介绍
四、#x1f310;网站演示
五、⚙️网站代码
#x1f9f1;HTML结构代码
#x1f492;CSS样式代码
六、#x1f527;完整源码下载
七、#x1f4e3;更多 一、#…文章目录
一、网站题目
二、✍️网站描述
三、网站介绍
四、网站演示
五、⚙️网站代码
HTML结构代码
CSS样式代码
六、完整源码下载
七、更多 一、网站题目
⭐ 基于web的海贼王动漫介绍 htmlcss静态网页设计6页设计文档。
❤ 我的主页【获取更多优质源码】
❤ 更多源码【Web网页设计作业成品源码分享(持续更新)】 二、✍️网站描述
️基于web的海贼王动漫介绍 htmlcss静态网页设计6页设计文档网页成品其中包含html文件6个、css文件1个、images图片14个。
其中标签用到了div、p、h1、a、img、等标签。
其中6个网页包含海贼王首页、漫画简介页、作者介绍页、漫画角色介绍、最近新闻页、漫画赏析页。 三、网站介绍
网站布局采用DIVCSS进行网页布局兼容各大浏览器保证可以正常展示
网站素材图片均采自网络素材符合了页面主题规范
网站文件其中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 xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8title欢迎来到海贼王基地喜欢海贼王的朋友都可以来我们网站参观/titlelink relstylesheet typetext/css hrefindex.css
/headbodycenterdiv classtopdiv idpage!--欢迎开始--div classhuanyingp您好欢迎来到海贼王基地/pspana hrefjieshao.html海贼王介绍/a /span/div!--欢迎结束--!--头部开始--div classheaddiv classheadAimg srcimages/flashA.jpg width700 height120 //divdiv classheadB/div/div!--头部结束--div classclearit/divdiv classhSpace10/div!--中部开始--div classcontent!--左部分开始--div classcontent_lullia hrefindex.html海贼王首页/a/lilia hrefjieshao.html漫画简介/a/lilia hrefzuozhe.html作者介绍/a/lilia hrefjuese.html漫画角色介绍/a/lilia hrefxinwen.html最近新闻/a/lilia hreftupian.html漫画赏析/a/li/uldiv classhSpace10/divdiv classzuoimg srcimages/zuo.jpg //div/div!--左部分结束--!--右部分开始--div classcontent_r!--左尾部开始--div classl_weibu!--介绍开始--div classjieshaodiv classjieshaoAh4漫画简介/h4/divdiv classclearit/divpnbsp; nbsp;《one piece》中译《海贼王》/海盗路飞是尾田荣一郎在《周刊少年JUMP》上连载的漫画。“ONEPIECE”在故事中为“一个大秘宝”之意。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONEPIECE”许多人为了争夺“ONEPIECE”争相出海许多海贼开始树立霸权而形成了“大海贼时代”。十年后蒙其·D·路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海在遥远的路途上找寻着志同道合的伙伴一起进入“伟大航道”目标当上“海贼王”。/pp 故事讲述了主人公路飞立志成为海盗王为了寻找传说中的秘宝ONEPIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界一路历经各种艰难挫折不断朝伟大航路的终点站迈进。/p/div!--介绍结束--/div!--左尾部结束--!--右尾部开始--div classr_weibu!--动态开始--div classhSpace5/divdiv classxundaoimg srcimages/xundao.jpg //div!--动态结束--div classhSpace5/div!--介绍开始--div classmingxingdiv classjieshaoAh4最近新闻/h4/divdiv classclearit/divullia hrefxinwen.html [新闻] 艾斯不死之理由!!/a/lilia hrefxinwen.html [新闻] 收集各集的细节分析第十人/a/lilia hrefxinwen.html [新闻] 海贼645话分析 鱼人岛和诺亚的命运/a/lilia hrefxinwen.html [新闻] 奇功绝技之Hancoke/a/lilia hrefxinwen.html [新闻] 草帽物语丨OP644鱼人岛黑暗面的吞噬/a/li/ul/div!--介绍结束--/div!--右尾部结束--div classhSpace10/div!--推荐开始--div classtuijiandiv classtuijianAh4漫画赏析/h4/divdiv classtuijianBa hrefimages/tu1.jpg target_blankimg srcimages/tu1.jpg border0 //aa hrefimages/tu2.jpg target_blankimg srcimages/tu2.jpg border0 //aa hrefimages/tu3.jpg target_blankimg srcimages/tu3.jpg border0 //aa hrefimages/tu4.jpg target_blankimg srcimages/tu4.jpg border0 //a/marqueediv classclearit/div/div/div!--推荐结束--/div!--右部分结束--div classclearit/divdiv classhSpace10/divdiv classadAimg srcimages/adB.jpg //divdiv classhSpace10/divdiv classhSpace10/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;
} 六、完整源码下载
点击【下载链接】 七、更多
文章推荐【修改文件修改日期为最新】
文章推荐【Web网页设计作业成品源码分享(持续更新)】
关注我获取更多源码~
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业各种设计应有尽有持续更新中..
如果我的文章对您有帮助请“点赞”“✍️评论”“收藏” 一键三连哦
