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>
  • 相关阅读:
    汇编中寄存器及其用处
    直接打印则需要调用PrintDocumnt.Print()方可打印,否按在对话框中点【打印】但不会有反应
    操作另一窗体的变量事件
    System.Windows.Forms.ListControl.SelectedValue.get 返回 null
    combox的selectedValue初始值注意事项
    vs2017中EF6.4无法导入到PM中,应使用EF6.2或6.1.1
    去除 Datetime的字段会自动赋默认值0001-1-1 0:00:00
    EF使用问题备忘
    EF中自定义连接字符串
    C#如何改变DataTable中的数据?
  • 原文地址:https://www.cnblogs.com/newcityboy/p/11373842.html
Copyright © 2011-2022 走看看