旅游网站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>

最终效果

相关推荐
头顶一只喵喵几秒前
CSS3进阶知识:CSS3盒子模型,box-sizing:content-box和box-sizing:border-box的讲解
前端·css·css3
小飞大王6664 分钟前
css进阶用法
前端·css
普通网友18 分钟前
新手必看!HCCDA-HarmonyOS & Cloud Apps 实验保姆级教程
javascript·angular.js
用户新19 分钟前
V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
前端·javascript
Next_Tech_AI23 分钟前
别用 JS 惯坏了鸿蒙
开发语言·前端·javascript·个人开发·ai编程·harmonyos
-凌凌漆-1 小时前
【vue】选项式api与组合式api
前端·javascript·vue.js
2601_949809591 小时前
flutter_for_openharmony家庭相册app实战+通知设置实现
android·javascript·flutter
可触的未来,发芽的智生1 小时前
发现:认知的普适节律 发现思维的8次迭代量子
javascript·python·神经网络·程序人生·自然语言处理
0思必得02 小时前
[Web自动化] Selenium处理文件上传和下载
前端·爬虫·python·selenium·自动化·web自动化
phltxy3 小时前
Vue3入门指南:从环境搭建到数据响应式,开启高效前端开发之旅
前端·javascript·vue.js