首页 > 其他分享 >HTML期末大作业~海贼王6页~Web大学生网页成品-s016

HTML期末大作业~海贼王6页~Web大学生网页成品-s016

时间:2024-04-03 20:58:28浏览次数:19  
标签:Web 海贼王 草帽 ... 海贼团 s016 HTML 海贼

HTML期末大作业~ 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作,HTML网页设计结课作业

http://imianba.cn/#/articles?category=1&theme=0

这段代码是 HTML 代码,它定义了一个名为“海贼王”的网站的结构。它包含一个头部(head)部分,其中包含元数据和链接到外部资源,例如 CSS 文件。

主体(body)部分包含网站的内容,包括一个带有网站标志的 header 部分、一个带有导航链接的 menu 部分、一个包含内容和侧边栏的 main 部分,以及一个页脚 footer 部分。

main 部分包含一个 content 部分,其中列出了主要人物及其信息,以及一个 sidebar 部分,其中包含用户登录、草帽海贼团成员列表和网站信息。该代码使用 HTML 结构和 CSS 样式来创建网站的基本布局和内容。

<!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">
    	<p>版权所有@海贼王</p>    	
    </div>
</div>
</body>
</html>

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

源码获取
❉ ~ 关注我,点赞博文~ 每天带你涨知识!
❉ ~ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
❉ ~ http://imianba.cn/#/articles?category=1&theme=0
❉ ~ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

标签:Web,海贼王,草帽,...,海贼团,s016,HTML,海贼
From: https://blog.csdn.net/qq_41157797/article/details/137357654

相关文章

  • JavaWeb-01记录
    JWT令牌JSONWebToken作用:以json格式在各方之间安全传递信息,是数字签名的。格式:标头Header.有效载荷Payload.签名Signature前两部分用Base64编码,可以被前端翻译并理解。第三部分使用编码后的前两部分,加上一个密钥,用头部声明的加密算法进行签名,保证令牌没有被篡改。swagger生......
  • JavaWeb(未完结)
    #1静态web*.htm*.htm这些都是网页的后缀,如果服务器上一直存在这些东西,我们就可以直接进行读取缺点Web页面无法动态更新,所有用户看到的都是同一个页面无法和数据库交互(数据无法持久化)2动态Web页面会动态展示:Web的页面展示的效果因人而异##2web服务器服务器是......
  • ctfshow--web2
    这题是考sql注入,我们先用个万能语句注入发现它上面会出现欢迎你,ctfshow那么这就很明显了,这个用户的名字就是ctfshow那么猜测flag会不会是在flag的用户里面呢我们提交一下如果有flag的用户的话他的欢迎你,ctfshow会变成欢迎你,flag但是很明显没有尝试这个语句1'uni......
  • Java课程设计:基于Javaweb的图书管理系统(内附源码)
    一、项目介绍本系统由读者端和管理员端,读者端主要有主要有三大功能,借阅图书、归还图书和查看自己的借阅信息,管理员端主要有四个大的功能,对图书进行管理,对用户进行管理、对借阅信息进行管理、对图书分类进行管理。整体功能模块图,如图所示:借还图书:读者对图书进行借阅与归......
  • 软测WebUI Python安装selenium模块失败,用VSCode安装成功
    Dos命令行下Python安装selenium模块失败,安了python,pip也好着呢,安装失败,网上没有查到类似报错。  报错还有一些,截图不全使用vsc安装selenium模块,成功了。  ......
  • WebKit简单介绍
    WebKit是一个开源的浏览器网页排版引擎,起源于苹果公司,最初是为了开发Safari浏览器而创建的。WebKit主要包含两个核心组件:WebCore和JavaScriptCore。WebCore:主要负责解析HTML文档、样式表(CSS)以及处理DOM树结构。它基于KDE项目的KHTML引擎,并进行了大量改进和优化。WebCore将HTM......
  • 56.html+css网页设计实例/“家乡”主题上海介绍/web前端期末大作业/
    一、前言  本实例以上海为主题设计,div+css布局,页面简单大气,代码精简,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、网页文件三、网页效果以下......
  • Netty 实现 WebSocket 协议
    要使用Netty框架实现WebSocket服务端与客户端通信,你需要按照以下步骤进行:1、添加依赖        首先,在你的项目中引入Netty和其WebSocket支持库的依赖。如果你使用Maven或Gradle构建项目,可以在pom.xml或build.gradle文件中添加相应的依赖项。Maven:<dependency>......
  • 24-Web服务核心功能有哪些,如何实现?
     在Go项目开发中,绝大部分情况下,我们是在写能提供某种功能的后端服务,这些功能以RPCAPI接口或者RESTfulAPI接口的形式对外提供,能提供这两种API接口的服务也统称为Web服务。  Web服务的核心功能将这些功能分成了基础功能和高级功能两大类,并总结在了下面这张图中: 要......
  • 使用JavaScript提升Web应用的安全性
    在构建Web应用时,安全性是一个我们绝不能忽视的重要方面。随着网络攻击手段的日益狡猾和复杂,如何保护我们的应用和用户的数据安全成了每个开发者必须面对的问题。本文将介绍一些常见的Web安全威胁,比如跨站脚本攻击(XSS)、跨站请求伪造(CSRF),以及如何通过使用ContentSecurityPol......