0
点赞
收藏
分享

微信扫一扫

HTML 练习案例旅游网站首页

灵魂跑者 2022-02-09 阅读 58

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

举报

相关推荐

0 条评论