HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

news2025/2/27 21:11:35

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

文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 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代码

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

<nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
		<div class="container">
			<h1><a class="navbar-brand" href="index.html"><span class="fa fa-play icon-log" aria-hidden="true"></span>
				专业展会 </a></h1>
			<!-- if logo is image enable this   
					<a class="navbar-brand" href="#index.html">
						<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
					</a> -->
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
				data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<!-- <span class="navbar-toggler-icon"></span> -->
				<span class="fa icon-expand fa-bars"></span>
				<span class="fa icon-close fa-times"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link" href="index.html">家</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="about.html">关于</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="genre.html">类型</a>
					</li>
					
					<li class="nav-item">
						<a class="nav-link" href="contact.html">接触</a>
					</li>
				</ul>

				<!--/search-right-->
				<!--/search-right-->
				<div class="search-right">
					<a href="#search" class="btn search-hny mr-lg-3 mt-lg-0 mt-4" title="search">搜索 <span
							class="fa fa-search ml-3" aria-hidden="true"></span></a>
					<!-- search popup -->
					<div id="search" class="pop-overlay">
						<div class="popup">
							<form  method="post" class="search-box">
								<input type="search" placeholder="请输入关键字" name="search"
									required="required" autofocus="">
								<button type="submit" class="btn"><span class="fa fa-search"
										aria-hidden="true"></span></button>
							</form>
							<div class="browse-items">
								<h3 class="hny-title two mt-md-5 mt-4">浏览全部：</h3>
								<ul class="search-items">
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
								</ul>
							</div>
						</div>
						<a class="close" href="#close">×</a>
					</div>
					<!-- /search popup -->
					<!--/search-right-->
				</div>


			</div>
			<!-- toggle switch for light and dark theme -->
			<div class="mobile-position">
				<nav class="navigation">
					<div class="theme-switch-wrapper">
						<label class="theme-switch" for="checkbox">
							<input type="checkbox" id="checkbox">
							<div class="mode-container">
								<i class="gg-sun"></i>
								<i class="gg-moon"></i>
							</div>
						</label>
					</div>
				</nav>
			</div>
			<!-- //toggle switch for light and dark theme -->
		</div>
	</nav>

2.CSS代码


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #df0e62;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #df0e62;
  text-decoration: underline;
}

