HTML 求做一个简单的桂林天气预报网页
( 源代码 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/wai.css"/>
</head>
<body>
<div class="box">
<div class="top_box">桂林天气预报</div>
<dl class="date_box">
<dt class="tubiao"><img src="img/3.jpg"/></dt>
<dt class="date">2012年03月14日</dt>
<dt class="gl">桂林</dt>
<dt class="zy">气象信息由<span>中央气象</span>台提供</dt>
</dl>
<dl class="nav_box1">
<dt class="current">当前天气</dt>
<dt class="say"><img src="img/2.jpg"/></dt>
<dt class="shower"><p class="zy2">阵雨</p><p>12℃~18℃</p></dt>
<dt class="wz">
<ul>
<li class="fl">·风力：北风小于3级</li>
<li>·紫外线强度：弱</li>
<li>·空气质量：良</li>
</ul>
</dt>
</dl>
<dl class="nav_box2">
<dt class="current">72小时天气预报</dt>
<dt class="date2">2012-03-14</dt>
<dt class="date2">2012-03-15</dt>
<dt class="date2">2012-03-16</dt>
<dt class="say2"><img src="img/1.jpg"/></dt>
<dt class="say2"><img src="img/1.jpg"/></dt>
<dt class="say2"><img src="img/1.jpg"/></dt>
<dt class="wz2">
<ul>
<li>阵雨</li>
<li>12℃~18℃</li>
<li>北风小于3级</li>
</ul>
</dt>
<dt class="wz2">
<ul>
<li>阵雨</li>
<li>12℃~18℃</li>
<li>北风小于3级</li>
</ul>
</dt>
<dt class="wz2">
<ul>
<li>阵雨</li>
<li>12℃~18℃</li>
<li>北风小于3级</li>
</ul>
</dt>
</dl>
<dl class="nav_box3">
<dt class="tubiao2"><img src="img/4.jpg"/></dt>
<dt class="city">城市指数</dt>
<dt class="gd"><a href="#">更多</a></dt>
<dt class="ht"></dt>
<dt class="nav3_l">
<ul>
<li>穿衣指数</li>
<li>舒适度指数</li>
<li>晨练指数</li>
<li>感冒指数</li>
<li>空调指数</li>
<li>洗车指数</li>
<li>空气污染指数</li>
<li>啤酒指数</li>
<li>晾晒指数</li>
<li>旅行指数</ul>
</ul>
</dt>
<dt class="nav3_z">
<ul>
<li>舒适</li>
<li>舒适</li>
<li>较不宜</li>
<li>易发</li>
<li>较少开启</li>
<li>不宜</li>
<li>良</li>
<li>较适宜</li>
<li>不太适宜</li>
<li>适宜</ul>
</ul>
</dt>
<dt class="nav3_r">
<ul>
<li>建议着溥型套装或牛仔衫裤等春秋过渡装。年老体弱者宜着套装...</li>
<li>温度适宜,风力不大,您在这样的天气条件下,会感到比较清爽和...</li>
<li>有降水,较不宜晨练,室外锻炼清携带雨具.建议年老体弱人群适...</li>
<li>昼夜温差大,且空气湿度较大,易发生感冒,请注意适当增减衣服...</li>
<li>您将感到很舒适,一般不需要开启空调...</li>
<li>不宜洗车，未来24小时内有雨，如果在此期间洗车，雨水和路上...</li>
<li>气象条件有利于空气污染物稀释、扩散和清除,可以室外正常活动...</li>
<li>适理的饮用啤酒可能会增加您舒适的感觉,但要注意适千万不要过...</li>
<li>有降水,可能会淋湿晾晒的衣物,不太适宜晾晒,请随时注意天气...</li>
<li>有降水,温度适宜,在细雨中游玩别有一番情调,可不要错过机会...</ul>
</ul>
</dt>
</dl>
</div>
</body>
</html>
（CSS样式）
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.top_box{
width: 100px;
height: 30px;
background: #FFFFFF;
text-align:center;
line-height: 30px;
color:blue;
font-weight: bold;
position: absolute;
margin-left: 255px;
margin-top: -18px;
}
.box{
width: 590px;
height: 651px;
border: 1px solid #0c5d0b;
margin: 20px auto;
background: #FFFFFF;
position: relative;
}
.date_box{
width: 550px;
height: 35px;
margin: 5px auto;
background: url(../img/5.jpg)no-repeat;
}
.tubiao{
width: 35px;
}
.tubiao img{
margin-left: 10px;
}
.date{
width: 130px;
}
.gl{
width: 50px;
}
.tubiao ,.date ,.gl ,.zy{
float: left;
height: 35px;
height: 35px;
color: #b60329;
font-size: 14px;
line-height: 35px;
font-weight: bold;
}
.zy{
width: 230px;
float: right;
text-align: center;
}
.zy span{
color: black;
}
.nav_box1{
width: 505px;
height: 100px;
border:1px solid gainsboro;
margin: auto;
margin: 5px auto;
}
.current{
width: 505px;
height: 25px;
background: url(../img/6.jpg) no-repeat;
color: #1c385a;
line-height: 25px;
text-indent: 1em;
font-size: 14px;
font-weight: bold;
}
.say{
width: 180px;
height: 75px;
float: left;
}
.say img{
margin: 10px 60px;
}
.shower{
width: 140px;
height: 75px;
float: left;
background: #edf1fa;
text-align: center;
color: #15376b;
font-size: 14px;
}
.zy2{
width: 140px;
height: 20px;
margin-top: 15px;
}
.wz{
width: 185px;
height: 75px;
float: left;
color: #15376b;
font-size: 14px;
}
.wz ul li{
list-style: none;
text-align: center;
}
.fl{
width: 185px;
height: 20px;
margin-top: 5px;
}
.nav_box2{
width: 505px;
height: 170px;
border:1px solid gainsboro;
margin: 5px auto;
}
.date2{
width: 155px;
height: 22px;
float: left;
margin-left:10px;
margin-top: 10px;
background: #eeeeee;
font-size: 14px;
text-align: center;
line-height: 22px;
}
.say2{
width: 155px;
height: 55px;
float: left;
margin-left:10px;
text-align: center;
}
.say2 img{
margin-top: 10px;
}
.wz2{
width: 155px;
height: 50px;
background: #eef3f7;
float: left;
margin-left:10px;
}
.wz2 ul li{
list-style: none;
text-align: center;
font-size: 12px;
}
.nav_box3{
width: 505px;
height: 270px;
border:1px solid gainsboro;
margin: 5px auto;
}
.city{
width: 100px;
height: 35px;
text-align: center;
float: left;
}
.tubiao2{
width: 35px;
height: 35px;
color: #b60329;
float: left;
}
.tubiao2 img{
margin-left: 20px;
}
.gd{
width: 35px;
height: 35px;
float: right;
}
.city ,.tubiao2 ,.gd{
font-weight: bold;
font-size: 14px;
line-height: 35px;
}
.gd a{
text-decoration: none;
color: black;
display: block;
}
.gd a:hover{
color: darkred;
}
.ht{
width: 480px;
height: 3px;
margin: auto;
background: url(../img/9.jpg) no-repeat;
margin-top: 35px;
}
.nav3_l{
width: 90px;
height: 220px;
float: left;
font-size: 12px;
}
.nav3_l ul li{
width: 90px;
text-align: left;
font-weight: bold;
color: #15376B;
text-indent: 1em;
}
.nav3_z{
width: 60px;
height: 220px;
}
.nav3_z ul li{
width: 60px;
text-align: left;
font-weight: bold;
color: #000000;
}
.nav3_r{
width: 350px;
height: 220px;
}
.nav3_r ,.nav3_z{
font-size: 12px;
float: left;
}
.nav3_r ul li{
width: 350px;
text-align: left;
color: #666666;
}
.nav3_r ul li ,.nav3_z ul li ,.nav3_l ul li{
font-weight: bold;
line-height: 22px;
height: 22px;
}
