web前端开发技术：旅游网页设计与实现——旅游风景区网站HTML+CSS_旅游html+css网页设计

作者：weixin_40725706 | 2024-08-29 06:15:07

踩

旅游html+css网页设计

⛵ 源码获取文末联系 ✈

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

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
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 lang="en">
<head>
	<meta name="auto" content='spider'>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<style>
		.yh{
     
   position: fixed;
    right: 1%;
    top: 10%;
    width: 200px;
    height: 200px;
    background: skyblue;
    color: white;
    text-align: center;
    line-height: 50px;
    padding-top: 30px;
	z-index: 9;
	opacity: 0.8;
		border-radius: 50px;
}
 figure{
     
	 width:30% !important;
 }
 figure img{
     
	 width: 100% !important;
 }
#mtk{
     
	width: 100vw;
	height: 300vh;
	position: absolute;
	background: rgba(0, 0, 0, 0.3);
	top: 0;
    display: none;

}



	</style>
		<style>
			.login-box {
     

		width: 500px;
		padding: 40px;
		/* 登录框居中 */
		margin: auto;
		margin-top: 10%;
		background: rgba(0, 0, 0, .8);
		/* css3新特性，任何内外边距和边框都将在已设定的宽度和高度内进行绘制 */
		box-sizing: border-box;
		/* 添加阴影 */
		box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
		/* 边框圆角 */
		border-radius: 10px;
	}

	.login-box h2 {
     
		margin: 0 0 30px;
		padding: 0;
		color: #fff;
		text-align: center;
	}
	
	.login-box .user-box {
     
		position: relative;
	}
	
	.login-box .user-box input {
     
		width: 100%;
		padding: 10px 0;
		font-size: 16px;
		color: #fff;
		margin-bottom: 30px;
		border: none;
		border-bottom: 1px solid #fff;
		outline: none;
		background: transparent;
	}
	
	.login-box .user-box label {
     
		position: absolute;
		top: 0;
		left: 0;
		padding: 10px 0;
		font-size: 16px;
		color: #fff;
		/* 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素 */
		pointer-events: none;
		transition: .5s;
	}
	
	.login-box .user-box input:focus~label,
	.login-box .user-box input:valid~label {
     
		top: -20px;
		left: 0;
		color: #03e9f4;
		font-size: 12px;
	}
	
	.login-box form a {
     
		position: relative;
		display: inline-block;
		padding: 10px 20px;
		color: #03e9f4;
		font-size: 16px;
		text-decoration: none;
		text-transform: uppercase;
		overflow: hidden;
		transition: .5s;
		margin-top: 40px;
		letter-spacing: 4px
	}
	
	.login-box a:hover {
     
		background: #03e9f4;
		color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 20px #03e9f4;
	}
	
	/* 按钮特效 -Start */
	.login-box a span {
     
		position: absolute;
		display: block;
	}
	
	.login-box a span:nth-child(1) {
     
		top: 0;
		left: -100%;
		width: 100%;
		height: 2px;
		background: linear-gradient(90deg, transparent, #03e9f4);
		animation: btn-anim1 1s linear infinite;
	}
	
	@keyframes btn-anim1 {
     
		0% {
     
			left: -100%;
		}
	
		50%,
		100% {
     
			left: 100%;
		}
	}
	
	.login-box a span:nth-child(2) {
     
		top: -100%;
		right: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(180deg, transparent, #03e9f4);
		animation: btn-anim2 1s linear infinite;
		animation-delay: .25s
	}
	
	@keyframes btn-anim2 {
     
		0% {
     
			top: -100%;
		}
	
		50%,
		100% {
     
			top: 100%;
		}
	}
	
	.login-box a span:nth-child(3) {
     
		bottom: 0;
		right: -100%;
		width: 100%;
		height: 2px;
		background: linear-gradient(270deg, transparent, #03e9f4);
		animation: btn-anim3 1s linear infinite;
		animation-delay: .5s
	}
	
	@keyframes btn-anim3 {
     
		0% {
     
			right: -100%;
		}
	
		50%,
		100% {
     
			right: 100%;
		}
	}
	
	.login-box a span:nth-child(4) {
     
		bottom: -100%;
		left: 0;
		width: 2px;
		height: 100%;
		background: linear-gradient(360deg, transparent, #03e9f4);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/1022063