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

已于 2024-12-02 11:25:39 修改
阅读量963 收藏 11
点赞数 8
分类专栏： Web前端大作业 文章标签： 前端 html css
于 2024-12-02 10:45:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43770056/article/details/144182058
版权

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

五、⚙️网站代码

🧱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 html
    PUBLIC "-//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》上连载的漫画。“ONE
                                    PIECE”在故事中为“一个大秘宝”之意。传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE
                                    PIECE”，许多人为了争夺“ONE
                                    PIECE”，争相出海，许多海贼开始树立霸权，而形成了“大海贼时代”。十年后，蒙其·D·路飞为了要实现与因救他而断臂的四皇‘红发’香克斯的约定而出海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标：当上“海贼王”。
                                </p>
                                <p>　　故事讲述了主人公路飞立志成为海盗王，为了寻找传说中的秘宝ONE
                                    PIECE而展开的凶险无比同时也波澜壮阔的冒险故事。草帽小子路飞带领船员从东海启程经伟大航道到新世界，一路历经各种艰难挫折，不断朝伟大航路的终点站迈进。</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;
}

六、🔧完整源码下载

​👉🏻点击【下载链接】👈🏻​

七、📣更多

👉🏻文章推荐：【修改文件修改日期为最新】

👉🏻文章推荐：【Web网页设计作业成品源码分享(持续更新)】

👉🏻关注我，获取更多源码~

👉🏻html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..

👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网页精选

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值