这个例子是一个旅游网页，参考别人模板修改的

效果图：html静态网页实例二（附完整代码）_ico

参考代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #mTitle{
      background:url(xinjiang/button1.jpg) repeat-x;
      height:28px;
      border-bottom:1px solid #A56AFF;
    }
    body{
      background-color:#A56AFF;
    }
    a{
      text-decoration:none;
      padding-left:12px;
    }
    #mWeather{
      background-color:#5EA6EB;
      line-height:23px;
      font-size:16px;
    }
    #mWeather p{
      background:url(xinjiang/weather.jpg) no-repeat;
      background-size:200px 41px;
      line-height:40px;
      font-size:25px;
      padding-left:65px;
      margin:0px;
    }
    .mTui{
      background-color:#5EA6EB;
      text-align:center;
    }
    .mBg{
      background:url(xinjiang/button1.jpg) repeat-x;
    }
    .mIcon{
      background:url(xinjiang/icon2.gif) no-repeat left bottom;
      padding-left:10px;
      font-size:20px;
    }
    .mImg{
      padding-left:11px;
    }
    #mLine{
      line-height:25px;
    }
    ul{
      list-style:none;
      padding:0px;
      margin:0px;
      background-color:#5EA6EB;
    }
    ul li{
      padding-left:10px;
      line-height:26px;
      border-bottom:1px dashed;
    }
    #mBottom{
      background-color:#5EA6EB;
      text-align:center;
      border-top:1px solid #A56AFF;
    }
    #mBottom span{
      color:white;
      
    }
    #mCenter{
      border-left:1px solid #A56AFF;
      width:410px;
    }
    #mRight{
      border-left:1px solid #A56AFF;
      width:150px;
    }
  </style>
 </head>
 <body>
  <table align="center" bgcolor="white"> 
    <tr><td colspan="3"><img src="xinjiang/banner.jpg"></td></tr>
    <tr><td colspan="3" id="mTitle">
        <a href="#">首页</a>
        <a href="#">走进民族</a>
        <a href="#">民族概况</a>
        <a href="#">吃在新疆</a>
        <a href="#">路线选择</a>
        <a href="#">特色线路</a>
        <a href="#">户外探险</a>
        <a href="#">精彩游记</a>
        <a href="#">付款方式</a>
        <a href="#">给我留言</a>
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr><td id="mWeather">
              <p>天气查询</p>
              乌鲁木齐 晴转阴25℃-35℃<br/>
              喀什 阵雨转多云25℃-32℃<br/>
              吐鲁番 多云转阴20℃-28℃<br/>
              库尔勒 阵雨转阴21℃-28℃<br/>
              卡拉玛依 雷阵雨26℃-30℃
            </td>
          </tr>
          <tr class="mBg"><td class="mIcon">今日推荐</td></tr>
          <tr class="mTui">
            <td><img src="xinjiang/tuijian1.jpg"></br>香木河</td>
          </tr>
          <tr class="mTui">
            <td><img src="xinjiang/tuijian2.jpg"></br>白巴哈</td>
          </tr>
          <tr class="mTui">
            <td><img src="xinjiang/tuijian3.jpg"></br>乔戈里峰</td>
          </tr>
          
        </table>
      </td>
      <td id="mCenter" >
        <table align="center">
          <tr><td><img src="xinjiang/ghost.jpg"></td></tr>
          <tr><td><img src="xinjiang/picture_h1.gif"></td></tr>
          <tr><td>
              <img class="mImg" src="xinjiang/beauty1.jpg">
              <img class="mImg" src="xinjiang/beauty2.jpg">
              <img class="mImg" src="xinjiang/beauty3.jpg">
              <img class="mImg" src="xinjiang/beauty4.jpg">
            </td>
          </tr>
          <tr><td><img src="xinjiang/route_h1.gif"></td></tr>
          <tr><td id="mLine">
              <img src="xinjiang/icon1.gif">&nbsp;&nbsp;果子沟—赛里木湖—那拉提大草原—霍尔果斯口岸</br>
              <img src="xinjiang/icon1.gif">&nbsp;&nbsp;喀纳斯—禾木河—克拉玛依—乌伦古湖—喀纳斯</br>
              <img src="xinjiang/icon1.gif">&nbsp;&nbsp;乌鲁木齐—奎屯—乔尔玛—那拉提—巴音布鲁克</br>
              <img src="xinjiang/icon1.gif">&nbsp;&nbsp;库尔勒—博斯腾湖—将军戈壁—天池</br>
            </td>
          </tr>
        </table>
      </td>
      <td id="mRight">
        <table>
          <tr class="mBg"><td class="mIcon">新疆地图</td></tr>
          <tr><td><img src="xinjiang/map1.jpg"></td></tr>
          <tr><td><img src="xinjiang/map2.jpg"></td></tr>
          <tr class="mBg"><td class="mIcon">特色美食</td></tr>
          <tr><td>
              <ul>
                <li>大盘鸡</li>
                <li>窝窝馕</li>
                <li>芝麻馕</li>
                <li>哈密瓜</li>
              </ul>
            </td>
          </tr>
          <tr class="mBg"><td class="mIcon">新疆住宿</td></tr>
          <tr><td>
              <ul>
                <li>马航国际酒店</li>
                <li>亚中亚大酒店</li>
                <li>银都大饭店</li>
                <li>如意大饭店</li>
                <li>好友大酒店</li>
                <li>王朝宾馆</li>
                <li>神望宾馆</li>
              </ul>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr><td colspan="3" id="mBottom">网页爱好者&copy;版权所有 2020-2025<br/>
      
  </table>
 </body>
</html>

​