HTML标签_综合案例_分析和HTML标签_综合案例_实现

HTML标签_综合案例_分析:

案例:旅游网站首页

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

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

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

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

 

 

 

 

 

HTML标签_综合案例_实现:

<!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="../img/tope.jpg" width="100%">
        </td>
    </tr>

    <!--第2行-->
    <tr>
        <td>
            <table width="100%" align="center"><!--嵌套表格-->
                <tr align="center"><!--align:对齐方式-->
                    <td>
                        <img src="../img/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="../img/search.png" alt="">
                    </td>
                    <td>
                        <img src="../img/hotel.png" alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第3行-->
    <tr>
        <td>
            <table width="100%" align="center"><!--嵌套表格-->
                <tr bgcolor="#ffd700" align="center" height="45"><!--bgcolor:颜色  align:对齐方式 height:高度-->
                    <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="../img/banner.jpg" alt="" width="100%">
        </td>
    </tr>

    <!--第6行-->
    <tr>
        <td>
            <img src="../img/icon.jpg" alt="" >
            伟明精选
            <hr color="ffd700" >
        </td>
    </tr>

    <!-- 第6行-->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td>
                        <img src="../img/jianxuan.jpg">
                        <p>郭伟明婚房</p>
                        <font color="red">&yen;899</font>
                    </td>

                    <td>
                        <img src="../img/jianxuan.jpg">
                        <p>郭伟明婚房</p>
                        <font color="red">&yen;899</font>
                    </td>

                    <td>
                        <img src="../img/jianxuan.jpg">
                        <p>郭伟明婚房</p>
                        <font color="red">&yen;899</font>
                    </td>

                    <td>
                        <img src="../img/jianxuan.jpg">
                        <p>郭伟明婚房</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第7行-->
    <tr>
        <td>
            <img src="../img/iconk.jpg" alt="">
            国内游
            <hr color="ffd700">
        </td>
    </tr>

    <!--第8行-->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="../img/guone.jpg" alt="" width="95%">
                    </td>

                    <td>
                        <img src="../img/jian.jpg" height="100%">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/jian.jpg">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/jian.jpg">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="../img/jian.jpg">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/jian.jpg">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/jian.jpg">
                        <p>郭伟明三亚之旅</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第9行-->
    <tr>
        <td>
            <img src="../img/iconm.jpg">
            境外游
            <hr color="ffd700">
        </td>
    </tr>

    <!--第10行-->
    <tr>
        <td>
            <table width="95%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="../img/jiang.jpg" width="100%">
                    </td>

                    <td>
                        <img src="../img/xuan.jpg" height="100%">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/xuan.jpg">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/xuan.jpg">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="../img/xuan.jpg">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td>
                        <img src="../img/xuan.jpg">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>

                    <td rowspan="2">
                        <img src="../img/xuan.jpg">
                        <p>郭伟明好宅</p>
                        <font color="red">&yen;699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!--第11行-->
    <tr>
        <td>
            <img src="../img/service.jpg" width="100%">
        </td>
    </tr>

    <!--第12行-->
    <tr>
        <td bgcolor="#ffd700" align="center" height="40">
            <font color="gray">
                四川未央老王教育科技股份有限公司
                版权所有Copyright 2006-2018&copy;, All Rights Reserved 川ICP备16007882
            </font>
        </td>
    </tr>

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

输出结果:

 

 

 

posted @ 2022-10-27 11:38  冰灵IT  阅读(30)  评论(0)    收藏  举报