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>Documenttitle>
<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"> 果子沟—赛里木湖—那拉提大草原—霍尔果斯口岸br>
<img src="xinjiang/icon1.gif"> 喀纳斯—禾木河—克拉玛依—乌伦古湖—喀纳斯br>
<img src="xinjiang/icon1.gif"> 乌鲁木齐—奎屯—乔尔玛—那拉提—巴音布鲁克br>
<img src="xinjiang/icon1.gif"> 库尔勒—博斯腾湖—将军戈壁—天池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">网页爱好者©版权所有 2020-2025<br/>
联系我们<span>2835809579@qq.comspan>td>tr>
table>
body>
html>本人QQ已经在代码最下面，本人大二，编程新手喜欢编程的，可以跟我交流
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
