旅游网站HTML

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>旅游网</title>
</head>
<body>



<!--采用table编辑-->
<!--最晚曾table,用于整个页面那布局-->
      <table width="100%" align="center">
        <!--第一行-->
        <tr>
            <td>
                  <img src="../image/image1/top_banner.jpg" width="100% " alt="">
            </td>
        </tr>


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


        <!--第三行-->
        <tr>
          <td>
              <table width="100%" align="center">
                  <tr bgcolor="#ffd700" 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>
                  </tr>
              </table>
          </td>
        </tr>

        <!--第四行 轮播图-->
        <tr>
          <td>
            <img src="../image/image1/banner_3.jpg" alt="" width="100%"/>
          </td>
        </tr>

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

        <!--第6行-->
        <tr>
              <td>
                <table width="95%" align="center">
                    <tr>
                      <td>
                        <img src="../image/image1/jiangxuan_1.jpg" alt=""/>
                        <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                      </td> <td>
                        <img src="../image/image1/jiangxuan_2.jpg" alt=""/>
                        <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                      </td> <td>
                        <img src="../image/image1/jiangxuan_3.jpg" alt=""/>
                        <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                      </td> <td>
                        <img src="../image/image1/jiangxuan_4.jpg" alt=""/>
                        <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                        <font color="red">&yen;899</font>
                      </td>
                    </tr>
                </table>
              </td>
        </tr>


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

        <!--第8行-->
        <tr>
          <td>
            <table width="95%" align="center">
              <tr>
                <td rowspan="2">
                  <img src="../image/image1/guonei_1.jpg" alt=""/>
                </td> <td>
                <img src="../image/image1/jiangxuan_2.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
                </td> <td>
                <img src="../image/image1/jiangxuan_3.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
                </td> <td>
                <img src="../image/image1/jiangxuan_4.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
                </td>
              </tr>
              <tr>
                <td>
                <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
                </td><td>
                <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;699</font>
                </td><td>
                <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;699</font>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!--第9行-->
        <tr>
          <td>
            <img src="../image/image1/icon_7.jpg" alt=""/>
            境外游
            <hr color="#ffd700">
          </td>
        </tr>

        <!--第10行-->

        <!--第8行-->
        <tr>
          <td>
            <table width="95%" align="center">
              <tr>
                <td rowspan="2">
                  <img src="../image/image1/jiangwai_1.jpg" alt=""/>
                </td> <td>
                <img src="../image/image1/jiangxuan_2.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
              </td> <td>
                <img src="../image/image1/jiangxuan_3.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
              </td> <td>
                <img src="../image/image1/jiangxuan_4.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;899</font>
              </td>
              </tr>
              <tr>
                <td>
                  <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                  <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                  <font color="red">&yen;899</font>
                </td><td>
                <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;699</font>
              </td><td>
                <img src="../image/image1/jiangxuan_5.jpg" alt=""/>
                <p>上海飞三亚五天四晚自由行(春节销售+亲自+蜜月+自由行)</p>
                <font color="red">&yen;699</font>
              </td>
              </tr>
            </table>
          </td>
        </tr>


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

          </td>
        </tr>


        <!--第12行-->
        <tr>
          <td align="center" bgcolor="#ffd700" height="40">

            <font color="gray" size="2">江苏&nbsp;传智播客教育科技股份有限公司<br>
          版权所有Copyright &copy;2006-2018, All Rights Reserved 苏ICP备16007882
             <font/>

          </td>
        </tr>

</body>
</html>

最终效果

相关推荐
DoraBigHead7 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住11 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
Trust yourself24320 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统31 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead1 小时前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
荔枝hu1 小时前
springboot生成pdf方案之dot/html/图片转pdf三种方式
spring boot·pdf·html
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss