搜索

旅游网站案例


发布时间: 2022-11-24 18:48:00    浏览次数:49 次

分析:

  确定使用table来完成布局

  如果某一行只要一个单元格,则使用<tr><td></td></tr>

  如果某一行有多个单元格,则使用

   

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

 

实现旅游网站案例

 <!-- 采用table来完成布局-->
    <!-- 最外层的table,用于整个页面的布局-->
    <!-- 宽度:100,居中-->
    <table width="100%" align="center">
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 图片,宽度:100-->
                <img src="image/top_banner.jpg" width="100%">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 宽度:100,居中-->
                <table width="100%" align="center">
                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!-- 图片-->
                            <img src="image/logo.jpg">
                        </td>
                        <td> <!-- 表头单元格-->
                            <!-- 图片-->
                            <img src="image/search.png">
                        </td>
                        <td> <!-- 表头单元格-->
                            <!-- 图片-->
                            <img src="image/hotel_tel.png">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 宽度:100,居中-->
                <table width="100%" align="center">
                    <tr bgcolor="#ffd700" align="center" height="45"> <!-- 定义行,背景色,居中,高度: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>
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 图片,高度:100-->
                <img src="image/banner_3.jpg" width="100%">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 图片-->
                <img src="image/icon_5.jpg">
                大余精选
                <!-- 横线,颜色-->
                <hr color="#ffd700">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 居中,宽度:100-->
                <table align="center" width="95%">
                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_1.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!--图片 -->
                <img src="image/icon_6.jpg">
                国内游
                <hr color="#ffd700">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!-- 居中宽度:100-->
                <table align="center" width="95%">
                    <tr> <!-- 定义行-->
                        <td rowspan="2"><!-- 合并列-->
                            <!--图片 -->
                            <img src="image/guonei_1.jpgei_1.jpg">
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->

                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_2.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td>
                <img src="image/icon_7.jpg">
                境外游
                <hr color="#ffd700">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td>
                <table align="center" width="95%">
                    <tr> <!-- 定义行-->
                        <td rowspan="2"><!-- 合并列-->

                            <!--图片 -->
                            <img src="image/jiangwai_1.jpg">
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr> <!-- 定义行-->
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                        <td> <!-- 表头单元格-->
                            <!--图片 -->
                            <img src="image/jiangxuan_3.jpg">
                            <!--文字-->
                            <p>外星球三天体验卡</p>
                            <!-- 字体-->
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <td> <!-- 表头单元格-->
                <!--  图片,宽度:100 -->
                <img src="image/footer_service.png" width="100%">
            </td>
        </tr>
        <tr> <!-- 定义行-->
            <!-- 居中,黄色。高度:40-->
            <td align="center" bgcolor="yellow" height="40">
                <!-- 灰色,2字体-->
                <font color="gray" size="2">
                    江苏传智播客教育科技股份有限公司<br>
                    版权所有Copyright 2006-2018&copy@, All Rights Reserved 苏ICP备16007882
                </font>
            </td>
        </tr>
    </table>

 

免责声明 旅游网站案例,资源类别:文本, 浏览次数:49 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 06:48:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/yuzong/p/16810051.html