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; } </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> <li><a href="zhuce.html">注册</a></li> </ul> </nav> </div> </header> <div id="tour"> <section class=center> <h2>四川旅游</h2> <p>四川旅游分享</p> </section> <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>2022-05-19</em> <div> 评论：<input type="text"> </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>2022-05-19</em> <div> 评论：<input type="text"> </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>2022-05-19</em> <div> 评论：<input type="text"> </div> </div> </figure> <figure> <a href="#"><img src="image/tour6.jpg" alt=峨眉山></a> <figcaption><strong class=title><峨眉山></strong>哦眉山是中国“四大佛教名山”</figcaption> <div> <span class=price>分享日期</span> <em class=sat>2022-05-19</em> </div> <div> 评论：<input type="text"> </div> </figure> <figure> <a href="#"><img src="image/tour7.jpg" alt=甘孜州海螺汐沟景区></a> <figcaption><strong class=title><甘孜州海螺汐沟景区></strong>美丽的四川</figcaption> <div> <span class=price>分享日期</span> <em class=sat>2022-05-19</em> <div> 评论：<input type="text"> </div> </div> </figure> <figure> <a href="#"><img src="image/tour9.jpg" alt=贡嘎山风景名胜区></a> <figcaption><strong class=title><贡嘎山风景名胜区></strong>美丽的四川</figcaption> <div> <span class=price>分享日期</span> <em class=sat>2022-05-19</em> <div> 评论：<input type="text"> </div> </div> </figure> </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> </body> </html> <script> var hh=JSON.parse(sessionStorage.getItem("arr"))||[] if(hh.length>0){ tou.src=hh[0].touxiang zhanghao.innerHTML=hh[0].name } </script>