HTML5期末考核大作业使用HTML+CSS技术制作学生动漫网页源码

html5网页设计

于 2022-10-13 11:22:26 发布

阅读量47

点赞数

分类专栏： web前端期末大作业文章标签： css html html5 前端

本文链接：https://blog.csdn.net/qq_38514354/article/details/127297929

版权

web前端期末大作业专栏收录该内容

1111 篇文章 81 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

B18JP 海贼王6页代码质量好(海贼王动漫主题)~ 学生网页设计作业源码(HTML+CSS)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码



<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>海贼王</title>
    <link href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <a href="#"><img src="images/logo.png" class="logo"/></a>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">海贼王</a></li>
                <li><a href="jieshao.html">故事介绍</a></li>
                <li><a href="renwu.html">主要人物</a></li>
                <li><a href="meitu.html">海贼美图</a></li>
                <li><a href="zhuce.html">注册用户</a></li>
                <li><a href="liuyan.html">随笔留言</a></li>
            </ul>
        </div>
        <div id="main">
            <div class="content">
                <ul class="list">
                    <li>
                        <img src="images/zy1.jpg" />
                        <h5>“草帽”蒙奇·D·路飞</h5>
                        <p>初次登场：漫画第1话 年龄：17岁→19岁 生日：5月5日 血型：F型 身高：172cm→174cm 身份：草帽海贼团船长 故乡：东海·风车村 ...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy2.jpg" />
                        <h5>“小贼猫”娜美</h5>
                        <p>初次登场：漫画第8话 年龄：18岁→20岁 生日：7月3日 血型：X型 身份：阿龙海贼团测量员→草帽海贼团航海士 故乡：东海▪可可亚西村...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy3.jpg" />
                        <h5>“海贼猎人”罗罗诺亚·索隆</h5>
                        <p>初次登场：漫画第3话 年龄：19岁→21岁 生日：11月11日 血型：XF型 身份：东海海贼赏金猎人→草帽海贼团战斗员 故乡：东海·霜月村...</p>
                        <a href="#">详情...</a>
                    </li>
                    <li>
                        <img src="images/zy4.jpg" />
                        <h5>“GOD”▪乌索普</h5>
                        <p>初次登场：漫画第23话 年龄：17岁→19岁 生日：4月1日 血型：S型 身份：乌索普海贼团船长→草帽海贼团狙击手 故乡：东海▪西罗普村...</p>
                        <a href="#">详情...</a>
                    </li>
                </ul>
            </div>
            <div class="sidebar">
                <div class="denglu">
                    <h2>用户登录</h2>
                    <p><span>账号：</span><input type="text" /></p>
                    <p><span>密码：</span><input type="password" /></p>
                    <div class="btn">
                        <a href="#"><img src="images/denglu.png" /></a>
                        <a href="#"><img src="images/zhuce.png" /></a>
                    </div>
                </div>
                <div class="chengyuan">
                    <h2>草帽海贼团成员</h2>
                    <ul>
                        <li><a href="#">“草帽”蒙奇·D·路飞</a></li>
                        <li><a href="#">“海贼猎人”罗罗诺亚·索隆</a></li>
                        <li><a href="#">“小贼猫”娜美</a></li>
                        <li><a href="#">“GOD”▪乌索普</a></li>
                        <li><a href="#">“黑足”山治</a></li>
                        <li><a href="#">“爱吃棉花糖的驯鹿”托尼托尼·乔巴</a></li>
                        <li><a href="#">“恶魔之子”妮可·罗宾</a></li>
                        <li><a href="#">“改造人”弗兰奇</a></li>
                        <li><a href="#">“灵魂之王”布鲁克 </a></li>
                    </ul>
                    <img src="images/chengyuan.jpg" />
                </div>
            </div>
        </div>
        <div id="footer">
        
        </div>
    </div>
</body>

</html>

🏠CSS样式代码



@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #999999;
}

body {
    margin: 0px;
    padding: 0px;
    color: #666666;
    font-family: arial;
    font-size: 12px;
    background: #010206;
}

#wrapper {
    width: 1020px;
    margin: 0 auto;
    border: #333 1px solid;
    overflow: hidden;
}

/*头部*/

