HTML 练习案例旅游网站首页

最新推荐文章于 2022-07-29 00:03:12 发布
最新推荐文章于 2022-07-29 00:03:12 发布
阅读量393 收藏 2
点赞数
分类专栏： Web前端技术 文章标签： html 旅游 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46441425/article/details/122833302
版权
这是一个使用HTML表格进行网页布局的示例。布局包括顶部横幅、logo、搜索框、导航菜单、轮播图、精选产品展示和底部服务信息。网页内容通过表格嵌套实现不同行和列的组合，展示了如何利用HTML表格进行复杂页面结构的设计。
摘要由CSDN通过智能技术生成

1、确定使用table来完成布局
2、如果某一行只有一个单元格，则使用<tr><td></td><tr>
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">
        <!-- 第一行 -->
        <tr>
            <td>
                <img src="picture/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>

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

        <!-- 第三行 -->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr bgcolor="yellow" 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="picture/banner_3.jpg" width="100%" alt="">
            </td>
        </tr>

        <!-- 第五行-->
        <tr>
            <td>
                <img src="picture/icon_5.jpg" alt="">
                黑马精选
                <hr color="yellow">
            </td>
        </tr>

        <!-- 第六行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr width="100%">
                        <td>
                            <img src="picture/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_4.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 第七行 -->
        <tr>
            <td>
                <img src="picture/icon_6.jpg" alt="">
                国内游
                <hr color="yellow">
            </td>
        </tr>

        <!-- 第八行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr width="100%">
                        <td rowspan="2">
                            <img src="picture/guonei_1.jpg" alt="">
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                    <tr width="100%">
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td>
                <img src="picture/icon_7.jpg" alt="">
                境外游
                <hr color="yellow">
            </td>
        </tr>

        <!-- 第十行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr width="100%">
                        <td rowspan="2">
                            <img src="picture/jiangwai_1.jpg" alt="">
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                    <tr width="100%">
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="picture/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚5天四晚自由行（春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 第十一行 -->
        <tr>
            <td>
                <img src="picture/footer_service.png" alt="">
            </td>
        </tr>
        <!-- 第12行 -->
        <tr>
            <td>
               <center>
                    <font color="gray" size="2"> 黑马程序员bilibili &copy;</font>
               </center>
            </td>
        </tr>
    </table>
</body>
</html>

图片来源
链接：https://pan.baidu.com/s/1jM_tPKBCPK2TS9jmkWC7Nw
提取码：1234

稻田里展望者
关注
专栏目录
HTML案例练习--某旅游网站首页
wushaoji321的博客
07-22 918
1. 确定使用table来完成布局 2. 如果某一行只有一个单元格，则使用<tr><td></td></tr> 3. 如果某一行有多个单元格，则使用 <tr> <td> <table></table> </td> </tr> 4. 代码实现 <!DOCTYPE html> <html lang="en"> <head>
HTML5 旅游网站制作
2301_76916026的博客
06-25 541
<strong><font color="#009933">12月</font></strong></ins>热带海洋气候，全年适合旅游。伊露岛沙滩屋构造独特，彻底的南亚风情。雪白的圆形房子，尖尖的茅草屋顶，木制的框 <ins><strong><font color="#f90">......[详情]</font></strong>说
html旅游网站
04-16
一个旅游网站，html，包含登陆注册页面，购物车页面。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript
HTML网页设计
07-29 4万+
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的...
旅游网站首页——html
weixin_45849948的博客
04-26 1万+
旅游网站首页 使用利用当前所学html来制作一个静态的旅游网站首页 确定使用table来完成布局 如果某一行只有一个单元格，则使用 如果某一行有多个单元格，则使用 程序代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑马...
HTML案例：旅游网站首页
weiyoo55的博客
09-02 6656
案例：旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格，则使用 3.如果某一行有多个单元格 <tr> ​ <td> ​ <table> </table> ​ </td> </tr> 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
旅游网站 html
04-13
国外著名旅游景点介绍网站静态模板
html简单练习-旅游网
03-21
自学的html使用table做的一个静态网页，再次做个笔记便于记忆。
JSP基于SSM旅游景点预订html5网站毕业源码案例设计.zip
最新发布
02-23
【标题】中的“JSP基于SSM旅游景点预订html5网站毕业源码案例设计”表明这是一个使用JavaServer Pages（JSP）技术，并结合Spring、SpringMVC和MyBatis（SSM框架）开发的旅游景点预订网站项目。这个项目可能是为毕业...
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
07-10
此外，CSS3还支持媒体查询（Media Queries），实现了响应式设计，让网站能够适应不同设备的屏幕尺寸。 **Flex布局**： Flex布局（Flexible Box Layout）是一种用于定义容器内子元素的布局方式，尤其适用于单行或...
旅游首页HTML
06-13
旅游首页静态页面，展示旅游，有滑动图片，展示图片导航等等。
html_旅游网站
06-15
html5_旅游网站，带有代码！
旅游的HTML语言,html旅游网站
weixin_35262602的博客
06-04 353
【实例简介】一个旅游网站，html，包含登陆注册页面，购物车页面。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。【实例截图】【核心代码】ceet2016-tulexinglvyouwang-master└── tulexinglvyouwang├── cart.html├── css│ ├── jquery-ui-1.10.4.custom.min.css│ ├── jqz...
基于html的旅游网站
04-17
用一个主页和两个子页构成整个网站，主要采用css的布局，再加上一些表格使的页面看上去更加美观。在主页也简单介绍一下我的家乡--江川，两个子页则详细介绍旅游景点和地方特产。
html开发完整实例旅游网站
11-04
这是我上学的时候写的html+css开发完整的实例对于刚上手的可以参考一下
HTML5+CSS3旅游资源网源代码
06-12
本资源包包含了一个可运行的旅游资源网的源代码，它充分利用了HTML5的新特性以及CSS3的高级样式设计，是学习这两门技术的优秀实践案例。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它的...
练习2：旅游网首页代码
Mmaoi的博客
07-22 1727
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="100%" align="center" > <!--第一行--> ...
html旅游网站.zip
08-08
html旅游网站.zip
Html+css 旅游网站
08-03
静态 Html css 旅游网站
HTML实现简易旅行网站主页
热门推荐
weixin_44850537的博客
09-25 4万+
我在顶着上课的厌恶之情，终于认真的听了网页课，以下是我做的第一个简易网页，希望这个过程能被我记录下来。 下面是这个小网页的成品： 过程如下： 1： 准备工具：一个文件夹，vscode(或者DW，实在没有记事本都行)，准备图片，图片必须跟项目在同一个文件夹。 2： 创建一个HTML的文件夹，把图片和文本文件都放到该文件夹里面。 3： 写出相应的代码块。 1. <div style="h...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

稻田里展望者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值