900字范文 > web前端开发技术：旅游网页设计与实现——旅游风景区网站HTML+CSS

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

时间：2020-08-12 09:22:36

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

HTML：结构

CSS：样式

在操作方面上运用了html5和css3，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

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><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);animation: btn-anim4 1s linear infinite;animation-delay: .75s}@keyframes btn-anim4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}}.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;}.gxnr{display:flex;flex-wrap: wrap;width: 1200px;height: 300px;overflow-y: auto;margin: auto;}</style></head><body><div class="yh"><img src="" alt="" style="width: 100px; height: 100px; border-radius: 50%;" id="tou"><p id="zhanghao">用户还未登录</p></div><header id='header'><div class='center'><nav style='overflow:hidden;'><h2 class="none">网站导航</h2><ul class="link"><li class="active"><a href="#">首页</a></li><li><a href="meishi.html" >美食</a></li><li><a href="login.html">登录</a></li></ul></nav></div></header><div id="tour"><section class='center'><h2>四川旅游</h2><p>四川旅游分享</p><button style="background-color:greenyellow; color: white; border: none; width: 100px;height: 30px; border-radius: 3px; cursor: pointer;" id="wyfx">我要分享</button></section><div class="gxnr" id="gxnr"><figure><a href="#"><img src="image/tour2.jpg" alt='九寨沟'></a><figcaption><strong class='title'><九寨沟></strong>九寨沟是世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、国家级自然保护区、国家地质公园、世界生物圈保护区网络</figcaption><div><span class='price'>分享日期</span><em class='sat'>-05-19</em><div>评论：<input type="text" onkeydown="pinglun1(event)" id="pl"></div><div class="neirong"></div></div></figure><figure><a href="#"><img src="image/tour4.jpg" alt='黄龙'></a><figcaption><strong class='title'><黄龙></strong>四川黄龙景区面积700平方公里，以彩池、雪山、峡谷、森林“四绝”著称于世，再加上难流、古寺、民俗称为“七绝”。</figcaption><div><span class='price'>分享日期</span><em class='sat'>-05-19</em><div>评论：<input type="text" onkeydown="pinglun2(event)" id="pl1"></div><div class="neirong1"></div></div></figure><figure><a href="#"><img src="image/tour5.jpg" alt='都江堰'></a><figcaption><strong class='title'><都江堰></strong>都江堰市青城山-都江堰旅游景区包含青城山、都江堰两个旅游区。其中青城山主峰老霄顶海拔1600米。</figcaption><div><span class='price'>分享日期</span><em class='sat'>-05-19</em><div>评论：<input type="text" onkeydown="pinglun3(event)" id="pl2"></div><div class="neirong2"></div></div></figure></div></div><footer id='foot'><div class="top"><div class="block left "><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block center "><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div><div class="block right "><h2>合作伙伴</h2><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国青年旅行社</li></ul></div></div><div class="bottom">xxx | xxx | 旅行经营许可证</div></footer><div id="mtk"><div class="login-box" id="zck"><h2>分享</h2><form><div class="user-box"><input type="text" name="" id="userNname"><label>地点</label></div><div class="user-box"><input type="text" name="" id="password"><label>内容</label></div><div class="user-box"><input type="file" name="" id="title1" onchange="sc(event)"><label>图片</label></div><a href="javascript:;" onclick="qxfx(event)"><span></span><span></span><span></span><span></span>取消分享</a><a href="javascript:;" onclick="fx(event)" style="float: right;"><span></span><span></span><span></span><span></span>分享</a></form></div></div></body></html><script>var hh=JSON.parse(sessionStorage.getItem("arr"))||[]var figure=document.querySelectorAll("figure")for(let q=0;q<figure.length;q++){}if(hh.length>0){tou.src=hh[0].touxiangzhanghao.innerHTML=hh[0].name}//第一个var hqpl=JSON.parse(localStorage.getItem("pl"))||[]console.log(hqpl)var neirong=document.querySelector(".neirong")for(let i=0;i<hqpl.length;i++){var neirong=document.querySelector(".neirong")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=hqpl[i]div.appendChild(span)div.appendChild(span1)neirong.appendChild(div)}function pinglun1(event){if(event.keyCode==13){let neirong=document.querySelector(".neirong")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=pl.valuediv.appendChild(span)div.appendChild(span1)neirong.appendChild(div)let arr=JSON.parse(localStorage.getItem("pl"))||[]arr.push(pl.value)localStorage.setItem("pl",JSON.stringify(arr))}}//第二个var hqpl1=JSON.parse(localStorage.getItem("pl1"))||[]var neirong1=document.querySelector(".neirong1")for(let i=0;i<hqpl1.length;i++){var neirong1=document.querySelector(".neirong1")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=hqpl1[i]div.appendChild(span)div.appendChild(span1)neirong1.appendChild(div)}function pinglun2(event){if(event.keyCode==13){var neirong1=document.querySelector(".neirong1")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=pl1.valuediv.appendChild(span)div.appendChild(span1)neirong1.appendChild(div)let arr=JSON.parse(localStorage.getItem("pl1"))||[]arr.push(pl1.value)localStorage.setItem("pl1",JSON.stringify(arr))}}//第三个var hqpl2=JSON.parse(localStorage.getItem("pl2"))||[]console.log(hqpl)var neirong2=document.querySelector(".neirong2")for(let i=0;i<hqpl2.length;i++){var neirong2=document.querySelector(".neirong2")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=hqpl2[i]div.appendChild(span)div.appendChild(span1)neirong2.appendChild(div)}function pinglun3(event){if(event.keyCode==13){var neirong2=document.querySelector(".neirong2")let div=document.createElement("div")let span=document.createElement("span")let span1=document.createElement("span")span.innerText="评论:"span1.innerText=pl2.valuediv.appendChild(span)div.appendChild(span1)neirong2.appendChild(div)let arr=JSON.parse(localStorage.getItem("pl2"))||[]arr.push(pl2.value)localStorage.setItem("pl2",JSON.stringify(arr))}}</script><script>wyfx.onclick=function(){mtk.style.display="block"}</script><script>var tupianfunction sc(){var file = title1.files[0];if (window.FileReader) {var reader = new FileReader(); if(file){reader.readAsDataURL(file);reader.onloadend = function (e) {tupian=e.target.resultconsole.log(tupian)}}; } }function qxfx(event){console.log(mtk)mtk.style.display="none"}function fx(event){if(userNname.value==""||password.value==""||title1.value==""){alert("请输入分享内容")return false}mtk.style.display="none"var figure=document.createElement("figure")var newspan=document.createElement("strong")var newspan1=document.createElement("span")var img=document.createElement("img")var div=document.createElement("div")var price=document.createElement("span")price.className="price"price.innerText="分享日期[删除]"price.onclick=function(){console.log( this.parentNode.parentNode.remove())}var em=document.createElement("em")em.className="sat"function getNowFormatDate() {var date = new Date();var seperator1 = "-";var year = date.getFullYear();var month = date.getMonth() + 1;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = year + seperator1 + month + seperator1 + strDate;return currentdate;}div.appendChild(price)div.appendChild(em)em.innerText=getNowFormatDate()img.src=tupianvar a=document.createElement("a")a.src="#"var div1=document.createElement("div")var inp=document.createElement("input")var div2=document.createElement("div")div2.className="ly"inp.onkeydown=function ping(event){if(event.keyCode==13){var div3=document.createElement("div")div3.innerText="评论:"+this.valuediv2.appendChild(div3)}}div1.innerText="评论:"div1.appendChild(inp)a.appendChild(img)figure.appendChild(a)figure.appendChild(newspan)figure.appendChild(newspan1)figure.appendChild(div)figure.appendChild(div1)figure.appendChild(div2)newspan.innerText=userNname.valuenewspan1.innerText=password.valuegxnr.appendChild(figure)alert("分享成功")}</script>