JavaWeb7.4【HTML标签:综合案例】

JavaWeb7.4【HTML标签:综合案例】

 

 

  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 width="100%", align="center"><!--最外层table,用于页面布局-->
        <!--第1行-->
        <tr>
            <td><img src="../image/top_banner.jpg", width="100%"></td>
        </tr>

        <!--第2行-->
        <tr>
            <td>
                <table width="100%", align="center"><!--内层嵌套table1-->
                    <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><!--内层嵌套table1/-->
            </td>
        </tr>

        <!--第3行-->
        <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>

        <!--第4行-->
        <tr>
            <td><img src="../image/banner_3.jpg", width="100%"></td>
        </tr>

        <!--第5行-->
        <tr>
            <td>
                <img src="../image/icon_5.jpg">
                黑马精选
                <hr color="#ffd700">
            </td>
        </tr>

        <!--第6行-->
        <tr>
            <td>
                <table align="center", width="95%">
                    <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>
            </td>
        </tr>

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

        <!--第8行-->
        <tr>
            <td>
                <table align="center", width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="../image/guonei_1.jpg">
                        </td>
                        <td>
                            <img src="../image/jiangxuan_2.jpg", width="100%">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="../image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="../image/jiangxuan_2.jpg">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>

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

        <!--第9行-->
        <tr>
            <td>
                <img src="../image/icon_7.jpg">
                *游
                <hr color="#ffd700">
            </td>
        </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", width="100%">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="../image/jiangxuan_3.jpg">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="../image/jiangxuan_3.jpg">
                            <p>上海飞三亚五天4晚*行(春节销售+亲子+蜜月+*行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>

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

        <!--第11行-->
        <tr>
            <td><img src="../image/footer_service.png", width="100%"></td>
        </tr>
        
        <!--第12行-->
        <tr>
            <td align="center", bgcolor="yellow">
                <footer>
                    <font color="#808080", size="2">
                        <center>
                            江苏&nbsp;&nbsp;&nbsp;传智播客教育科技股份有限公司版权所有<br/>
                            Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
                        </center>
                    </font>
                </footer>
            </td>
        </tr>
    </table><!--最外层table,用于页面布局/-->

</body>
</html>
上一篇:设计模式(二十二)—— 策略模式(定义、案例分析、特点、缺点)


下一篇:Bootstrap