学生网页设计作业源码(HTML+CSS)——海贼王6页代码质量好

news2024/11/18 3:48:57

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML代码结构 🧱
      • 头部导航栏
      • 左边部分
      • 右边部分
    • 2.CSS样式代码 🏠
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

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

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

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

一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示😈

1.HTML代码结构 🧱

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

头部导航栏

在这里插入图片描述

        <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>

2.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. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

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

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/11613.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Pytorch with fastai】第 13 章 ：卷积神经网络

【Pytorch with fastai】第 13 章 ：卷积神经网络

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…
阅读更多...
数据结构之线性表的顺序存储结构

数据结构之线性表的顺序存储结构

配套环境 clion + g++ 顺序存储的定义 线性表的顺序存储结构，指的是用一段地址连续的存储单元一次存储线性表中的数据元素 设计思路 使用一维数组来实现顺序存储结构 存储空间：T* m_array 当前长度：int m_length 顺序存储结构的元素获取操作 判断目标位置是否合法 如…
阅读更多...
Backblaze 2022 Q3 硬盘故障质量报告解读

Backblaze 2022 Q3 硬盘故障质量报告解读

在9月份&#xff0c;我们更新了Backblaze 2022上半年的中期质量报告解读&#xff08;Backblaze2022中期SSD故障质量报告解读&#xff09;&#xff0c;基于报告中的分析数据&#xff0c;Backblaze也向外界传递作证了一个信息&#xff1a;固态硬盘SSD的长期可靠性比机械硬盘HDD要…
阅读更多...
听说某宝抢购脚本大家都会了？那就在来个某东茅台抢购脚本吧。

听说某宝抢购脚本大家都会了？那就在来个某东茅台抢购脚本吧。

前言 某宝脚本一搜能搜一大堆&#xff0c;就是不知道具体有没有用&#xff0c;但是这款某东的代码于11-17还是可用的&#xff0c;大家拿去白嫖吧&#xff01; 需要用到的一些工具 Python版本&#xff1a;3.7.8相关模块&#xff1a;DecryptLogin模块&#xff1b;argparse模块&am…
阅读更多...
webpack5 Preload / Prefetch

webpack5 Preload / Prefetch

代码分离 | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起&#xff0c;打包后的文件用于在浏览器中使用&#xff0c;但它也能够胜任转换&#xff08;transform&#xff09;、打包&#xff08;bundle&#xff09;或包裹&#xff08;pa…
阅读更多...
【云原生 | 44】Docker搭建Registry私有仓库之管理访问权限

【云原生 | 44】Docker搭建Registry私有仓库之管理访问权限

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…
阅读更多...
C++ Reference: Standard C++ Library reference: Containers: deque: deque: rend

C++ Reference: Standard C++ Library reference: Containers: deque: deque: rend

C官网参考链接&#xff1a;https://cplusplus.com/reference/deque/deque/rend/ 公有成员函数 <deque> std::deque::rend C98 reverse_iterator rend(); const_reverse_iterator rend() const; C11 reverse_iterator rend() noexcept; const_reverse_iterator rend() c…
阅读更多...
【Vue】VueX 的语法详解（3）

【Vue】VueX 的语法详解（3）

在VueX&#xff08;叉&#xff09;里面有一个潜移默化&#xff0c;或者说本质上的一个约束是什么&#xff1f; mutation里面只允许‍‍写同步代码&#xff0c;不允许写‍‍异步代码&#xff0c;虽然它不强制的限制你说你写了就给你报错&#xff0c;但实际上它的设计里面要求‍‍…
阅读更多...
2022跨境出海：中东地区网红营销现状及特点

2022跨境出海：中东地区网红营销现状及特点

提到中东&#xff0c;大家的第一印象可能就是“头顶一块布&#xff0c;天下我最富”的土豪形象&#xff0c;近期的卡塔尔世界杯也再次给外界展示了他们的壕无人性。但由于宗教影响&#xff0c;他们的很多线下交际活动受到限制&#xff0c;也使得他们在互联网世界十分活跃&#…
阅读更多...
申报须知，2022年滁州市各区县高新技术企业奖励政策变化，明光市

申报须知，2022年滁州市各区县高新技术企业奖励政策变化，明光市

为了帮助企业提前准备和更好地开展2023年高新技术企业认定申报工作&#xff0c;安徽省大力鼓励企业申报高新技术企业&#xff0c;相应出台了相关政策&#xff0c;同时对于高企申报也有很多奖补&#xff0c;下面小编汇总了滁州市琅琊区、南谯区、天长市、明光市、来安县、全椒县…
阅读更多...
jq扩展机制

