HTML标签综合案例分析与实现

1. 确定使用table来完成布局
2. 如果某一行只有一个单元格，则使用<tr><td></td></tr>
3. 如果某一行有多个单元格，则使用
　　<tr>
　　　　<td>
　　　　　　<table></table>
　　　　</td>
　　</tr>

4. 代码实现

复制代码
<!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>
            <td>
                <table width="100%" align="center">
                    <tr bgcolor="#ffebcd" 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>
            </td>
        </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>

        <!--第六行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>

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

                        <td>

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

                        <td>

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

                        <td>

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

        <!--第七行 国内游-->
        <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/jingxuan_2.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>

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

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

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

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

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

                        <td>

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

                        <td>

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

                    <tr>
                        <td>

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

                        <td>

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

                        <td>

                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</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>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                    江苏传智播客教育科技股份有限公司
                    版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
                </font>
            </td>
        </tr>
    </table>
</body>
</html>
复制代码

 

posted @   夫君  阅读(40)  评论(0)  编辑  收藏  举报
相关博文：
· HTML语义化标签和表格标签
· HTML标签案例注册页面
· HTML标签_综合案例_分析与HTML标签_综合案例_实现
· HTML标签综合案例的分析与实践
· HTML_旅游网站首页和实现HTML_旅游网站首页
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示