大二Web课程设计实践：HTML+CSS打造动漫海贼王网站-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38518191/article/details/130551465

这篇博客分享了一位大二学生使用HTML和CSS进行课程设计的经验，以动漫海贼王为主题创建了一个网页。内容包括网页介绍、代码展示（HTML和CSS）和个人总结。网页设计适合初学者，可使用Dreamweaver等编辑器进行修改，应用了Div+CSS、表单、多媒体元素等技术，强调了前端开发中布局美观和用户体验的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫点看首页</title>
    <!-- link连接style.css样式 -->
    <link rel="stylesheet" href="../CSS/icomoon/style.css">
    <link rel="stylesheet" href="../CSS/mystyle.css">
    <link rel="icon" href="../images/myico.ico" type="image/x-icon">
    <script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/my.js" type="text/javascript"></script>
</head>

<body>
    <!-- 1.头部区域开始 -->
    <div class="header">
        <div class="header-first">
            <!-- logo部分 -->
            <img src="../images/logo.png" alt="" class="logo">
            <p class="mylogo">ONE PIECE</p>
            <!-- 左导航栏部分 -->
            <ul class="lnav-box">
                <li>
                    <div class="box">
                        <div class="front">首页</div>
                        <a href="index.html">
                            <div class="bottom">进入</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="front">周边</div>
                        <a href="javascript:;">
                            <div class="bottom">进入</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="front">资讯</div>
                        <a href="content.html">
                            <div class="bottom">进入</div>
                        </a>
                    </div>
                </li>
            </ul>
            <!-- 搜索框部分 -->
            <div class="search">
                <input type="text" placeholder="请输入你想找的内容">
                <button></button>
            </div>
            <!-- 右导航栏部分 -->
            <div class="rnav-box">
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">历史</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">收藏</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">消息</div>
                        </a>
                    </div>
                </li>
            </div>
            <!-- 用户名字模块 -->
            <div class="user">
                <!-- 登录注册链接部分 -->
                <div class="register">
                    <a href="javascript:;">登录/注册</a>
                </div>
                <img src="../images/xin.png" alt="">
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->
    <!-- 吸顶效果js -->
    <script type="text/javascript">
        headerrolling();
    </script>
    <!-- 2.banner模块儿开始 -->
    <div class="banner">
        <div class="internal w">
            <div class="img-wrap">
                <ul>
                    <li class="item" style="display: block">
                        <img src="../images/banner1.jpg" alt="" class="lunbo">
                    </li>
                    <li class="item">
                        <img src="../images/banner2.jpg" alt="" class="lunbo">
                    </li>
                    <li class="item">
                        <img src="../images/banner3.jpg" alt="" class="lunbo">
                    </li>
                    <li class="item">
                        <img src="../images/banner4.jpg" alt="" class="lunbo">
                    </li>
                    <li class="item">
                        <img src="../images/banner5.jpg" alt="" class="lunbo">
                    </li>
                </ul>
            </div>
            <div class="lr-tab">
                <div class="left btn">
                    <span class="icon-arrow-left2"></span>
                </div>
                <div class="right btn">
                    <span class="icon-arrow-right2"></span>
                </div>
            </div>
            <div class="tab-btn">
                <ul>
                    <li class="btn"></li>
                    <li class="btn"></li>
                    <li class="btn"></li>
                    <li class="btn"></li>
                    <li class="btn"></li>
                </ul>
            </div>
            <!-- 侧边栏开始 -->
            <div class="subnav">
                <div class="diversity">篇章简介