jq扩展机制

1、在$挂上自定义函数方法&#xff1a; 如果想自定义函数方法&#xff0c;而且能通过$调用&#xff0c;那就需要用到extend&#xff08;&#xff09;方法&#xff1b;格式&#xff1a;$.extend({}) ; <script>$.extend({yiyi:function(){console.log("yiyi")}…
阅读更多...
唯亚威VIAVI FI-60光纤识别器

唯亚威VIAVI FI-60光纤识别器

光纤识别器可以轻松地识别光信号&#xff0c;而无需断开光缆或中断网络交通。也可以转换为光功率计&#xff08;OPM&#xff09;。 VIAVI FI-60 LFI能够使用户轻松检测光信号&#xff0c;而无需断开光缆或中断网络交通。FI-60 LFI还包括了独特的VIAVI SafeChekTM &#xff0c;…
阅读更多...
特种劳动防护用品安全标志证书

特种劳动防护用品安全标志证书

特种劳动防护用品安全标志是确认特种劳动防护用品安全防护性能符合国家标准、行业标准,准许生产经营单位配发和使用该劳动防护用品的凭证。特种劳保用品是指在劳动作业生产过程中对人体起到保护作用的安全防护用品,与之对应的是普通劳保用品,如防护眼镜、劳保鞋等。常见的特种劳…
阅读更多...
springboot入门

springboot入门

目录 1. 简介 2. 开发示例 2.1 创建springboot工程 3. 启动类 4. 常用注解 5. springboot配置文件 6. 开发一个controller 1. 简介 Spring Boot它本身并不提供Spring框架的核心特性以及扩展功能&#xff0c;只是用于快速、敏捷地开发新一代基于Spring框架的应用程序。 同…
阅读更多...
英语语法学习

英语语法学习

文章目录第一章 a\an的用法第二章 复数代词及复数名词的用法第三章 形容词的用法第四章 一般疑问句的用法第五章 Yes\No的用法第六章 人称代词的所有格式第七章 What疑问句与专有名词第八章 Why疑问句的用法第九章 Every的用法第十章 连词Because的用法第十一章 Who疑问句的用法…
阅读更多...
基于Java+JSP+MySQL基于SSM的智能推荐商城系统-计算机毕业设计

基于Java+JSP+MySQL基于SSM的智能推荐商城系统-计算机毕业设计

项目介绍 本文的主要工作是对基于B/S模式及JSP技术的基于智能推荐的b2c销售网站进行了研究与设计。本文首先介绍了基于智能推荐的b2c销售网站的背景&#xff0c;分析比较了国内外相关基于智能推荐的b2c销售网站的运行模式、系统特点与开发技术。然后分析了目前热点的各种Web应…
阅读更多...
基于PHP+MySQL的物流配送管理系统平台

基于PHP+MySQL的物流配送管理系统平台

随着时代的发展,物流显得越来越重要。尤其是在网购这样的大环境冲击之下基本上物流已经充满了我们生活的每一个角落。尽管如此,但是对于那种大型的货物和车辆,仍然没有一个很好的信息共享平台。经常会出现出主找不到货源,货主找不到车源的情况。车主和货主之间形成了严重的信息…
阅读更多...
脑啡肽 (2-4)、Enkephalin (2-4)、6234-26-0

脑啡肽 (2-4)、Enkephalin (2-4)、6234-26-0

脑啡肽 (2-4)、GGF 可刺激 SK-N-SH 细胞对 deltorphin 的摄取。 Enkephalin (2-4), GGF, stimulated the uptake of deltorphin in SK-N-SH cells.编号: 127373 中文名称: 脑啡肽 (2-4)、Enkephalin (2-4) 英文名: Enkephalin (2-4) CAS号: 6234-26-0 单字母: H2N-GGF-OH 三字母…
阅读更多...
【Hack The Box】windows练习-- Sauna

【Hack The Box】windows练习-- Sauna

HTB 学习笔记 【Hack The Box】windows练习-- Sauna &#x1f525;系列专栏&#xff1a;Hack The Box &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4c6;首发时间&#xff1a;&#x1f334;2022年11月7日&#x1f334; &#x1f3…
阅读更多...
SpringSecurity（八）【RememberMe记住我】

SpringSecurity（八）【RememberMe记住我】

八、RememberMe 简介 RememberMe 这个功能非常常见&#xff0c;无论是在 QQ、邮箱…都有这个选项。提到 RememberMe&#xff0c;往往会有一些误解&#xff0c;认为 RememberMe 功能就是把 用户名/密码 用 Cookie 保存在浏览器中&#xff0c;下次登陆时不用再次输入 用户名/密码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023