HTML5编写旅游网页

最新推荐文章于 2024-04-29 21:02:28 发布
最新推荐文章于 2024-04-29 21:02:28 发布
阅读量1.8k 收藏 19
点赞数 3
分类专栏： JAVAWEB 文章标签： html5 旅游 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60854279/article/details/133065259
版权

 网页样例：： 

代码：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" >
        <tr>
               <td ><img src="./images/top_banner.jpg" alt=""  ></td>
        </tr>
       
    </table>    
    <table align="center" width="1600">
     <tr>
            <td align="left"><img src="./images/logo.png" alt="" ></td>
            <td align="center"><img src="./images/search.png" alt=""></td>
            <td ><img src="./images/hotel_tel.png" alt="" ></td>
     </tr> 
    </table>
    <table align="center" border="" width="1700"  bgcolor="green" cellspacing="0">
        <tr>
            <td align="center" >
                 <a href="https://www.shengda.edu.cn/" target="_blank">首页</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">门票</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">酒店</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">香港车票</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">出境游</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">国内游</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">港澳游</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">抱团定制</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">全球自由行</a>
            </td>
            <td align="center">
                <a href="https://www.shengda.edu.cn/" target="_blank">收藏排行榜</a>
            </td>
        </tr>
    </table>
    
    <table>
        <td><img src="./images/icon_5.jpg" alt=""></td>
        <td>升达精选</td>
    </table>    
    <table align="center">
        <HR color="yellow" size="5">
        <tr><td ><img src="./images/banner_1.jpg" alt=""></td></tr>        
    </table>
 
   

    <table align="center"  >

        <tr>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt=""  ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>            
        </tr>
        <tr>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
        </tr>
        <tr>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
        </tr>
    </table>
    
    <table>
        <tr>
            <td><img src="./images/icon_6.jpg" alt=""></td>
            <td colspan="5">国内游</td>
        </tr>
    </table>
    <HR color="yellow" size="5">

    <table>
        <tr>
            <td rowspan="6"><img src="./images/guonei_1.jpg" alt=""></td> 
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>   
        </tr>

        <tr>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
        </tr>

        <tr>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
        </tr>

       <tr>
        <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
        <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
        <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>   
       </tr>

       <tr>
        <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
        <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
        <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
    </tr>

       <tr>
        <td style="color: red;" align="center">￥988</td>
        <td style="color: red;" align="center">￥988</td>
        <td style="color: red;" align="center">￥988</td>
    </tr>
    </table>

    <table>
        <tr>
            <td><img src="./images/icon_7.jpg" alt=""></td>
            <td colspan="5">国外游</td>
        </tr>
    </table>
    <HR color="yellow" size="5">
        
        <table>
            <tr>
                <td rowspan="6"><img src="./images/jiangwai_1.jpg" alt=""></td> 
                <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
                <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
                <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>   
            </tr>
    
            <tr>
                <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
                <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
                <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            </tr>
    
            <tr>
                <td style="color: red;" align="center">￥988</td>
                <td style="color: red;" align="center">￥988</td>
                <td style="color: red;" align="center">￥988</td>
            </tr>
    
           <tr>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>
            <td align="center"><img src="./images/jiangxuan_1.jpg" alt="" ></td>   
           </tr>
    
           <tr>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
            <td align="center">郑州直飞三亚，5天4晚自由游（假期预售+亲子又+接机送）</td>
        </tr>
    
           <tr>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
            <td style="color: red;" align="center">￥988</td>
        </tr>
        </table>

        <table align="center" width="1700"  bgcolor="pink">
            <tr align="left" >
                <td  rowspan="2" align="right"><img src="./images/icon_1.jpg" alt=""></td>
                <th>产品齐全</th>
                <td rowspan="2" align="right"><img src="./images/icon_2.jpg" alt=""></td>
                <th>便利快捷</th>
                <td  rowspan="2" align="right"><img src="./images/icon_3.jpg" alt=""></td>
                <th>安全支付</th>
                <td  rowspan="2" align="right"><img src="./images/icon_4.jpg" alt=""></td>
                <th>贴心服务</th>
            </tr>
            <tr>
                <td>产品全自主选择，随心买</td>
                <td>24小时不打烊，随时买</td>
                <td>知名支付工具，放心买</td>
                <td>贴心服务全年无休，安心买</td>
            </tr>
        </table>
        <table align="center" >
            <tr>
                <td style="font-size: small; color: darkgrey;">郑州升达经贸管理学院版权所有 2003-2025年</td>
            </tr>
        </table>
</body>
</html>

Dejavuuuuuu
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
[html网页制作]——南京旅游景点介绍网页代码html+css+javascript
qq_524614081的博客
12-22 687
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面
VX_WJ88950106的博客
04-18 1153
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
Web前端期末大作业--马尔代夫旅游网页设计（HTML+CSS+JavaScript+）实现_网页设计一日游马尔代夫代码
最新发布
2401_84438488的博客
04-29 491
【代码】Web前端期末大作业--马尔代夫旅游网页设计（HTML+CSS+JavaScript+）实现_网页设计一日游马尔代夫代码。
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
STU网页设计
01-06 1757
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
利用bootstrap编写的旅游网页
04-23
html，css , bootstrap，网页设计，有利于网页初学者参考，有很大的帮助
厦门旅游网的网页编写（只含HTML css文件）.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
前端旅游乐行js网页源码
03-12
本网页主要是用html5和javascript编写，用当前最流行的div+css布局。 二、注意事项 开发语言： JavaScript，无数据库
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
关于城市旅游的HTML网页设计-----北京
04-13
本网页特色-----有背景音乐、图片流动。采用HTML+CSS.介绍了北京城的旅游景点、美食推荐、古老文化、现代文明、文化精神
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
QQ____2709137139的博客
08-13 2766
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。...
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
html旅游旅行游记攻略网页源码
m0_37916936的博客
05-07 4481
html旅游旅行游记攻略网页源码
html、css旅游页面
05-16
好的，以下是一个简单的 HTML 和 CSS 代码示例，可以用于创建一个旅游页面： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>旅游页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>欢迎来到我们的旅游页面</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">目的地</a></li> <li><a href="#">行程安排</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section class="destination"> <h2>目的地</h2> <p>我们提供以下目的地：</p> <ul> <li>巴黎</li> <li>伦敦</li> <li>东京</li> <li>纽约</li> </ul> </section> <section class="itinerary"> <h2>行程安排</h2> <p>我们的行程安排如下：</p> <ul> <li>第一天：到达目的地，入住酒店</li> <li>第二天：早餐后参观景点</li> <li>第三天：自由活动</li> <li>第四天：离开目的地</li> </ul> </section> <section class="contact"> <h2>联系我们</h2> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br> <label for="message">留言：</label> <textarea id="message" name="message"></textarea><br> <input type="submit" value="提交"> </form> </section> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` CSS 代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav li a { color: #fff; text-decoration: none; } main { margin: 20px; } section { margin-bottom: 20px; } .destination ul { list-style: disc; } .itinerary ul { list-style: decimal; } form label { display: inline-block; width: 100px; } form input[type="text"], form input[type="email"], form textarea { width: 300px; margin-bottom: 10px; } form textarea { height: 100px; } input[type="submit"] { background-color: #333; color: #fff; border: none; padding: 10px; cursor: pointer; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` 这个代码示例包含一个页面标题，一个导航菜单，三个主要部分（目的地、行程安排和联系我们），以及一个页脚。你可以根据自己的需求和喜好进行修改和定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值