大三Web课程设计——悬崖上的波妞(4页) HTML+CSS(可以很好的应付老师的作业)

news2025/7/9 9:07:06

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代码结构 🧱

代码如下(示例):以下仅展示部分代码供参考~


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>崖上的波妞</title>
</head>
<body>

  <!--头部-->
  <header>
    <ul class="nav clearfix">
      <li><a href="index.html">首页</a></li>
	  <li><a href="pingjia.html">评价</a></li>
      <li><a href="juese.html">角色</a></li>
      <li><a href="tupian.html">图片</a></li>
    </ul>
  </header>
  <div class="banner"> <img src="img/banner_1.jpg"/> </div>
  <!--内容-->
  <div class="con ">
    <div class="top clearfix">
      <div class="pic"> <video src="img/v.mp4" class="hm_vdo" loop autoplay controls  width="100%"></video> </div>
      <div class="text">
        <h2>介绍</h2>
        <hr>
        <P>《崖上的波妞》是由吉卜力工作室制作的动画电影,由宫崎骏执导,奈良柚莉爱、山口智子、长岛一茂等参与配音。该片讲述了深海里的人鱼小公主波妞喜欢上了人类男孩宗介,于是一心想变成人类的故事。该片于2008年7月19日在日本上映,2020年12月31日在中国内地上映。<br>
《崖上的波妞》是由吉卜力工作室制作的动画电影,由宫崎骏执导,奈良柚莉爱、山口智子、长岛一茂等参与配音。
该片讲述了深海里的人鱼小公主波妞喜欢上了人类男孩宗介,于是一心想变成人类的故事。</P>
      </div>
    </div>
	 <div class="pinglun tupian">
      <div class="title">
        <h2 align="center">影片评价</h2>
      </div>
      <div class="text"> 《崖上的波妞》如同一道明媚如阳的色彩,使得其它同样角逐威尼斯电影节金狮奖的影片黯然失色。观看该片如同一次愉悦的旅行,从记忆中儿时幼儿园的彩虹图画中穿过,如梦似幻。宫崎骏准确而细腻地捕捉到了片中主角——这个五岁的小男孩宗介的心思。总之,《崖上的波妞》所展现出来的走向自然、天真,以及赋予海洋人格化的独特尝试,都使得该片成为一件难忘的艺术品。 <hr>对于这部充满温度与爱意的电影,许多观众都选择和最重要的人共同欣赏,其中不乏带着孩子观影的父母们。这是因为:一方面,《崖上的波妞》以“让五岁孩子能看懂”为创作初衷,展现了充满奇观的世界与极致的童真美好,更让孩子在潜移默化中感受学习到波妞、宗介身上“勇敢”、“担当”的美好品质。另一方面,影片中宗介一家的相处模式也是当下许多家庭的真实写照——因工作常年在外的父亲、坚强勇敢的“超人妈妈”,其中宗介父亲在航海途中通过探照灯来与妻女交流的情节,更是令不少父母观众感动落泪。可以说,《崖上的波妞》是父母给孩子的成长礼物,也是拉近亲子距离、陪伴彼此度过温馨时光的最佳选择。(1905电影网 评)</div>
     
    </div>
    <div class="tupian">
      <div class="title">
        <h2 align="center">影片图片</h2>
      </div>
      <ul class="clearfix">
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
		<li><img src="img/1.jpg"/></li>
      </ul>
    </div>
   
  </div>
  <!--底部-->
  <footer>
    <p>网页底部</p>
  </footer>

</body>
</html>



2.CSS样式代码 🏠

* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0 auto;
	font-size: 14px;
	color: #333;
	position: relative;
}
img {
	border: none;
}
a {
	cursor: pointer;
	color: #333;
	text-decoration: none;
	outline: none;
}
ul {
	list-style-type: none;
}