#header {
    width: 1020px;
    height: 410px;
    background-image: url(../images/banner.jpg);
    overflow: hidden;
}

#header .logo {
    display: block;
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
}

/*导航*/

#menu {
    width: 100%;
    height: 53px;
    margin-bottom: 10px;
    background: url(../images/menu.jpg) no-repeat;
}

#menu ul li {
    display: block;
}

#menu ul li a {
    float: left;
    display: block;
    width: 170px;
    height: 53px;
    line-height: 53px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: url(../images/menu_bian.jpg) center left no-repeat;
}

#menu ul li a:hover {
    color: #00ccff;
}

/*中间*/

#main {
    width: 960px;
    padding: 30px;
    line-height: 2;
    overflow: hidden;
}

#main .content {
    float: left;
    width: 560px
}

.content .list {
    overflow: hidden;
}

.content .list li {
    height: 136px;
    overflow: hidden;
    margin-bottom: 30px;
}

.content .list li img {
    width: 200px;
    height: 130px;
    border: 3px solid #35373b;
    float: left;
    margin-right: 20px;
}

.content .list li h5 {
    font-size: 16px;
    color: #d82b82;
}

.content .jianjie li {
    line-height: 30px;
}

#main .sidebar {
    float: right;
    width: 320px;
}

.sidebar .denglu h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.sidebar .denglu p {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

.sidebar .denglu p span {
    display: block;
    width: 60px;
    float: left;
}

.sidebar .denglu p input {
    display: block;
    width: 260px;
    height: 30px;
    border: none;
    float: left;
}

.sidebar .denglu .btn img {
    float: left;
    margin-left: 60px;
}

.sidebar .chengyuan {
    clear: both;
    padding-top: 30px;
}

.sidebar .chengyuan h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.sidebar .chengyuan li {
    line-height: 30px;
    border-bottom: 1px dashed #999;
}

.sidebar .chengyuan li a:hover {
    color: #00ccff;
}

.sidebar .chengyuan img {
    width: 100%;
    margin-top: 20px;
}

/*故事介绍*/

.jieshao h2 {
    margin-bottom: 10px;
}

.jieshao p {
    text-indent: 32px;
}

.jieshao img {
    width: 100%;
}

/*主要人物*/

.renwu h2 {
    text-align: center;
}

.renwu li {
    width: 220px;
    float: left;
    margin: 10px;
    text-align: center;
}

.renwu li img {
    width: 220px;
    height: 220px;
}

.renwu {
    width: 100%;
}

.renwu .page {
    clear: both;
    padding-top: 20px;
    text-align: center;
    font-size: 20px;
}

/*海贼美图*/

.meitu h2 {
    text-align: center;
}

.meitu img {
    width: 100%;
    margin-top: 20px;
}

/*注册*/

.zhuce h2 {
    text-align: center;
}

.zhuce .input-box {
    width: 500px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 20px;
}

.zhuce .input-box p {
    height: 26px;
    width: 100px;
    float: left;
    line-height: 26px;
}

.zhuce .input-box input {
    width: 400px;
    height: 26px;
    border: none;
    float: left;
}

.zhuce .btn {
    display: block;
    width: 92px;
    height: 59px;
    background: url(../images/zhuce.png);
    border: none;
    margin: auto;
    outline: none;
    cursor: pointer;
}

/*留言*/

.liuyan h2 {
    text-align: center;
}

.liuyan .input-box {
    width: 500px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 20px;
}

.liuyan .input-box p {
    height: 26px;
    width: 100px;
    float: left;
    line-height: 26px;
}

.liuyan .input-box input {
    width: 400px;
    height: 26px;
    border: none;
    float: left;
}

.liuyan .input-box textarea {
    display: block;
    width: 400px;
    height: 100px;
    border: none;
    float: left;
}

.liuyan .btn {
    display: block;
    width: 92px;
    height: 59px;
    background: url(../images/tijiao.png);
    border: none;
    margin: auto;
    outline: none;
    cursor: pointer;
}

#footer {
    clear: both;
    width: 960px;
    padding: 30px 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background: url(../images/footer.jpg) bottom center no-repeat;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

html5网页设计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5期末考核大作业使用HTML+CSS技术制作学生动漫网页源码

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