zoukankan      html  css  js  c++  java
  • 如何使用table布局静态网页

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>hope旅游网</title>
    </head>
    <body>
    <table width="100%" cellpadding="0" cellspacing="0" align="center">
    <!--第一行-->
    <tr>
    <td>
    <img src="image/top_banner.jpg" alt="" width="100%">
    </td>
    </tr>

    <!--第二行-->
    <tr>
    <td>
    <table width="100%" align="center">
    <tr>
    <td>
    <img src="image/logo.jpg" alt="logo">
    </td>
    <td>
    <img src="image/search.png" alt="查询">
    </td>
    <td>
    <img src="image/hotel_tel.png" alt="联系方式">
    </td>
    </tr>
    </table>
    </td>
    </tr>

    <!--第三行-->
    <tr>
    <td>
    <table width="100%" align="center" >
    <tr bgcolor="orange" align="center" height="35">
    <td >
    <a href="https://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_1.jpg" alt="轮播图" width="100%">
    </td>
    </tr>

    <!--第五行-->
    <tr>
    <td>
    <img src="image/icon_5.jpg" alt="" align="left">
    黑马精选
    <hr color="orange">
    </td>
    </tr>

    <!--第六行-->
    <tr>
    <td>
    <table width="95%" align="center">
    <tr>
    <td>
    <img src="image/jiangxuan_1.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;899</font>
    </td>
    <td>
    <img src="image/jiangxuan_1.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;899</font>
    </td>
    <td>
    <img src="image/jiangxuan_1.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;899</font>
    </td>
    <td>
    <img src="image/jiangxuan_1.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;899</font>
    </td>
    </tr>
    </table>
    </td>
    </tr>

    <!--第七行-->
    <tr>
    <td>
    <img src="image/icon_6.jpg" alt="" align="left">
    国内游
    <hr color="orange">
    </td>
    </tr>

    <!--第八行-->
    <tr>
    <td>
    <table width="95%" align="center">
    <tr>
    <td rowspan="2">
    <img src="image/guonei_1.jpg" alt="">
    </td>
    <td>
    <img src="image/jiangxuan_2.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;899</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>

    <!--第九行-->
    <tr>
    <td>
    <img src="image/icon_7.jpg" alt="" >
    境外游
    <hr color="orange">
    </td>
    </tr>

    <!--第十行-->
    <tr>
    <td>
    <table width="95%" align="center">
    <tr>
    <td rowspan="2">
    <img src="image/jiangwai_1.jpg" alt="">
    </td>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    </tr>
    <tr>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    <td>
    <img src="image/jiangxuan_3.jpg" alt="">
    <p>
    上海飞三亚五天4夜自由行
    </p>
    <font color="red">&yen;1099</font>
    </td>
    </tr>
    </table>
    </td>
    </tr>

    <!--第十一行-->
    <tr>
    <td>
    <img src="image/footer_service.png" alt="" width="100%">
    </td>
    </tr>


    <!--第十二行-->
    <tr >
    <td align="center" bgcolor="orange" height="10px">
    <font color="gray" size="2" >
    江苏衡谱检测有限公司 版权所有Copyright 2006-2019
    &copy; All Rights Reserved 苏ICP备16007882
    </font>
    </td>
    </tr>


    </table>
    </body>
    </html>
  • 相关阅读:
    理解FreeRTOS的任务状态机制
    stm32【按键处理:单击、连击、长按】
    stm32f4单片机 硬件浮点运算
    stm32 HAL库 串口无法接收数据的问题
    Single Sign On —— 简介(转)
    关于第三方库安装时很慢或者读取超时问题处理
    设计模式》状态机模式
    设计模式》责任链模式
    设计模式》访问者模式
    设计模式》策略者模式
  • 原文地址:https://www.cnblogs.com/newcityboy/p/11373842.html
Copyright © 2011-2022 走看看