HTML案例：旅游网站首页

最新推荐文章于 2024-04-07 14:50:50 发布
最新推荐文章于 2024-04-07 14:50:50 发布
阅读量6.4k 收藏 168
点赞数 20
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiyoo55/article/details/108372128
版权

案例：旅游网站首页

1.确定使用table来完成布局

2.如果某一行只有一个单元格，则使用

3.如果某一行有多个单元格

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

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>
    <!--采用table来完成布局-->
    <!--最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
    <!-- 第1行 -->
    <tr>
        <td>
        <img src="image/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>
    <!--第2行-->
    <tr>
       <td>
           <table width="100%" align="center">
               <tr>
                   <td>
                 <img src="image/logo.jpg" alt="">
                   </td>
                   <td>
                       <img src="image/search.png" alt="">
                   </td>
                   <td>
                       <img src="image/hotel_tel.png" alt="">
                   </td>
               </tr>
           </table>
       </td>
    </tr>
    <!-- 第3行-->
    <tr>
      <table width="100%" align="center">
        <tr bgcolor="#ffd700" align="center" height ="45" >
            <td>
               <a href=""> 首页 </a>

            </td>
            <td>
                门票
            </td>
            <td>
                酒店
            </td>
            <td>
                香港车票
            </td>
            <td>
                出境游
            </td>
            <td>
                国内游
            </td>
            <td>
                港澳游
            </td>
            <td>
                抱团定制
            </td>
            <td>
                全球自由行
            </td>
            <td>
                收藏排行榜
            </td>
        </tr>
      </table>
    </tr>
    <!-- 第4行 轮播图-->
    <tr>
     <td>
     <img src="image/banner_3.jpg" alt="" width="100%">
     </td>
    </tr>
    <!-- 第5行 老王精选-->
    <tr>
        <td>
            <img src="image/icon_5.jpg" alt="" >
            老王精选
            <hr color="#ffd700">
        </td>
    </tr>
    <!-- 第6行 -->
    <tr>
        <td>
        <table align="center" width="95%">
            <tr>
                <td>
         <img src="image/jiangxuan_1.jpg" alt="">
            <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
            <font color="red">&yen;899</font>
                </td>
                <td>
                    <img src="image/jiangxuan_1.jpg" alt="">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                    <font color="red">&yen;899</font>
                </td>
                <td>
                    <img src="image/jiangxuan_1.jpg" alt="">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                    <font color="red">&yen;899</font>
                </td>
                <td>
                    <img src="image/jiangxuan_1.jpg" alt="">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                    <font color="red">&yen;899</font>
                </td>
            </tr>
        </table>
        </td>
    </tr>
    <!-- 第7行 国内游-->
    <tr>
        <td>
            <img src="image/icon_6.jpg" alt="" >
            国内游
            <hr color="#ffd700">
        </td>
    </tr>
    <!-- 第8行 -->
    <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="" height="100%">
                        <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                        <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                    <td>
                        <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                        <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
                <tr>
                <td>
                    <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                    <font color="red">&yen;699</font>
                </td>
                <td>
                    <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                    <font color="red">&yen;699</font>
                </td>
                <td>
                    <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                    <p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
                 <font color="red">&yen;699</font>
                </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第9行 境外游-->
    <tr>
        <td>
            <img src="image/icon_7.jpg" alt="" >
            境外游
            <hr color="#ffd700">
        </td>
    </tr>
    <!-- 第10行 -->
    <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="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                    <td>
                       <img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                    <td>
                       <img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                       <img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                    <td>
                       <img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                    <td>
                       <img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天四晚自由行(春节+亲子+蜜月+自由行)</p>
