580综合HTML练习
综合HTML练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网址案例</title> </head> <body> <!--采用table完成布局--> <!--最外层的table,用于整个页面的布局--> <!--沾满100% 居中--> <table width="100%" align="center"> <!--第一行--> <tr> <td> <!-- 指定图片路径 沾满100%--> <img src="img/top_banner.jpg" width="100%"> </td> </tr> <!--第二行--> <tr> <td> <!--部分1--> <!--沾满100% 居中--> <table width="100%" align="center"> <tr> <td><!--指定的图片路径--> <img src="img/logo.jpg"> </td> <td><!--指定的图片路径--> <img src="img/search.png"> </td> <td><!--指定的图片路径--> <img src="img/hotel_tel.png"> </td> </tr> </table> </td> </tr> <!--第三行--> <tr> <td><!--沾满100% 居中--> <table width="100%" align="center"> <!--更改颜色 居中 大小间距--> <tr bgcolor="ffd700" 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> <!--第四行--> <tr> <td><!--指定图片路径 沾满100% 居中 --> <img src="img/banner_3.jpg" alt="" width="100%" align="center"> </td> </tr> <!--第五行--> <tr> <td><!--指定图片路径 居中 --> <img src="img/icon_5.jpg" alt="" align="center"> 来了老弟 <!--更改颜色--> <hr color="#ffd700"> </td> </tr> <!--第六行--> <tr> <td> <!--居中 沾满100% --> <table align="center" width="100%" > <tr> <td><!--指定图片路径--> <img src="img/jiangxuan_1.jpg"> <p>来了老弟这是上海到三亚站票</p> <!--添加颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径--> <img src="img/jiangxuan_1.jpg"> <p>来了老弟这是上海到三亚站票</p> <!--添加颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径--> <img src="img/jiangxuan_1.jpg"> <p>来了老弟这是上海到三亚站票</p> <!--添加颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径--> <img src="img/jiangxuan_1.jpg"> <p>来了老弟这是上海到三亚站票</p> <!--添加颜色--> <font color="red">¥9999</font> </td> </tr> </table> </td> </tr> <!--第七行--> <tr> <td><!--指定图片路径 居中 --> <img src="img/icon_6.jpg" alt="" align="center"> 你嘎还想去旅游有钞票嘛？ <!--添加颜色--> <hr color="#ffd700"> </td> </tr> <!--第八行--> <tr> <td><!--居中 沾满100% --> <table align="center" width="100%" > <tr><!--合并2格--> <td rowspan="2"> <img src="img/guonei_1.jpg"> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> </tr> <tr> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_2.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> </tr> </table> </td> </tr> <!--第九行--> <tr> <td><!--指定图片路径 居中 --> <img src="img/icon_7.jpg" alt="" align="center"> 罗生门给予你重生的机会？ <!--更改字体颜色--> <hr color="#ffd700"> </td> </tr> <!--第十行--> <tr> <td><!--居中 沾满100% --> <table align="center" width="100%" > <tr><!--合并2格--> <td rowspan="2"> <!--指定路径--> <img src="img/jiangwai_1.jpg"> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> </tr> <tr> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> <td><!--指定图片路径 沾满100% --> <img src="img/jiangxuan_3.jpg" height="100%"> <p>来了老弟这是上海到三亚站票</p> <!--更改字体颜色--> <font color="red">¥9999</font> </td> </tr> </table> </td> </tr> <!--第11行--> <tr> <td><!--指定图片路径 沾满100% --> <img src="img/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©, All Rights Reserved 苏ICP备16007882 </font> </td> </tr> </table> </body> </html>
浙公网安备 33010602011771号