学生网页作业—山河旅行社网站(5页) HTML+CSS+JavaScript 学生DW网页 出行 旅途 游玩

最新推荐文章于 2024-05-02 20:30:37 发布
最新推荐文章于 2024-05-02 20:30:37 发布
阅读量245 收藏 2
点赞数
分类专栏： web大学生个人网站作业模 html网页设计作业 学生div+css静态网页设计成品 文章标签： css javascript html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/122353531
版权

HTML5期末大作业：山河旅行社网站设计——山河旅行社网站(5页) HTML+CSS+JavaScript

文章目录

一、作品展示

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

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>山河旅行社</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">

    <div class="center">
        <h1 class="logo">山河旅行社</h1>
        <nav class="link" >
            <h2 style="display:none;">网站导航</h2>
            <ul>
                <li class="active"><a href="###">首页</a></li>
                <li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
                <li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
                <li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
                <li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
            </ul>
        </nav>
    </div>
</header>
<div id="adver">
    <img src="picture/adver.jpg" alt="">
    <div class="center"></div>
    <div class="center copy">
        <input type="text" class="search" placeholder="请输入旅游景点或城市">
        <button class="button">搜索</button>
    </div>
</div>
<div id="tour">
    <section class="center ">
        <h2>热门旅游</h2>
        <p>国内旅游，国外旅游、自助旅游、自驾旅游、游轮签证、主题旅游等各种最新热门旅游推介</p>
    </section>
    <figure>
        <img src="picture/tour1.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
    <figure>
        <img src="picture/tour2.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
                <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour3.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
                <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour4.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
    <figure>
    <img src="picture/tour5.png" alt="">
    <figcaption>
        <div class="tour_title">
        <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
        </div>
            <div class="info">
            <em class="sat">满意度97%</em>
            <span class="price"> ￥<strong> 2864</strong> 起</span>
        </div>
        <div class="type">国内长线</div>
    </figcaption>
</figure>
    <figure>
        <img src="picture/tour6.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour7.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour8.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>
    </figure>
    <figure>
        <img src="picture/tour9.png" alt="">
        <figcaption>
            <div class="tour_title">
            <strong>&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
            </div>
            <div class="info">
                <em class="sat">满意度97%</em>
                <span class="price"> ￥<strong> 2864</strong> 起</span>
            </div>
            <div class="type">国内长线</div>
        </figcaption>

    </figure>
</div>
<footer id="footer">
    <div class="top sm-hidden">
        <div class="block left">
            <h2>合作伙伴</h2>
            <hr>
            <ul class="ul">
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游</li>
                <li>中国青年旅社</li>
            </ul>
        </div>

        <div class="block center">
            <h2>旅游FAQ</h2>
            <hr>
            <ul class="ul">
                <li>旅游合同签订方式？</li>
                <li>儿童价是基于什么制定的？</li>
                <li>旅游的线路品质是怎么界定的？</li>
                <li>旅游保险有些什么种类？</li>
            </ul>
        </div>
        <div class="block right">
            <h2>联系方式</h2>
            <hr>
            <ul class="ul">
                <li>微博：weibo.com/maodo</li>
                <li>邮件：sh@maodou.com</li>
                <li>地址：西安市雁塔区123号</li>
            </ul>
        </div>
    </div>
    <div class="chearfix"></div>
    <div class="version sm-visible">
        客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">Copyright © SHMD 山河旅行社| 陕ICP 备120110119 号<span class="sm-hidden">| 旅行社经营许可证：L-SH-BK12345</span></div>
</footer>

</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码

优质内容贡献
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
旅行社网站源码(Html生成) v1.0.rar
07-05
旅行社网站源码(Html生成)v1.0 功能：网站资料 公司简介 游记攻略 注意事项 留言管理 预订管理 景区展示 旅游线路管理 线路分类 后台用户名admin密码123456
dreamweaver网页大作业 我的家乡——南京玄武湖旅游攻略(4页) 学生网页设计作业源码
QQ_____365392777的博客
08-10 2409
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
HTML5期末大作业：关于旅游景点介绍的HTML网页设计——榆林子州 8页 (含毕设论文9000字) 建议收藏...
qq_365392777
10-08 7283
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明...
学生个人网页设计作品：旅游网页设计与实现——成都旅游网站4个页HTML+CSS web前端网页设计期末课程大作业 学生DW静态网页设计 学生个人网页设计作品
网页设计与制作 | HTML+CSS+JS
11-23 340
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景
HTML5期末大作业：桂林旅游网站设计——桂林旅游(3页) HTML+CSS+JavaScript html网页制作期末大作业成品_游玩 主题住宿网页
12-04 1097
HTML5期末大作业：桂林旅游网站设计——桂林旅游(3页) HTML+CSS+JavaScript html网页制作期末大作业成品_游玩 主题住宿网页 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求
HTML5期末大作业：山河旅行社网站设计——山河旅行社网站(5页) HTML+CSS+JavaScript 学生DW网页 出行 旅途 游玩
11-26 1500
HTML5期末大作业：山河旅行社网站设计——山河旅行社网站(5页) HTML+CSS+JavaScript 学生DW网页 出行 旅途 游玩 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
QQ_____365392777的博客
08-20 1万+
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
QQ____2709137139的博客
08-13 2709
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。...
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript
08-10
乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 ...
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript.md.zip
01-12
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript.md.zip
HTML-响应式山河旅行社网站-网站网页H5源码.zip
03-03
借助前沿的HTML5和CSS3技术，该模板不仅具备了响应式设计，以确保无缝适配各式设备，还内置了众多JavaScript插件，以实现高级的交互功能。此源代码文件的设计考虑了极高的定制性，允许您依据个人或项目要求进行灵活...
响应式山河旅行社网站-html项目源码
01-07
《响应式山河旅行社网站》是一份精心制作的旅行社网站模板，专为旅游行业设计。它采用了响应式布局，适应各种设备和屏幕尺寸，确保在电脑、平板和手机上都能获得良好的用户体验。 该网站的设计简洁大方，色彩搭配...
响应式山河旅行社网站.zip
11-06
响应式山河旅行社网站
CSS特性
lan_da_wang的博客
04-29 380
化简代码，定位问题，解决问题。
c3 笔记7 css基本语法
最新发布
weixin_63492023的博客
05-02 537
单位pt与px的差别pt是印刷使用的字号单位，不管屏幕分辨率是多少，打印到纸上看起来都是相同的，lot的长度是0.01384英寸，相当于1/72英寸，我们常用的Word软件设置的字号就是以pt为单位；而px是屏幕使用的字号单位，px能够精确地表示组件在屏幕中的位置与大小，不管屏幕分辨率怎么调整，网页版面都不会变化太大，但是打印到纸面上时，就可能有差异，然而网页的目的是为了屏幕浏览，因此CSS大多会选择以px为单位。letter-spacing用来设置字符与字符的间距，输入负值，字符间距就会变得紧密。
CSS的box-shadow 用法
于坤
04-28 403
CSS的box-shadow属性是一个强大的工具，用于向框（盒子）元素添加阴影效果。它可以添加一个或多个阴影，并可以定制阴影的大小、模糊程度、颜色等。
前端科举八股文-CSS篇
星海拾遗
04-25 1148
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
旅行社网站设计html
11-21
旅行社网站设计HTML主要包括HTML、CSS和JavaScript三个部分。HTML负责网页的结构和内容，CSS负责网页的样式和布局，JavaScript负责网页的交互和动态效果。 一个基本的旅行社网站设计HTML包括以下几个页面： 1.首页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值