HTML5期末大作业:旅游网页设计与实现——旅游风景区网站HTML+CSS (1)

news2024/10/7 18:31:37

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

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

HTML结构代码



<!DOCTYPE html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" href="./css//broadcastMap.css">
	<script src="./js/broadcastMap.js"></script>

</head>

<body>
	<div class="main">

		<div class="content12">
			<div class="daohang">




				<div class="img"><img src="images/1.jpg"></div>

				<ul>
					<li class="active"><a href="index.html">首页</a>


					<li><a href="lishiyange.html">历史沿革</a>


					</li>
					<li><a href="renkou.html">人口</a>


					</li>
					<li><a href="fengjingmingsheng.html">风景名胜</a>


					</li>
					<li><a href="difangtechan.html">地方特产</a>


					</li>
					<li><a href="renwuliebiao.html">人物列表</a>


					</li>
					<li><a href="xuexiaoliebiao.html">学校列表</a>


					</li>
					<li style="display:flex;width: 250px;font-size: 15px;color:white;font-weight: 800;">
						<div>北京时间:</div>
						<div id="time" class=""></div>
					  </li>

				</ul>
			</div>
		</div>
		<div class="clear"></div>

		<div class="content12">
			<div class="guanggaotupian">


				<div class="box">
					<div class="box-1">
						<ul>
							<li>
								<img src="images/2.jpg" alt="这里是第一场图片">
								<h2>这里是第一张图片这里是第一张图片</h2>
							</li>
							<li>
								<img src="images/3.jpg" alt="这里是第二张图片">
								<h2>这里是第二张图片这里是第二张图片</h2>
							</li>
							<li>
								<img src="images/7.jpg" alt="这里是第三张图片">
								<h2>这里是第三张图片这里是第三张图片</h2>
							</li>
							<li>
								<img src="images/4.jpg" alt="这里是第一场图片">
								<h2>这里是第四张图片这里是第四张图片</h2>
							</li>
							<li>
								<img src="images/5.jpg" alt="这里是第一场图片">
								<h2>这里是第五张图片这里是第五张图片</h2>
							</li>
						</ul>
					</div>
					<div class="box-2">
						<ul>
			
						</ul>
					</div>
					<div class="box-3">
						<span class="prev">
							< </span>
								<span class="next"> > </span>
					</div>
				</div>

			</div>
		</div>
		<div class="clear"></div>

		<div class="content3" id="content">
			<div class="taitou">






				<div class="title">
					<div class="line"></div>
					<div class="stitle">

						<div class="sstitle">
							<div class="h2">图片展示</div>
							<span>TUPIANZHANSHI</span>
						</div>

					</div>
				</div>







			</div>
			<div class="xiangceliebiao">



				<ul>
					<li>
						<div class="img"><img src="images/3.jpg"></div>
					</li>
					<li>
						<div class="img"><img src="images/4.jpg"></div>
					</li>

				</ul>

			</div>
		</div>

		<div class="content9" id="content2">
			<div class="taitou">






				<div class="title">
					<div class="line"></div>
					<div class="stitle">

						<div class="sstitle">
							<div class="h2">邢台</div>
							<span>XINGTAI</span>
						</div>

					</div>
				</div>







			</div>
			<div class="xt">

				<div class="text">
					<div class="desc">
						<p>邢台,简称“邢”,古称邢州、顺德府,是河北省地级市,河北省政府批复确定的京津冀城市群节点城市、河北省级历史文化名城、冀中南先进制造业基地和物流枢纽
							。截至2020年,全市下辖4个区、12个县、代管2个县级市。
							总面积12400平方千米,市区建成区面积214.84平方千米,常住人口739.52万人,城镇人口401.04万人,城镇化率54.23%。
						</p>
						<p>邢台地处中国华北地区、河北南部,境内京广、京九铁路,京广、京九高铁,京港澳、大广、太行山高速纵贯南北;邢和、邢黄铁路,邢衡、邢汾、邢临、青银高速横贯东西,与邢台国际内陆港、邢台机场构成了“东出西联、南承北接”的交通枢纽。
						</p>
						<p>邢台拥有3500余年建城史,距今五万至十万年前就有人类栖息繁衍,历史上曾四次建国、五次定都,有“五朝古都、十朝雄郡”之称,是华夏版图上建城历史排名第三的城市
							,华北历史上第一座城市,中国最早的古都之一,历经三千多年行政建制未曾中断、城址未曾迁移。邢台古城是黄河以北地区建城最早的“第一古城”,被誉为“燕赵第一城”。
						</p>
						<p>邢台悠久的历史涌现出郭守敬、李牧、宋璟、刘秉忠等先贤,走出了郭威、柴荣、孟知祥、孟昶等帝王,千古一帝秦始皇东巡途中驾崩于邢台沙丘
							。
					</div>
				</div>


			</div>
		</div>
		<div class="clear"></div>

		<div class="content12" id="content3">
			<div class="taitou">
				<div class="title">
					<div class="line"></div>
					<div class="stitle">

						<div class="sstitle">
							<div class="h2">人口</div>
							<span>RENKOU</span>
						</div>

					</div>
				</div>







			</div>
			<div class="rk">














				<div class="text">
					<div class="list">
						<img src="images/5.jpg" class="img">
						<img src="images/6.jpg" class="img">

					</div>

					<br><br>2019年,全市户籍总人口801.37万人,比上年末增加4.7万人。户籍人口城镇化率为41.37%,比上年增加4.15个百分点。年末全市常住人口739.52万人,比上年末增加2.08万人。全年出生人口7.6万人,人口出生率为11.5‰;死亡人口3.76万人,死亡率为6.1‰;人口自然增长率为5.4‰。
				</div>

				<div class="clear"></div>
				<div class="list ">
					<img src="images/7.jpg" class="img">
					<img src="images/8.jpg" class="img">

				</div>



				<div class="text">
					从城乡结构看,城镇常住人口401.04万人,比上年末增加10.86万人;城镇常住人口占常住总人口比重(常住人口城镇化率)为54.23%,比上年末提高1.32个百分点。
				</div>


















			</div>
		</div>
		<div class="clear"></div>

		<div class="content12">
			<div class="dibu">

				<div class="desc">
					邢台
				</div>


			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>

