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

2021/6/26 14:26:52

编程Tag： 标签 html yen 自由 899 三亚 亲子 JavaWeb7.4 蜜月

本文主要是介绍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>


这篇关于JavaWeb7.4【HTML标签：综合案例】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程