实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>国内虚拟主机</title>
<style type="text/css">
body {
color: #555;
background:#f5f5f5;
font:11px "Helvetica Neue";
}
p{ /*p标签自带有12px的margin，line-height设置时减少12px;*/
border-bottom: 1px solid #e6e5e5;
height: 42px;
line-height: 30px;
}
li{
display: inline;
padding-left: 20px;
list-style: none;
float: left;
}
.h3{
font-family: "KaiTi_GB2312";
font-size: 22px;
color: #ffffff;
width: 263px;
height: 170px;
background: #4d4d4d;
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
}
span{
font:20px "Helvetica Neue";
display: block;
margin-top: 20px;
}
.a{ /*设置a标签为按钮*/
color:#2086ee;
height: 38px;
width: 110px;
line-height: 38px;
display: inline-block;
text-decoration: none;
background: #fff;
text-align: center;
margin-left: 10px;
margin-bottom: 20px;
border: 1px solid #2086ee;
}
.div{ /*父级DIV在浏览器中居中对齐*/
width: 1000px;
margin: 0px auto;
text-align: center;
}
.div2 {
width: 263px;
margin: 0px auto;
text-align: center;
background: white;
}
.div3{
margin-top: 50px;
padding-left: 20px;
padding-right: 20px;
}
.hover:hover .h3{ /*鼠标停留改变h3标签背景颜色*/
background: #2086ee;
}
.hover:hover .a{ /*鼠标停留改变a标签背景颜色*/
background: #2086ee;
color: white;
}
</style>
</head>
<body>
<div class="div">
<ul>
<li>
<div class="hover">
<div class="div2">
<h3 class="h3">体验型150M
<br><span>68/年</span></h3>
<div class="div3">
<P>网页空间：150M+赠送30M</P>
<P>每月流量：15G</P>
<P>数据库：MySQL5(30M)</P>
<P>机房线路：国内电信机房</P>
</div>
<div>
<a class="a" href="">立即购买</a>
<a class="a" href="">查看详情</a>
</div>
</div>
</div>
</li>
<li>
<div class="hover">
<div class="div2">
<h3 class="h3">云峰A 1G
<br><span>188/年</span></h3>
<div class="div3">
<P>网页空间：1G+赠送200M</P>
<P>每月流量：25G</P>
<P>数据库：SQL Server 2008(50M)</P>
<P>机房线路：国内BGP/双线机房</P>
</div>
<div>
<a class="a" href="">立即购买</a>
<a class="a" href="">查看详情</a>
</div>
</div>
</div>
</li>
<li>
<div class="hover">
<div class="div2">
<h3 class="h3">云峰B 2G
<br><span>288/年</span></h3>
<div class="div3">
<P>网页空间：2G+赠送400M</P>
<P>每月流量：40G</P>
<P>数据库：SQL Server 2008(100M)</P>
<P>机房线路：国内BGP/双线机房</P>
</div>
<div>
<a class="a" href="">立即购买</a>
<a class="a" href="">查看详情</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