<font color="red">&yen;699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第11行 -->
    <tr>
        <td>
         <img src="image/footer_service.png" alt="" width="100%">
        </td>
    </tr>
    <!-- 第12行 -->
    <tr >
     <table width="100%">
        <td>
            <tr bgcolor="#ffd700" align="center" height="45">
                <td>
            <font color="gray" size="2">
                 四川未央老王教育科技股份有限公司
                 版权所有Copyright 2006-2018&copy;, All Rights Reserved 川ICP备16007882
            </font>
                </td>
            </tr>
        </td>
     </table>
    </tr>

</table>
</body>
</html>

网页显示：
在这里插入图片描述

野生技术协会副会长
关注
  • 20
    点赞
  • 踩
  • 168
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)_旅游网站界面web代码(1)
2301_82243626的博客
04-28 1331
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
练习2：旅游网首页代码
Mmaoi的博客
07-22 1685
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="100%" align="center" > <!--第一行--> ...
67. Web前端网页制作 湖南凤凰古城旅游网页设计实例 大学生期末大作业 html+css+js
A240307的博客
04-07 1163
旅游主题响应式网站实例，应用html+css+js，包括DIV、图片轮翻效果、视频、会员登录、会员注册表单等，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
HTML如何制作公司网站首页（web前端期末大作业）
qq3200628753的博客
01-09 728
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
【HTML】HTML首页---拼多多首页界面-网易首页界面
coding加油站
08-20 4498
html网页设计作业，拼多多，网易，拼多多首页
HTML网站首页代码详细知识点
爱书不爱输的程序猿
01-12 5172
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>入门案例01</title> </head> <body> <!-- 表单表标签: action:提交的地址(我理解...
HTML CSS实现首页
qq_67519129的博客
06-13 1908
HTML CSS实现首页
基于Vue的简易旅游网站设计源码
04-05
本资源提供了一套基于Vue的简易旅游网站的设计源码，包含106个文件，其中包括40...这些文件详细展示了如何使用Vue、JavaScript、TypeScript、HTML和CSS构建一个简易的旅游网站，非常适合用于学习和参考Vue项目的开发。
城市旅游响应式网站html静态模板_html5响应式布局案例代码
12-04
城市旅游响应式网站html静态模板
JSP基于SSM旅游景点预订html5网站源码案例设计.zip
04-20
JSP基于SSM旅游景点预订html5网站源码案例设计.zip
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
JSP基于SSM旅游景点预订html5网站可升级SpringBoot源码案例设计.zip
04-19
源码设计，具体请到资源详情查看使用前必读
JSP基于SSM旅游景点预订html5网站可升级SpringBoot毕业源码案例设计.zip
02-14
html5开发
axure网站原型旅游主题设计.zip
12-18
axure网站原型旅游主题设计html，包含首页、登录、忘记密码与找回、旅游线路详情页等页面，网站结构丰富，布局非常好，属较高保真原型设计，仅供大家参考使用，rp文件需要自行寻找。
HTML制作百度首页
热门推荐
eggplant_的博客
09-26 1万+
制作百度首页时候，除了要用到div进行分块，还需要对快的位置进行控制，一般有 对div进行规范大小width，height分别对应宽度高度 margin：有对div进行定位有margin-top,margin-left,margin-right,margin-buttom float-left:吧div元素进行从左到右排列 了解这些简单的操作之后，就可以自己动手做出一个简单百度页面了，例如...
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
网页设计与制作 | HTML+CSS+JS
01-08 1069
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
旅游网站首页——html
weixin_45849948的博客
04-26 1万+
旅游网站首页 使用利用当前所学html来制作一个静态的旅游网站首页 确定使用table来完成布局 如果某一行只有一个单元格，则使用 如果某一行有多个单元格，则使用 程序代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑马...
项目案例：融合工厂企业官网
最新发布
06-13
这个案例通常包括以下几个关键要素： 1. **响应式设计**：官网采用适应不同设备的响应式设计，确保在桌面电脑、平板和移动设备上都能提供良好的用户体验。 2. **产品展示**：通过高清图片、视频和详细描述，全方位...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值