a:not([href]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

三、个人总结

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

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

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

相关文章

华为云桌面Workspace，实惠更实用！

华为云桌面Workspace，实惠更实用！

今年双十一的活动&#xff0c;在各大平台都掀起一股“剁手热潮”。而对于企业主来说&#xff0c;双十一也有各种活动&#xff0c;比如华为云推出了“实惠更实用&#xff0c;‘11’都如愿”活动&#xff0c;也令到企业采购部门蠢蠢欲动。这究竟是怎么回事呢&#xff1f; 据了解&…
阅读更多...
JAVA的学习心路历程之JDK基础入门（下）

JAVA的学习心路历程之JDK基础入门（下）

这篇是本人JAVA基础学习的下篇&#xff0c;上篇链接在&#xff1a; JAVA的学习心路历程之JDK基础入门&#xff08;上&#xff09;_Thomas_Lbw的博客-CSDN博客_jdk学习 目录 一、字符流 1.1 字符流基类 二、文件操作 2.1 文件操作 三、Swing 四、多线程编程 4.1 多线程…
阅读更多...
算法刷题打卡第27天：省份数量---深度优先搜索

算法刷题打卡第27天：省份数量---深度优先搜索

省份数量 难度&#xff1a;中等 有 n 个城市&#xff0c;其中一些彼此相连&#xff0c;另一些没有相连。如果城市 a 与城市 b 直接相连&#xff0c;且城市 b 与城市 c 直接相连&#xff0c;那么城市 a 与城市 c 间接相连。 省份 是一组直接或间接相连的城市&#xff0c;组内不…
阅读更多...
干测试这些年，去过阿里也去过小公司，给年轻测试员们一个忠告....

干测试这些年，去过阿里也去过小公司，给年轻测试员们一个忠告....

前言 你眼中的软件测试岗位是怎样的&#xff1f;大部分人可能会给出这样的回答&#xff1a;“测试&#xff1f;简单啊&#xff0c;没什么技术含量&#xff0c;无非就是看需求、看业务手册、看设计文档、然后点点功能是否实现&#xff0c;麻烦点的就是测试下部署安装是否出现兼…
阅读更多...
二十三、CANdelaStudio深入-SnapshotData编辑

二十三、CANdelaStudio深入-SnapshotData编辑

本专栏将由浅入深的展开诊断实际开发与测试的数据库编辑，包含大量实际开发过程中的步骤、使用技巧与少量对Autosar标准的解读。希望能对大家有所帮助，与大家共同成长，早日成为一名车载诊断、通信全栈工程师。 本文介绍CANdelaStudio的SnapshotData编辑，欢迎各位朋友订阅、评…
阅读更多...
C#语言实例源码系列-实现滚动字幕

C#语言实例源码系列-实现滚动字幕

专栏分享点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过程中…
阅读更多...
考虑储能电池参与一次调频技术经济模型的容量配置方法matlab程序

考虑储能电池参与一次调频技术经济模型的容量配置方法matlab程序

考虑储能电池参与一次调频技术经济模型的容量配置方法matlab程序 参考文献&#xff1a;考虑储能电池参与一次调频技术经济模型的容量配置方法 摘要 &#xff1a;规模间歇电源并网引起的电网频率问题&#xff0c;导致对引入储能辅助调频的研究越发迫切。提出一种考虑储能电池参…
阅读更多...
网安学习Day14(web漏洞-SQL注入类型及提交注入)

网安学习Day14(web漏洞-SQL注入类型及提交注入)

SQL注入类型及提交注入简要明确参数类型简要明确请求方法参数字符型注入测试>sqlilabs less 5 6sqlilabs less 5在这里插入图片描述sqlilabs less 6POST数据提交注入测试>sqlilabs less 11参数JSON数据注入测试>本地环境代码演示COOKIE数据提交注入测试>sqlilabs l…
阅读更多...
解决Windows 10 家庭中文版没有组策略编辑器的问题

解决Windows 10 家庭中文版没有组策略编辑器的问题

解决Windows 10 家庭中文版无法打开组策略编辑器的问题 &#xff08;以下为解决效果&#xff09; 今天在工作时发现电脑无法打开组策略编辑器&#xff0c;即WinR输入gpedit.msc不能正常调出组策略编辑器&#xff1b; 查看了电脑为Windows 10 家庭中文版&#xff0c;查资料后发…
阅读更多...
《恋上数据结构与算法》第1季：双向链表实现（超详细笔记，图文并茂）

《恋上数据结构与算法》第1季：双向链表实现（超详细笔记，图文并茂）

数据结构与算法的学习笔记目录&#xff1a;《恋上数据结构与算法》的学习笔记 目录索引双向链表一、双向链表补充【List接口 和 AbstractList抽象类】二、设计双向链表三、双向链表的实现1. 查询节点2. 插入节点3. 删除节点4. 清空节点四、双向链表 vs 动态数组一、双向链表 与…
阅读更多...
JUC包(java.util.concurrent)下的常用子类

JUC包(java.util.concurrent)下的常用子类

文章目录前言一、对象锁juc.locks包二、原子类三、四个常用工具类3.1 信号量 Semaphore3.2 CountDownLatch总结前言 博主个人社区&#xff1a;开发与算法学习社区 博主个人主页&#xff1a;Killing Vibe的博客 欢迎大家加入&#xff0c;一起交流学习~~ 一、对象锁juc.locks包 …
阅读更多...
单元测试入门篇

单元测试入门篇

一、单元测试是什么&#xff1f; 单元测试&#xff08;unit testing&#xff09;&#xff0c;是指对软件中的最小可测试单元进行检查和验证。在测试金字塔模型中处于最底层&#xff1a; 整个金字塔模型代表着越上层的测试集成度越高&#xff0c;执行速度越慢&#xff0c;越下层…
阅读更多...
2014-2020年国有大型商业银行和全国股份制商业银行绿色信贷数据

2014-2020年国有大型商业银行和全国股份制商业银行绿色信贷数据

数据集名称&#xff1a;国有大型商业银行和全国股份制商业银行绿色信贷数据 时间范围&#xff1a;2014-2020年 数据来源&#xff1a;商业银行历年业绩报告和社会责任报告 相关说明&#xff1a;绿色金融是指为支持环境改善、应对气候变化和资源节约高效利用的经济活动&#x…
阅读更多...
C语言练习之递归实现n的k次方

C语言练习之递归实现n的k次方

文章目录前言一、思路二、代码以及运行截图1.代码2.运行截图总结前言 使用C语言递归计算N的k次方 一、思路 求n的k次方的原理就是&#xff1a; n^k nn……*n&#xff08;k个n进行相乘&#xff09; 可以得到一个公式&#xff1a; f(k){1k0n∗f(k)k>0f(k) \left\{\begin{…
阅读更多...
利用Redis来实现分布式锁

利用Redis来实现分布式锁

Redis命令 SET 命令有个 NX 参数可以实现「key不存在才插入」&#xff0c;可以用它来实现分布式锁&#xff1a; 如果 key 不存在&#xff0c;则显示插入成功&#xff0c;可以用来表示加锁成功&#xff1b;如果 key 存在&#xff0c;则会显示插入失败&#xff0c;可以用来表示…
阅读更多...
PLC中ST编程的自定义功能块

PLC中ST编程的自定义功能块

右键单击——添加对线——程序组织单元 弹出对话框 修改名称&#xff0c;选择功能块&#xff1b; VAR_INPUT&#xff1a;输入变量&#xff1b;VAR_OUTPUT:输出变量&#xff1b;VAR&#xff1a;局部变量&#xff1b; 创建一个闪烁功能块&#xff0c;可输入亮和灭的时间&#xff…
阅读更多...
基于SSM的高校共享单车管理系统【数据库设计、源码、开题报告】

基于SSM的高校共享单车管理系统【数据库设计、源码、开题报告】

数据库脚本下载地址&#xff1a; https://download.csdn.net/download/itrjxxs_com/86468380 主要使用技术 SpringSpringMVCMybatisEasyUIJqueryMysql 功能介绍 系统用户管理&#xff1a; 用户管理&#xff1a;可以添加、修改、删除、检索用户信息&#xff08;头像、用户账…
阅读更多...
PSO粒子群算法微电网优化调度（微电网孤岛运行优化调度）matlab程序

PSO粒子群算法微电网优化调度（微电网孤岛运行优化调度）matlab程序

PSO粒子群算法微电网优化调度&#xff08;微电网孤岛运行优化调度&#xff09;matlab程序 【含风电、光伏、微型燃机、储能蓄电池、燃料电池】 参考文献&#xff1a;基于改进粒子群算法的微电网优化调度 摘 要&#xff1a;当今全球普遍面临着能源危机和环境污染的加重&#xf…
阅读更多...
全国工企专利匹配数据（1998-2014）

全国工企专利匹配数据（1998-2014）

1、数据来源&#xff1a;国家统计局&#xff08;工业企业数据&#xff09;、专利数据来源于国家知识产权局。 2、时间跨度&#xff1a;1998-2014 3、区域范围&#xff1a;全国 4、指标说明&#xff1a; 包含以下指标&#xff1a; 公开&#xff08;公告&#xff09;日、申请…
阅读更多...
基于SSM的毕业设计管理系统【数据库设计、源码、开题报告】

基于SSM的毕业设计管理系统【数据库设计、源码、开题报告】

数据库脚本下载地址&#xff1a; https://download.csdn.net/download/itrjxxs_com/86469261 主要使用技术 SpringSpringMVCMybatisBootstrapJqueryMysql 功能介绍 本系统的用户可以分为三种&#xff1a;管理员、教师、学生。 管理员&#xff1a;导师管理、学生管理&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023