火影忍者网页设计模板 web期末作业

一、模板介绍

这是一套火影忍者网页设计模板，代码原创简单规范，没有使用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>
            
            <!-- 中间大图 -->
            <div class="banner">
                <img src="images/one.jpg" alt="">
            </div>
            <div class="overviews">
                <div class="overview">
                    <img src="images/two.jpg" alt="">
                    <h3><a href="author.html">作者简介</a></h3>
                    <p class="brief_desc">
                        岸本齐史，日本知名男性漫画家，1974年11月8日出生，是《火影忍者》的作者。他出生于日本冈山县，毕业于九州产业大学。岸本齐史的漫画风格独特，笔下人物形象鲜明，故事情节扣人心弦。他的作品《火影忍者》在全球范围内广受欢迎，深受读者喜爱。作为一位才华横溢的漫画家，岸本齐史凭借其卓越的创作实力和独特的艺术风格，成为了日本漫画界的重要人物。
                    </p>
                </div>
                <div class="overview">
                    <img src="images/three.jpg" alt="">
                    <h3><a href="profile.html">人物简介</a></h3>
                    <p class="brief_desc">
                        鸣人，一个充满热血与冲劲的少年，性格倔强，总是勇往直前，无论何时都充满活力。他拥有出类拔萃的忍术天赋，但只接受过最基础的教育，学习成绩并不出色。尽管如此，他凭借自己的努力，不断提升自己的实力。他性格直率，不拘小节，但有时候过于冲动，容易犯错。他经常为了保护同伴而奋不顾身，即使面对强大的敌人也毫不退缩。他有着坚定的信念和决心，为了成为火影，他不断努力，克服重重困难。
                    </p>
                </div>
                <div class="overview">
                    <img src="images/four.jpg" alt="">
                    <h3><a href="synopsis.html">剧情简介</a></h3>
                    <p class="brief_desc">
                        一个生活在木叶隐村的少年，自小身上封印着强大的九尾妖狐，因此备受村民疏远和误解。然而，他凭借坚定的信念和毅力，立志成为火影，以赢得村民的认可和尊重。在成长的道路上，鸣人与众多伙伴一同经历各种考验和挑战，逐渐成长为优秀的忍者。他们共同面对晓组织等强大敌人，为了守护村子和朋友，不断奋斗和拼搏。最终，鸣人成功实现了自己的梦想，成为了木叶隐村的火影，为村子和朋友带来了和平。
                    </p>
                </div>
            </div>
            <footer>
                <p class="foot_title">火影忍者网站</p>
            </footer>
        </div>
    </body>
</html>

CSS：

/* 初始样式 */
body {
    margin: 0;
    padding: 0;
    background-color: #ffdfdf;
}
a{
    text-decoration: none;
}
a:hover{
    color: #303030;
}
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: #f55149;
}
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%;
}
/* 首页三个简介样式 */
.overviews {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    padding-top: 10px;
}
.overview{
    width: 31.8%;
}
.overview img{
    width: 100%;
}
.overview h3 {
    margin: 12px 0;
}
.overview h3 a{
    color: #f55149;
    
}
.overview p {
    color: #5a5a5a;
    line-height: 28px;
}
/* 页脚样式 */
footer {
    padding: 25px 0;
    background-color: #f55149;
    text-align: center;
}
.foot_title {
    color: white;
    margin: 0;
}

好了，首页的网页代码就是这样。

标签：前端 html5 大作业

本文转载自: https://blog.csdn.net/a13580529499/article/details/135622252
版权归原作者 优质模板网 所有，如有侵权，请联系我们删除。

火影忍者网页设计模板 web期末作业

一、模板介绍

二、运用技术

三、模板效果图

四、部分源代码

发表评论

“火影忍者网页设计模板 web期末作业”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航