HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)

常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。

文章目录

  • 一、作品介绍
  • 二、作品演示 ☁️
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、如何学习网页制作 ❤️
  • 六、 一份合格的网页作业
  • 七、源码获取


一、作品介绍

️本套采用HTML+CSS,使用Javacsript代码,表格布局,共有3个页面

采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面:最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

网站素材方面:收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

网站文件方面:网站文件种类包含:html网页结构文件、css网页样式文件、images网页图片文件;
其中:
(1)html文件包含:其中index.html是首页、其他html为二级页面;
(2) css文件包含:css全部页面样式;

网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

二、作品演示 ☁️



HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)_第1张图片

三、代码目录

HTML静态网页成品作业(HTML+CSS)——家乡泉州介绍网页(3个页面)(表格布局)_第2张图片

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<table border="0" width="1080" style="margin: 0 auto;background-color: #fff;padding: 0 10px;" >
		<tr>
			<td align="center" style="padding: 5px 0;">
				<img src="./images/logo.png" height="120" alt="">
			</td>
		</tr>
		<tr>
			<td>
				<table border="0" width="100%" bgcolor="#000">
					<tr align="center">
						<td width="360"><a class="nav_link" href="./index.html">首页</a></td>
						<td width="360"><a class="nav_link" href="./fengjing.html">风景</a></td>
						<td width="360"><a class="nav_link" href="./liuyan.html">留言板</a></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table>
					<tr>
						<td width="280" bgcolor="#ddd">
							<table width="100%">
								<tr align="center"><td><a class="nav_link2" href="./index.html">泉州首页</a></td></tr>
								<tr align="center"><td><a class="nav_link2" href="./fengjing.html">泉州风景</a></td></tr>
								<tr align="center"><td><a class="nav_link2" href="./liuyan.html">留言板</a></td></tr>
							</table>
						</td>
						<td width="800" style="padding: 10px;">
							<table width="100%">
								<tr align="center"><td><h2>泉州简介</h2></td></tr>
								<tr>
									<td>
										<p>泉州市,简称“泉”或“鲤”,别称鲤城、温陵、刺桐城、光明之城,福建省辖地级市,Ⅱ型大城市 ,是福建省人民政府批复确定的海峡西岸经济区中心城市之一、现代化工贸港口城市。泉州地处中国华东地区,东经117°25′—119°05′,北纬24°30′—25°56′,北承福州、莆田,南接厦门,东望台湾岛,属亚热带海洋性季风气候,气候条件优越。截至2020年,全市共辖4个市辖区、3个县级市、5个县,总面积11015平方千米。根据第七次人口普查数据,泉州市常住人口为878.23万人。</p>
										<p>泉州历史悠久,经济开发早在周秦时期就已开始。三国吴永安三年(260年),在今南安市丰州镇置东安县治。西晋末年,中原战乱,士族大批入泉。南朝梁天监间(502-519年)置南安郡作郡治,为本地设置县、郡治之始。宋元时期,泉州一度成为世界第一大港。泉州是联合国唯一认定的海上丝绸之路起点,列入国家“一带一路”倡议的21世纪海上丝绸之路先行区。 是首批国家历史文化名城、 首届东亚文化之都、是世界遗产城市、国家级文化生态保护区 、全国文明城市 、国家卫生城市。 </p>
										<p>
											泉州市以闽南话为主要方言,并存莆仙话、客家话等多种方言。泉州是侨乡。祖籍泉州的华侨、华人750多万,港澳同胞76万,分布在世界各地129个国家和地区。归侨、侨眷250多万。在台湾,有44.8%的汉族(约900万)祖籍泉州。
										</p>
										<img src="./images/jianjie.png" width="100%" alt="">
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td width="100%">
				<table bgcolor="#000" width="100%">
					<tr>
						<td height="50" align="center" style="font-size: 14px;color: #fff;">
							Copyright © 2023福建泉州 版权所有 <br>
							联系地址:福建泉州
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

五、如何学习网页制作 ❤️

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深印象,不知道如何提升自己,可以去看一些视频教程,跟着视频一起学习代码,切记一定要自己手动敲一遍代码,不然就算当时看视频学会也会很容易忘记。

六、 一份合格的网页作业

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

1、️页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;
2、所有页面相互超链接,可到三级页面,有5-10个页面组成;
3、⌨️页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;
4、菜单美观、醒目,二级菜单可正常弹出与跳转;
5、‍要有JS特效,如定时切换和手动切换图片新闻;
6、页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;
7、页面清爽、美观、大方,不雷同。
8、网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

七、源码获取

1、 ~ 关注我,点赞博文~ 每天带你涨知识!
2、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0199

你可能感兴趣的:(html,css,前端)