海贼王动漫网页设计作业 html+css网页
一、模板介绍
这是一套海贼王动漫网页模板，代码原创简单规范，没有使用js，纯手工敲，非网上爬取的老旧杂乱代码。模板共有7个页面，包括作者简介、剧情介绍、角色介绍，登录注册页面等。蓝色主题色更加贴合主题，突出动漫的阳光向上的精神。不管是web期末大作业，还是自己学习网页制作，都非常值得参考！
二、运用技术
使用了flex布局、多媒体视频、超链接、列表、表单、css效果等基本的网页制作技术。
三、模板效果图
篇幅有限，只展示一些。
四、人物简介页源代码
HTML：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>人物简介</title><link href="css/style.css" rel="stylesheet"></head><body><div class="container"><header><div class="topimg"><img src="images/top.jpg" alt=""></div><nav><ul><li><a href="index.html">网站首页</a></li><li><a href="author.html">作者简介</a></li><li><a href="profile.html">人物简介</a></li><li><a href="synopsis.html">剧情简介</a></li><li><a href="review.html">精彩回顾</a></li><li><a href="login.html">快速登录</a></li><li><a href="register.html">粉丝注册</a></li></ul></nav></header><main><div class="title-img"><img src="images/six.png"></div><ul class="persons"><li class="person"><img src="images/person1.jpg" class="q"><h3 class="person_title">蒙奇·D·路飞</h3><p class="person_desc">蒙奇·D·路飞是海贼王的主人公，他是一个拥有橡胶果实能力的少年。他性格热血、善良、坚定，一直追求成为海贼王。路飞率领着他的伙伴们在大海上展开冒险，不断挑战强大的敌人，逐渐揭开世界的真相。</p></li><li class="person"><img src="images/person2.jpg" class="q"><h3 class="person_title">罗罗诺亚·索隆</h3><p class="person_desc">罗罗诺亚·索隆是路飞的第一个伙伴，他是一个剑士，拥有高超的剑术和坚定的信念。他与路飞结缘，并加入了他的海贼团队。索隆性格冷静、沉着，是路飞的重要支持者和战友。</p></li><li class="person"><img src="images/person3.jpg" class="q"><h3 class="person_title">娜美</h3><p class="person_desc">娜美是路飞的第二个伙伴，她是一个优秀的航海士，拥有丰富的航海知识和技能。她与路飞等人结缘后，加入了海贼团队，成为了他们的重要伙伴。娜美性格开朗、乐观，是团队的开心果和智囊。</p></li><li class="person"><img src="images/person4.jpg" class="q"><h3 class="person_title">乌索普</h3><p class="person_desc">乌索普是路飞的第三个伙伴，他是一个狙击手，擅长使用各种武器和制造各种奇怪的道具。他性格胆小、爱吹牛，但也有一颗勇敢的心。乌索普在团队中经常制造笑料，但也为团队提供了重要的帮助和支持。</p></li><li class="person"><img src="images/person5.jpg" class="q"><h3 class="person_title">乔巴</h3><p class="person_desc">乔巴是路飞的第四个伙伴，他是一个擅长治疗和变化的驯鹿人。他性格温和、善良、可爱，是团队中的小医生和小跟班。乔巴虽然力量不大，但他拥有高超的医术和变化能力，为团队提供了重要的医疗和战略支持。</p></li><li class="person"><img src="images/person6.jpg" class="q"><h3 class="person_title">弗兰奇</h3><p class="person_desc">弗兰奇是路飞的第五个伙伴，他是一个擅长修船和制造机械的改造人。他性格豪放、豁达、搞笑，是一个十分有趣的人。弗兰奇为团队提供了强大的技术支持和机械制造能力，成为了他们在冒险中的重要伙伴之一。</p></li></ul></main><footer><p class="foot_title">海贼王网站</p></footer></div></body>
</html>CSS：
/* 初始样式 */
body {margin: 0;padding: 0;background-color: #cce0ff;
}
a{text-decoration: none;
}
a:hover{color: #1e1e1e;
}
ul {list-style: none;margin: 0;padding: 0;
}
img{max-width: 100%;
}/* 主容器宽度 */
.container{width: 1100px;margin: 0 auto;background-color: white;
}
.topimg img {width: 100%;display: block;
}/* 导航栏样式 */
nav{background-color: #0371e6;
}
nav ul {display: flex;justify-content: space-around;
}
nav ul li {position: relative;flex: 1;text-align: center;
}
nav ul li a {color: white;padding: 15px 30px;display: block;
}
nav ul li:not(:last-child) a::after { content: '|';color: white;position: absolute; right: 0;
}/* 大图样式 */
.banner {padding: 15px;
}
.banner img{width: 100%;
}
/* 人物简介 */
.title-img {margin-bottom: 20px;
}
.persons {display: flex;flex-wrap: wrap;justify-content: space-around;
}
.person {width: 30%;text-align: center;margin-bottom: 20px;
}
.person h3 {color: #0371e6;margin: 10px;
}
.person p {color: #5a5a5a;line-height: 23px;
}
.person img {border-radius: 10px;
}基本的网页设计代码就是这样，需要所有页面完整代码也可以私我，辛苦创作不白嫖，请喝杯奶茶就行，日常基本在线。