</html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

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

相关文章

【项目实战:核酸检测平台】第一章 逆向工程

引言 准备做个项目实战系列&#xff0c;选一些比较有代表性&#xff0c;难度适中、规模合适的项目&#xff0c;从不同的角度&#xff0c;不同的深度去解析。很多初学者都抱怨没有实战项目&#xff0c;而学校/机构里大量用烂的学生管理、图书管理、电子商城等项目实在没有什么新…

LeetCode--230. 二叉搜索树中第K小的元素(C++描述)

// Source :https://leetcode.cn/problems/kth-smallest-element-in-a-bst/ // Date : 2022-11-19 /************************************************************************************** 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计…

Nginx 快速入门

一、简述 1.1 介绍 传统的 Web 服务器&#xff0c;每个客户端连接作为一个单独的进程或线程处理&#xff0c;需在切换任务时将 CPU 切换到新的任务并创建一个新的运行时上下文&#xff0c;消耗额外的内存和 CPU 时间&#xff0c;当并发请求增加时&#xff0c;服务器响应变慢&…

修改xml文件

一、前言 本节是修改xml;同样方法也可修改arxml文件&#xff1b;主要使用LET.Element创建节点&#xff1b; 二、知识点 1、专门用于格式化处理xml文件使其具有层级分明的缩进函数 #专门用于格式化处理xml文件使其具有层级分明的缩进 def indent( elem, level0): i "\n&…

基于51单片机的全自动智能洗衣机控制系统Proteus仿真

资料编号&#xff1a;108 下面是相关功能视频演示&#xff1a; 108-基于51单片机的全自动智能洗衣机控制系统Proteus仿真&#xff08;仿真源码全套资料&#xff09;设计功能&#xff1a; 1、对水温实时显示 2、显示滚筒转速 3、显示运行倒计时 4、能通过按钮分别设置洗涤时间…

一文带你深入理解【Java基础】· 常用类(上)字符串相关类

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…

[附源码]java毕业设计社区私家车位共享收费系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

基于51单片机的八路电压表采集Proteus仿真

资料编号&#xff1a;110 下面是相关功能视频演示&#xff1a; 110-基于51单片机的八路电压表采集Proteus仿真&#xff08;源码仿真原理图全套资料&#xff09;功能如下&#xff1a; 利用单片机及其外围器件&#xff08;A/D转换器等&#xff09;实现一款简易电压表&#xff0…

