旅游风景区`web大作业 静态网页

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

  1. HTML:结构

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

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


前端学习路线

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

网页基本结构

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

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


网页演示

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

HTML结构代码



<!DOCTYPE HTML>
<html>
	<head>
		<title>Home</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="css/responsiveslides.css" rel="stylesheet" type="text/css" media="all">
	</head>
	<body>
		<!-- 顶部区域logo以及导航栏 -->
		<div class="header">
			<div class="wrap">
				<div class="logo">
					<a href="index.html">途游</a>
				</div>
				<div class="top-nav">
					<ul>
						<li class="active"><a href="index.html">主页</a></li>
						<li><a href="about.html" >关于</a></li>
						<li><a href="services.html">美食</a></li>
						<li><a href="contact.html">反馈</a></li>
					</ul>
				</div>
				<div class="clear"> </div>
			</div>
		</div>
		<div class="clear"> </div>
		<div class="banner">
			<ul class="banner-content" id="banner-content">
				<li><img src="img/1.jpeg" ></li>
				<li><img src="img/2.jpeg" ></li>
				<li><img src="img/3.jpeg" ></li>
				<li><img src="img/4.jpeg" ></li>
				<li><img src="img/5.jpeg" ></li>
			</ul>
			<ul class="btn-list" id="btn-list">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content">
			<div class="content_top">
				<div class="wrap">
					<h1><a href="#">欢迎</a></h1>
					<p>这是一个旅游网站,这里会给你推荐丽江的各种类型的旅游景点,当地特色,美食等...</p>
					<span><a class="learnmore" href="#">GO!</a></span>
				</div>
			</div>
			<div class="content-grids">
				<div class="wrap">
					<div class="grid">
						<a href="#"><img src="img/5.jpeg" title="image-name" /></a>
						<h3>丽江蓝月谷瀑布</h3>
						<p>蓝月谷地处云南省丽江市玉龙纳西族自治县玉龙雪山东麓,俗称“白水河”,以其巍峨壮美的雪山、湛蓝如玉的湖水与雄齐秀丽的峡谷风光享誉世界,因湖水湛蓝、山谷呈月牙状而得名,相传是英国作家詹姆斯·希尔顿笔下《消失的地平线》中蓝月亮山谷的原型。</p>
						<a class="button">了解更多</a>
					</div>
					<div class="grid">
						<a href="#"><img src="img/6.jpeg" title="image-name" /></a>
						<h3>泸沽湖旅游景区</h3>
						<p>泸沽湖古称鲁窟海子,又名左所海,俗称亮海。纳西族摩梭语“泸”为山沟,“沽”为里,意即山沟里的湖。泸沽湖旅游景区四周崇山峻岭,一年有三个月以上的积雪期。森林资源丰富,山清水秀,泸沽湖被当地摩梭人奉为“母亲湖”。也被人们誉为“蓬莱仙境”。
						</p>
						<a class="button">了解更多</a>
					</div>
					<div class="grid last-grid">
						<a href="#"><img src="img/7.jpeg" title="image-name" /></a>
						<h3>蓝月谷</h3>
						<p>蓝月谷地处云南省丽江市玉龙纳西族自治县玉龙雪山东麓,俗称“白水河”,以其巍峨壮美的雪山、湛蓝如玉的湖水与雄齐秀丽的峡谷风光享誉世界,因湖水湛蓝、山谷呈月牙状而得名,相传是英国作家詹姆斯·希尔顿笔下《消失的地平线》中蓝月亮山谷的原型。</p>
						<a class="button">了解更多</a>
					</div>

					<div class="clear"> </div>
				</div>
			</div>
			<div class="specials">
				<div class="wrap">
					<div class="specials-heading">
						<h3>丽江推荐景点</h3>
					</div>
					<div class="specials-grids">
						<div class="special-grid">
							<img src="img/8.jpeg" width="200px" height="250px" title="image-name" />
							<a href="#">丽江蓝月谷</a>
							<p>烟花姹紫嫣红 , 转瞬即逝犹如昙花一现。时间飞逝,花开花谢,云卷云舒,记住当前的美好时光,每天带给自己阳光和笑容</p>
						</div>
						<div class="special-grid">
							<img src="img/9.jpeg"  width="200px" height="250px" title="image-name" />
							<a href="#">丽江古城</a>
							<p>丽江古城内的街道依山傍水修建,以红色角砾岩铺就,有四方街、木府、五凤楼、黑龙潭、文昌宫、王丕震纪念馆、雪山书院、王家庄基督教堂、方国瑜故居、白马龙潭寺、顾彼得旧居、净莲寺、普贤寺、接风楼、十月文学馆、红军长征过丽江指挥部纪念馆、丽江古城历史文化展示馆、丽江古城徐霞客纪念馆等景点。丽江为第二批被批准的中国历史文化名城之一,是中国以整座古城申报世界文化遗产获得成功的两座古城之一。</p>
						</div>
						<div class="special-grid spe-grid">
							<img src="img/10.jpeg" width="200px" height="250px" title="image-name" />
							<a href="#">丽江古城</a>
							<p>自景区恢复营业之日起至2020年12月31日,全国医护工作者凭本人执业医师证、护士资格证及身份证到丽江古城休养度假,即可免费入住参与“宿暖逆行者”活动的客栈。</p>
						</div>

						<div class="clear"> </div>
					</div>
				</div>
			</div>
			<div class="testmonials">
				<div class="wrap">
					<div class="testmonial-grid">
						<h3>感谢浏览</h3>
						<p>感谢各位的浏览,这里推荐的是丽江的风景丽江市位于云贵高原与青藏高原的连接部位,地势西北高而东南低,最高点为玉龙雪山主峰,属低纬暖温带高原山地季风气候,境内水利资源丰富,动植物种类繁多,为云南省重点林区、中国水电西电东送基地之一。</p>
						<a href="#"> 回到顶部</a>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"> </div>
		<!-- 底部区域 -->
		<div class="footer">
			<div class="wrap">
				<div class="footer-grids">
					<div class="footer-grid">
						<h3>丽江</h3>
						<p>丽江古城又叫大研镇,它由大研、白沙、束河三部分组成,大研古城是它们的集中代表,所以人们常常把它叫作大研古城或大研镇。而且大研古城位于丽江盆地的中心,古城的西南角耸立着酷似书天巨笔的文笔锋,丽江盆地则象一方碧玉做成的大砚台。</p>
					</div>
					<div class="footer-grid">
						<h3>最近文章</h3>
						<ul>
							<li><a href="#">丽江古城</a></li>
							<li><a href="#">茶马古道</a></li>
							<li><a href="#">玉龙雪山</a></li>
							<li><a href="#">蓝月谷</a></li>
						</ul>
					</div>
					<div class="footer-grid">
						<h3>帮助</h3>
						<ul>
							<li><a href="#">获取更多内容</a></li>
							<li><a href="#">对页面不了解 </a></li>
							<li><a href="#">其他推荐</a></li>
							<li><a href="#">对网页更多了解 </a></li>
						</ul>
					</div>
					<div class="footer-grid footer-lastgrid">
						<h3>联系我们</h3>
						<p>可以通过电话,QQ,邮件</p>
						<div class="footer-grid-address">
							<p>座机:0311-85268579</p>
							<p>QQ: xxx</p>
							<p>Email:<a class="email-link" href="#">xxx@qq.com</a></p>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
		</div>
		<!-- 底部版权区 -->
		<div class="clear"> </div>
		<div class="copy-right">
			<p>Copyright © <a>xxx</a><a></a></p>
		</div>
	</body>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>



学的反而越迷茫

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

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

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

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


学习更多

关注我 | 点赞博文 | 每天带你涨知识
相关问题可以相互学习,可关注↓公Z号


在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值