HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)_旅游网站界面web代码

最新推荐文章于 2024-04-28 15:38:26 发布

2401_84411433

最新推荐文章于 2024-04-28 15:38:26 发布

阅读量987

点赞数 9

文章标签：前端 html 旅游

本文链接：https://blog.csdn.net/2401_84411433/article/details/138233234

版权

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- HTML结构代码🧱
  - CSS样式代码🏡
六、遇到问题及如何解决🔍
七、实训总结😊
八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


<html>
<head>
<meta charset="UTF-8">
<title>旅游中国</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript"></script>
</head>
<body>
<div class="head"><img src="images/logo.png" width="240"></div>
<div class="nav">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="liuyan.html">留言</a></li>
    <li><a href="gentuanyou.html">跟团游</a></li>
    <li><a href="zixun.html">新闻资讯</a></li>
    <li><a href="fengguang.html">图片风光</a></li>
    <li><a href="shipin.html">精彩视频</a></li>
    <li><a href="denglu.html">会员登录</a></li>
    <li><a href="zhuce.html">会员注册</a></li>
  </ul>
</div>
<div class="banner2" id="banner">
  <ul id="b\_pic">
    <li style="display: block;"><img src="images/banner1.jpg" alt=""></li>
    <li><img src="images/banner2.jpg" alt=""></li>
    <li><img src="images/banner3.jpg" alt=""></li>
  </ul>
  <ul id="b\_an">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="main">
  <div class="fls" >
    <h2 class="bar">自由行</h2>
    <ul>
      <li><img src="images/1.jpg" width="100%">
        <p>四川成都+稻城亚丁+理塘+珍珠海+新都桥7日6晚私家团·越野自驾·</p>
      </li>
      <li><img src="images/2.jpg" width="100%">
        <p>可选专车接送站/一日游/包车|穿越时光·遇见长安|停留天数随心定·旅行说走就走</p>
      </li>
      <li><img src="images/3.jpg" width="100%">
        <p>住1晚市区+1晚黄山山顶+1晚宏村 · 严选包车游</p>
      </li>
    </ul>
  </div>
  <div class="mls">
    <h2 class="bar">推荐线路</h2>
    <ul class="txtlist">
      <li> <a href="zyinfo.html"><img src="images/b1.jpg" width="140"></a>
        <div> <a href="zyinfo.html">阿坝3日2晚跟团游·纯玩丨九寨沟+黄龙【熊猫乐园/都江堰任选其一】（可升级头等舱/熊猫主题食宿/千古情晚会/三钻-五钻多档住宿·供君选择）赠价值150元藏家晚会（酥油茶、青稞酒、土火锅）+含去程动车费用+三环内包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b2.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">九寨沟+成都3日2晚跟团游·3晚+去程动车票| 真纯玩0购物0自费4钻｜小团/旅拍/熊猫主题｜A线熊猫乐园/B线都江堰/C线峨眉乐山/D线达古冰川/E线四姑娘山/F线若尔盖草原，赠送百元川秀/升级/玩法任选|三环包接~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b3.jpg" width="140"></a>
        <div> <a href="zyinfo.html">成都+九寨沟+黄龙风景名胜区4日3晚跟团游·全程入住优选4钻酒店+成都首尾自由活动+有限的时间只与美景相遇+高端真纯玩精选行程无猫腻+24小时免费接送机站让你的假期出行无忧+可选升级保姆车2+1座椅</a>
          <p></p>
        </div>
      </li>
      <li> <a href="gtyinfo.html"><img src="images/b4.jpg" width="140"></a>
        <div> <a href="gtyinfo.html">海南海口+三亚蜈支洲岛5日4晚跟团游·亲子出游升级海口五星*三亚连住海边不挪窝+蜈支洲岛畅游+浪漫雨林天堂公园+南山+打卡网红亚特兰蒂斯水世界+扬帆出海【爸妈·蜜月·亲子·闺蜜出游必选】24H在线管家服务~~</a>
          <p></p>
        </div>
      </li>
      <li> <a href="zyinfo.html"><img src="images/b5.jpg" width="140"></a>
        <div> <a href="zyinfo.html">三亚+蜈支洲岛+亚龙湾5日4晚跟团游·【五•一特惠 高端出游行程】赠送好莱坞车技表演 0购物纯玩 单/双飞可选 全程五星度假酒店 4大5A热门景点 海南美食盛宴升级海鲜大餐+养生素斋 本土导游跟随讲解</a>
          <p></p>
        </div>
      </li>
    </ul>
  </div>
  <div class="rls" >
    <h2 class="bar">跟团游</h2>
    <ul>
      <li><img src="images/c1.jpg" width="100%">
        <p>贵州黄果树+梵净山+镇远+西江千户苗寨+荔波7...</p>
      </li>
      <li><img src="images/c2.png" width="100%">
        <p>海南三亚+蜈支洲岛6日5晚跟团游(5钻)·限时特惠...</p>
      </li>
      <li><img src="images/c3.jpg" width="100%">
        <p>成都+稻城亚丁4日3晚跟团游·稻城出发 【纯玩无购物...</p>
      </li>
    </ul>
  </div>
  <div style="clear:both"></div>
  <h2 class="bar">风光图片</h2>
  <ul class="imglist">
    <li><img src="images/f1.jpg"></li>
    <li><img src="images/f2.jpg"></li>
    <li><img src="images/f3.jpg"></li>
    <li><img src="images/f4.jpg"></li>
    
  </ul>
  <div style="clear:both"></div>
</div>
<div class="end">旅游网</div>
</body>
</html>




### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)

2401_84411433

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)_旅游网站界面web代码

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
复制链接

扫一扫