html静态网页实例二（附完整代码）「建议收藏」

大家好，欢迎来到IT知识分享网。

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

效果图：

参考代码：


<!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/>
				联系我们<span>2835809579@qq.com</span></td></tr>
	</table>
 </body>
</html>

IT知识分享网

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/7001.html