这个例子是一个旅游网页，参考别人模板修改的
效果图：
参考代码：
<!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(*/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(*/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(*/button1.jpg) repeat-x; } .mIcon{ background:url(*/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="*/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="*/tuijian1.jpg"></br>香木河</td> </tr> <tr class="mTui"> <td><img src="*/tuijian2.jpg"></br>白巴哈</td> </tr> <tr class="mTui"> <td><img src="*/tuijian3.jpg"></br>乔戈里峰</td> </tr> </table> </td> <td id="mCenter" > <table align="center"> <tr><td><img src="*/ghost.jpg"></td></tr> <tr><td><img src="*/picture_h1.gif"></td></tr> <tr><td> <img class="mImg" src="*/beauty1.jpg"> <img class="mImg" src="*/beauty2.jpg"> <img class="mImg" src="*/beauty3.jpg"> <img class="mImg" src="*/beauty4.jpg"> </td> </tr> <tr><td><img src="*/route_h1.gif"></td></tr> <tr><td id="mLine"> <img src="*/icon1.gif"> 果子沟—赛里木湖—那拉提大草原—霍尔果斯口岸</br> <img src="*/icon1.gif"> 喀纳斯—禾木河—克拉玛依—乌伦古湖—喀纳斯</br> <img src="*/icon1.gif"> 乌鲁木齐—奎屯—乔尔玛—那拉提—巴音布鲁克</br> <img src="*/icon1.gif"> 库尔勒—博斯腾湖—将军戈壁—天池</br> </td> </tr> </table> </td> <td id="mRight"> <table> <tr class="mBg"><td class="mIcon">*地图</td></tr> <tr><td><img src="*/map1.jpg"></td></tr> <tr><td><img src="*/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">网页爱好者©版权所有 2020-2025<br/> 联系我们<span>2835809579@qq.com</span></td></tr> </table> </body> </html>
本人QQ已经在代码最下面，本人大二，编程新手喜欢编程的，可以跟我交流