(免费分享)基于springboot医药进销存系统

源码获取&#xff1a;关注文末gongzhonghao&#xff0c;输入014领取下载链接 开发工具&#xff1a;IDEA,数据库mysql 技术&#xff1a;springbootmybatis 系统主要分两个角色&#xff0c;客户和员工 package cn.tedu.drug.controller;import java.io…

【Pytorch with fastai】第 18 章 :使用 CAM 进行 CNN 解释

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

Design a Facebook NewsFeed

title: Notes of System Design No.06 — Design a Facebook’s Newsfeed description: Design a Facebook’s Newsfeed ’ date: 2022-05-13 18:01:58 tags: 系统设计 categories: 系统设计 00. What is News Feed? 01.Functional Requirement 02. Non-Functional Requireme…

面试刷题---计算机网络部分(一)

1 请描述 TCP/IP 协议中主机与主机之间通信的三要素 答&#xff1a; IP 地址&#xff08;IP address&#xff09; 子网掩码&#xff08;subnet mask&#xff09; IP 路由&#xff08;IP router&#xff09; 扩展&#xff1a; TCP/IP定义&#xff1a;TCP/IP是基于TCP和IP这两个…

iHRM 人力资源管理系统_第11章_刷脸登录

iHRM 人力资源管理系统_第11章_刷脸登录 文章目录iHRM 人力资源管理系统_第11章_刷脸登录第11章 刷脸登录1 浅谈人工智能1.1 人工智能的概述1.2 人工智能的应用领域1.3 基于人工智能的刷脸登录介绍2 百度云AI概述2.1 概述2.2 百度云AI的开发步骤2.3 百度云AI的注册与认证3 百度…

web大作业 静态网页(地下城与勇士 10页 带视频)

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 游戏官网 | 游戏网站 | 电竞游戏 | 游戏介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业&#xff0c;Web大学生网页 HTML&#xff1a;结构 …

开源免费的对象存储Minio

什么是Minio&#xff1f; Minio是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口&#xff0c;非常适合存储大容量、非结构化的数据。例如&#xff0c;图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以是…

机器学习:卷积神经网络

卷积神经网络卷积神经网络的结构及原理卷积层池化层激活函数全连接层反馈运算使用MNIST数据集进行代码解析数据介绍实现流程代码实现卷积神经网络的结构及原理 卷积层 卷积运算一个重要的特点就是&#xff1a;通过卷积运算&#xff0c;可以使原信号特征增强&#xff0c;并且降…

服务器常用的异常及性能排查

服务器常用的异常及性能排查 使用 top 命令查看性能指标 top 命令使用详细介绍&#xff1a;传送门 查看Tasks total 进程数 正常我们在使用过程中对每天的一个进程数大概是有一个谱的&#xff0c;比如正常就是1百多个&#xff0c;突然暴增几百&#xff0c;那就很明显这里有…

计算机网络:运输层

运输层 运输层主要解决了应用进程之间的通信&#xff0c;称之为端到端协议 1.运输层概述 计算机网-------络体系结构的角度 AP:应用进程之间的简称 2. 运输层端口号、复用与分用的概念 2.1 端口号 2.2 发送方的复用&#xff08;multiplexing&#xff09;和接收方的分用&…

【Java面试八股文宝典之基础篇】备战2023 查缺补漏 你越早准备 越早成功!!!——Day10

大家好&#xff0c;我是陶然同学&#xff0c;软件工程大三明年实习。认识我的朋友们知道&#xff0c;我是科班出身&#xff0c;学的还行&#xff0c;但是对面试掌握不够&#xff0c;所以我将用这100多天更新Java面试题&#x1f643;&#x1f643;。 不敢苟同&#xff0c;相信大…

锐捷RLDP理论及实验讲解

RLDP概念 RLDP&#xff08;Rapid Link Detection Protocol&#xff09;是一个用于快速检测以太网链路故障的链路协议&#xff0c;包括环路链路故障、单向链路故障、双向链路故障等 工作原理 RLDP定义了两种协议报文&#xff1a;探测报文&#xff08;Probe&#xff09;和探测响…