旅游网站首页——html

最新推荐文章于 2024-03-10 14:16:26 发布
最新推荐文章于 2024-03-10 14:16:26 发布
阅读量1.4w 收藏 259
点赞数 30
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45849948/article/details/105774203
版权

旅游网站首页

使用利用当前所学html来制作一个静态的旅游网站首页

  1. 确定使用table来完成布局
  2. 如果某一行只有一个单元格，则使用
  3. 如果某一行有多个单元格，则使用
程序代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>黑马旅游网</title>
</head>

<body>

<!-- 采用table来完成布局 -->
<!-- 最外层table，用于整个页面的布局 -->
<table width="100%" align="center">
    <!-- 第一行 -->
    <tr>
        <td>
            <img src="image/top_banner.jpg" width="100%" align="">
        </td>
    </tr>

    <!-- 第二行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="image/logo.jpg" align="">
                    </td>
                    <td>
                        <img src="image/search.png" align="">
                    </td>
                    <td>
                        <img src="image/hotel_tel.png" align="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第三行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height = "45">
                    <td>
                        <a href="">首页</a>
                    </td>

                    <td>
                        <a href="">门票</a>
                    </td>

                    <td>
                        <a href="">酒店</a>
                    </td>

                    <td>
                        <a href="">香港车票</a>
                    </td>

                    <td>
                        <a href="">出境游</a>
                    </td>

                    <td>
                        <a href="">国内游</a>
                    </td>

                    <td>
                        <a href="">港澳游</a>
                    </td>

                    <td>
                        <a href="">抱团定制</a>
                    </td>

                    <td>
                        <a href="">全球自由行</a>
                    </td>

                    <td>
                        <a href="">收藏排行榜</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第四行 -->
    <tr>
        <td>
            <img src="image/banner_3.jpg" align="" width="100%">
        </td>
    </tr>

    <!-- 第五行 黑马精选-->
    <tr>
        <td>
            <img src="image/icon_5.jpg" align="">
            黑马精选
            <hr color="#ffd700"/>
        </td>
    </tr>

    <!-- 第六行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_1.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 899</font>
                    </td>

                </tr>
            </table>
        </td>
    </tr>

    <!-- 第七行 国内游-->
    <tr>
        <td>
            <img src="image/icon_6.jpg" align="">
            国内游
            <hr color="#ffd700"/>
        </td>
    </tr>

    <!-- 第八行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" alt="">
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                </tr>

                <tr>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>


                </tr>
            </table>
        </td>
    </tr>

    <!-- 第九行 境外游-->
    <tr>
        <td>
            <img src="image/icon_7.jpg" align="">
            境外游
            <hr color="#ffd700"/>
        </td>
    </tr>

    <!-- 第十行 -->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/jiangwai_1.jpg" alt="">
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                </tr>

                <tr>
                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>

                    <td>
                        <img src="image/jiangxuan_3.jpg" alt="">
                        <p>上海飞三亚五天4晚自由行(春节销售+亲<br>子+蜜月+自由行)</p>
                        <font color="red">&yen; 699</font>
                    </td>


                </tr>
            </table>
        </td>
    </tr>

    <!-- 第十一行 -->
    <tr>
        <td>
            <img src="image/footer_service.png" align="" width="100%">
        </td>
    </tr>

    <!-- 第十二行 -->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                江苏传智播客教育科技股份有限公司
                版权所有Copyright 2006-2020&copy;, All Rights Reserve 苏ICP备16007882
            </font>
        </td>
    </tr>

</table>

</body>

</html>
图片信息就不上传了，都是一些截屏
运行结果

在这里插入图片描述

凌虚95
关注
  • 30
    点赞
  • 踩
  • 259
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
旅游网站 html
04-13
国外著名旅游景点介绍网站静态模板
使用html制作一个旅游网站
qq_46274901的博客
01-14 1万+
代码实现： <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旅游网站</title>
基于的旅游网站的设计与开发(源码+开题)
最新发布
杰简程序毕设
03-10 990
其次，旅游网站的建设有助于推动旅游产业的数字化转型，促进旅游行业与信息技术的深度融合，提升旅游产业的创新能力和可持续发展水平。具体而言，我们将通过深入分析旅游市场的现状和发展趋势，结合旅游者的实际需求和行为特点，设计并实现一个集景点信息展示、特产推荐、门票预订、游记分享等功能于一体的旅游网站。通过该网站的建设和运营，我们旨在提升旅游服务的智能化、个性化水平，增强旅游者的参与感和满意度，同时推动旅游产业的数字化转型和可持续发展。五是如何促进用户之间的互动和交流，提升网站的社区氛围和用户粘性。
简单旅游景点HTML网页设计作品 DIV布局故宫介绍网页模板代码 DW家乡网站制作成品 web网页制作与实现
有问必答，欢迎打扰，项目开发，网页设计
10-02 886
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML案例：旅游网站首页
weiyoo55的博客
09-02 6411
案例：旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格，则使用 3.如果某一行有多个单元格 <tr> ​ <td> ​ <table> </table> ​ </td> </tr> 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面
网页设计与制作
01-06 1342
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
网页设计与制作 | HTML+CSS+JS
01-12 1万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-29 3万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
一个比较使用的旅游网页,漂亮的html+css网站模板、网页设计源码
12-25
DIV+CSS搭好框架，JS写好输入框事件。内附有字体和图片,现在下的人比较多积分自动增加了，有需要的可以下载。1
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
JavaWeb旅游网站——BootStrap响应式布局.rar
04-16
JavaWeb旅游网站——BootStrap响应式布局 环境： mysql 8.0 jdk 1.8 tomcat 9 redis 2.9.8 主要功能：用户登录、用户注册、修改密码、旅游路线搜索、旅游线路收藏、线路收藏排行榜
网页设计大作业——旅游网站，html、css实现.zip
12-31
HTML、CSS、JS、Vue代码：我提供了完整的网页源代码，详细简单有效 项目文件：除了代码，我还分享了整个项目的文件，包括设计稿、图标、图片等资源。这些资源对于理解项目背景和设计思路至关重要。 MD文档与操作手册...
dreamweaver作业静态HTML网页设计——家乡海南旅游网站
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
html旅游旅行游记攻略网页源码
m0_37916936的博客
05-07 2773
html旅游旅行游记攻略网页源码
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
HTML——简单的网站首页
smallAchelous的博客
04-07 3万+
学习记录帖（一） 简单的网站首页 这是我的一个记录帖，我是按照黑马程序员的视频学习的。 使用的是HBuilder，学习了html & css & js & jq & bootstrap。 成果 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
HTML——制作一个图片列表
06-10
你可以使用 HTML 的 `<ul>` 和 `<li>` 标签来制作一个图片列表，下面是一个示例代码： ```html <ul> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> </ul> ``` 其中，`<ul>` 标签表示无序列表，`<li>` 标签表示列表中的每一项，`<img>` 标签用于插入图片，`src` 属性指定图片的 URL，`alt` 属性用于指定图片的替代文本（当图片无法加载时将显示该文本）。你可以根据需要修改图片的 URL 和替代文本。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值