制作方法
HTML结构
该特效的HTML结构采用无序列表的HTML结构，其中每一个li.card元素代表一种卡片。
<ul class="card-list">
<li class="card">
<div class="card-color color-rain">
<div class="rain"></div>
</div>
<div class="card-info">
<p>63 ℉</p>
<p>low of 61 ℉</p>
</div>
</li>
......
</ul>
复制代码
CSS样式
首先给卡片一些基本样式。
.card {
( 源代码 )
<!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
}
