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

HTML标签_综合案例_分析

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

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

HTML标签_综合案例_实现

 

效果图

 

 完整HTML代码

复制代码
<!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="image/top_banner.jpg"width="100%" alt="" >
        </td>
    </tr>
    <!--第二行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="image/logo.jpg" alt="">

                    </td>
                    
                    <td>
                        <img src="image/search.png"alt="" align="center">
                    </td>
                    
                    <td>
                        <img src="image/hotel_tel.png">
                    </td>
                </tr>
            </table>
               
        </td>
    </tr>
    <!--第三行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height="45">
                    <td>
                        <a href="http://www.baidu.com">首页</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>
           <img src="image/banner_3.jpg" width="100%">
       </td>
   </tr>
    <!--第五行-->
    <tr>
        <td>
            <img src="image/icon_5.jpg">
            黑马精选
            <hr color="yellow">
        </td>
    </tr>
    <!--第6行-->
   <tr>
       <ta>
           <table width="95%" align="center">
               <tr>
                   <td>
                       <img src="image/jiangxuan_1.jpg">
                       <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                       <font color="red">&yen;899</font>
                   </td>
                   <td>
                       <img src="image/jiangxuan_1.jpg">
                       <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                       <font color="red">&yen;899</font>
                   </td>
                   <td>
                       <img src="image/jiangxuan_1.jpg">
                       <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                       <font color="red">&yen;899</font>
                   </td>
                   <td>
                       <img src="image/jiangxuan_1.jpg">
                       <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                       <font color="red">&yen;899</font>
                   </td>
               </tr>
           </table>
       </ta>
   </tr>
    <!--国内游-->
    <tr>
        <td>
            <img src="image/icon_6.jpg">
            国内游
            <hr color="yellow" >
        </td>
    </tr>
    <!--第八行-->
    <tr>
        <td>
            <table align="center" width="95%">
                <tr>
                    <td rowspan="2">
                        <img src="image/guonei_1.jpg" alt="">
                    </td>

                    <td>

                        <img src="image/jiangxuan_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>
        <ta>
            <img src="image/icon_7.jpg">
            境外游
            <hr color="yellow" >
        </ta>
    </tr>
    <!--第10行-->
    <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" 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 >
            <table align="center" bgcolor="#ffd700"  height="100%" bgcolor="#ffd700" size="2">
               <tr>
                   <td>
                       江苏传智播客教育科技股份有限公司
                       版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
                   </td>
               </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>
复制代码

 

 

 

 

江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
posted @   zj勇敢飞，xx永相随  阅读(25)  评论(0)  编辑  收藏  举报
相关博文：
· Bootstrap_插件_轮播图与案例_黑马旅游网_分析
· HTML标签_表格标签1与HTML标签_表格标签2
· HTML标签综合案例分析与实现
· HTML标签综合案例的分析与实践
· HTML标签_综合案例_分析和HTML标签_综合案例_实现
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示