div.clear {
	font: 0px Arial;
	line-height: 0;
	height: 0;
	overflow: hidden;
	clear: both;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

body {
	background:#99CCCC;
	background-size: cover;
	padding-top:0px;
	padding-bottom:0px;
	width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
header {
	height: 60px;
	background:#009966;
	
}
.nav li {
	line-height: 60px;
	float: left;
	width: 25%;
	text-align: center;
	font-size: 22px;
}
.nav li a {
	color:#FFFFFF;
}
.banner {
	display: block;
}
.banner img {
	width: 100%;
	display: block;
}
.con {
	padding: 15px;
	background: #fff;
}
.top {
	margin-bottom: 20px;
}
.top .pic {
	float: left;
	width: 440px;
}
.top .pic img {
	
	padding: 3px;
	width: 100%;
}
.top .text {
	float: right;
	width: 610px;
	line-height: 26px;
}
.top .text h2 {
	font-size: 18px;
}
.title {
	color: #2d1f16;
	line-height: 28px;
	margin: 10px 0;
}
.title h2 {
	font-size: 18px;
}
.tupian li {
	float: left;
	width: 23%;
	margin: 1%;
	height: 170px;
}
.tupian li img {
	
	width: 100%;
	height: 100%;
	border-radius:20px;
}
.pinglun {
	margin-bottom: 20px;
}
.pinglun .text {
	line-height: 26px;
}
footer {
	background: #009966;
	color:#fff;
	padding-left:30px;

	line-height: 50px;
}
h2{ color:#009933; background:#DFFDE7; font-size:30px;}
.juese li {
	float: left;
	width: 100%;
	height: 270px;
	margin-bottom: 20px;
}
.juese li .pic {
	width: 20%;
	float: right;
	height: 270px;
}
.juese li .pic img {
	width: 100%;
	height: 100%;
	
}
.juese li .text {
	float: left;
	width: 75%;
	height: 270px;
	
	
	line-height: 26px;
	padding: 15px;
	box-sizing: border-box;
}
.juese li .text h2 {
	font-size: 18px;
	margin-bottom: 10px;
}




三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  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/4731.html

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

相关文章

Java基础系列(八)——线程池详解

目录 线程池详解 什么是线程池&#xff1f;为什么要用线程池&#xff1f; 如何创建线程池 ThreadPoolExecutor类分析 ThreadPoolExecutor 饱和策略 简单的线程池Demo ThreadPoolExecutor线程池新增线程流程 线程池详解 什么是线程池&#xff1f;为什么要用线程池&#…

Word2Vec原理以及实战详解

文章目录前言0、序言(词嵌入介绍)一、Word2vec详解。二、CBOW 和 Skip-Gram详解。2-1、CBOW模型:&#xff08;已知周围词预测中心词&#xff09;2-2、Skip-Gram模型&#xff08;已知中心词预测周围词&#xff09;2-3、词嵌入的缺点三、Word2vec实战&#xff08;使用Gensim包&am…

[SQL]视图和权限

有时让用户看到整个基本表是不合适的&#xff0c;出于安全考虑&#xff0c;可能需要向用户隐藏特定的数据。如在instructor关系中隐藏工资值&#xff1a; select ID,name,dept_name from instructor;创建更符合特定用户直觉的个人化的关系集合&#xff0c;如学生成绩表由学生关…

一文学会JavaScript计时事件

文章目录JavaScript 计时事件setInterval() 方法clearInterval() 方法setTimeout() 方法clearTimeout() 方法JavaScript 计时事件 通过使用 JavaScript&#xff0c;我们有能力做到在一个设定的时间间隔之后来执行代码&#xff0c;而不是在函数被调用后立即执行。我们称之为计时…

Linux--基础命令

一、Linux指令 mkdir&#xff08;Make Directory&#xff09;&#xff1a;在当前路径下新建一个目录 -p --parents 可以是一个路径名称。此时若路径中的某些目录尚不存在,加上此选项后,系统将自动建立好那些尚不存在的目录,即一次可以建立多个目录; ls&#xff08;List…

Day796.什么是线程数据的强、弱一致性 -Java 性能调优实战

什么是线程数据的强、弱一致性 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于什么是线程数据的强、弱一致性。 一致性&#xff0c;其实在系统的很多地方都存在数据一致性的相关问题。 除了在并发编程中保证共享变量数据的一致性之外&#xff0c;还有数据库的 ACI…

Autosar基本概念详细介绍

Autosar的由来 在汽车创新应用不断涌现的推动下&#xff0c;当代汽车电子电气&#xff08;E/E—Electronic/Electrical&#xff09;架构已经非常复杂&#xff0c;需要有创新的技术突破才能有效地进行管理&#xff0c;满足日益增长的乘客需求和法律要求。这个需求对汽车制造商及…

记一次简单的HTTP绕WAF

0X01 基础知识 关于WAF的问题&#xff1f; 它是我们日常攻防演练必会遇见的&#xff0c;在IOS七层模型中&#xff0c;WAF分为网络层、应用层的&#xff0c;当然还有云 WAF&#xff08;CDNWAF&#xff09;这新型类场景的。不同环境下我们绕过WAF的思路也是有所区别的&#xff…

mybatis单框架通用mapper使用(二)

mybatis单框架通用mapper使用(二) 1 查询 1.1 简单查询 1.1.1 查多条 a 用法 接口引用.select(实体类对象引用); //里面实体类对象,里面不为null值的部分就会作为条件被查询,多个条件使用and进行拼接起来 //传入为null就是查询全部的值b 测试代码 Testpublic void t2(){Sq…

直播带货系统源码,居家“神器”不出门就能购物

如今&#xff0c;直播带货的火爆程度已经超出了人们的想象。线下销售行业的卖家也开启了直播带货模式&#xff0c;直播带货的的火爆归根到底还是消费者的购物方式发生的变化。从传统的线下购物到电商购物&#xff0c;再到今天的直接直播带货。从各大数据可以总结&#xff0c;消…

应用密码学期末速通复习

文章目录模运算分数求模负数求模gcd最大公约数逆元分组密码DES加密AES加密操作模式ECB电子密码本CBC分组链接CFB密码反馈OFB输出反馈序列密码A5-1算法RC4算法Hash函数Md5算法SHA-1算法消息认证数字信封公钥密码背包公钥算法RSA公钥算法Rabin公钥算法ElGamal公钥算法ECC公钥算法…

C/C++刷题DAY2

1.第一题 27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 分析&#xff1a;对于此题&#xff0c;我们使用双指针的方式去写它&#xff0c;需要注意空间复杂度是O&#xff08;1&#xff09;&#xff0c;时间复杂度也是尽量的越低越好&#xff0c;要去需要原地修改数组&a…

Matplotlib设置刻度和刻度标签

Matplotlib在我们之前的所有例子中都自动接管了轴上间隔点的任务。Matplotlib的默认刻度定位器和格式化器在很多常见情况下通常都足够了。可以明确提及刻度线的位置和标签以满足特定要求。 xticks()和yticks()函数将列表对象作为参数。列表中的元素表示将显示刻度的相应操作的位…

nginx学习:配置文件详解,负载均衡三种算法学习,上接nginx实操篇

文章目录前言一、对上一篇博文的分析二、配置文件分析1. nginx 官方网址&#xff08;很详细&#xff09;2、配置文件&#xff08;全&#xff09;3、配置文件&#xff08;去掉注释&#xff09;4、讲解a、nginx 配置文件有三部分组成b、全局块c、events块d、http块5、http块中loc…

无脚本自动化测试

在当今的企业环境中&#xff0c;软件测试不再被视为不必要的投资&#xff1b;相反&#xff0c;它已经上升到一种需要而不是奢侈品的水平。随着市场的不断变化和竞争的加剧&#xff0c;企业必须做一些让他们与竞争对手区分开来的事情。 为了使自己与众不同&#xff0c;公司必须…

Dockerfile

Dockerfile指令集 对于Dockerfiel而言&#xff0c;是在学习docker工具里面&#xff0c;最重点的内容&#xff0c;它可以帮助我们生成自己想要的基础镜像。部署一个容器最重要的就是镜像&#xff0c;指令都已经内置好了。 FROM 这个镜像的妈妈是谁&#xff1f;&a…

数据结构每日亿题(四)

复制带随机指针的链表 原题传送门&#xff1a;力扣 题目&#xff1a; 这题的大概意思就是&#xff1a; 有这样一个链表&#xff0c;他比普通的链表多一个成员变量&#xff1a;random指针&#xff0c;这个random指针指向的是这个链表中随机一个地方&#xff0c;这个地方是其它节…

NetSim网络仿真使用及静态路由配置

&#x1f370; 个人主页:__Aurora__ &#x1f35e;如果文章有什么需要改进的地方还请各位大佬指正。 &#x1f349;如果我的文章对你有帮助➡️ 关注&#x1f64f;&#x1f3fb; 点赞&#x1f44d; 收藏⭐️ NetSim网络仿真使用及静态路由配置。 实验要求及其步骤 使用Boson N…

Java面试笔记:Java线程安全的集合类有哪些?线程不安全的集合类有哪些?ArrayList为什么会发生并发修改异常?

一、Java的集合类有哪些&#xff1f; 二、如何定义集合是线程不安全的&#xff1f; 当多个并发同时对线程不安全的集合进行增删改的时候会破坏这些集合的数据完整性&#xff0c;例如&#xff1a;当多个线程访问同一个集合或Map时&#xff0c;如果有超过一个线程修改了A…

3A企业认定有哪些好处?

企业参与申报和认证有什么益处&#xff1f;这个问题可能应该是广大企业参与前最为关心的问题之一了 1、可快速有效提升企业资质、获得国家政府的认可&#xff1b;并将获得由商务部颁发的具有统一编号的牌匾和证书。 2、是企业履约能力、投标信誉、综合实力与竞争力的体现&…