<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动综合实例练习</title>
<style>
body,h2,ul,h3,dl,dd{margin:0;padding:0; font-family:"宋体";}
li{ list-style:none;}
img{ border:none; vertical-align:top;}
a{ text-decoration:none;}
.clear{zoom:1;}
.clear:after{ content:"";display:block;clear:both;}
.wrap{width:730px;margin:0 auto;}
.head{height:24px;border-top:3px solid #e4e4e4;border-bottom:1px solid #e4e4e4;}
.title{float:left;padding:0 10px 0 5px;background:url(img/titleBg.jpg) right 9px no-repeat; line-height:24px; font-size:12px; color:#0362b4;}
.pic_list{padding-top:15px;}
.pic_list li{ float:left;width:96px;padding:0 21px 0 24px;}
.pic_list .pic{border:1px solid #d6d3dc;padding:2px;}
.pic_list h3{ font:normal 12px/22px "宋体"; text-align:center;padding-top:7px;}
.pic_list h3 a{color:#4c4c4c;}
.text_list{ background:url(img/dlBg.jpg);}
.text_list dt{width:120px;height:26px;float:left; background:url(img/dtBg.jpg) repeat-x;padding:6px 0 0 10px;margin-right:10px; display:inline;}
.text_list dt a{ display:block; background:url(img/dtIco.jpg) no-repeat 0 13px;padding-left:7px; font-size:12px; line-height:22px;color:#000;}
.text_list dd{width:95px;height:16px;overflow:hidden;float:left;border-right:1px solid #ccc;margin:10px 0 6px 0; text-indent:15px; line-height:16px; font-size:12px;}
.text_list dd a{ color:#343434;}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<h2 class="title">全球通业务</h2>
</div>
<ul class="pic_list clear">
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
</ul>
<dl class="text_list clear">
<dt><a href="#">基本业务</a></dt>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">更多</a></dd>
<dt><a href="#">基本业务</a></dt>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">更多</a></dd>
</dl>
</div>
<!--<li>
<a href="#">
<img />
<strong></strong>
</a>
</li>-->
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动综合实例练习</title>
<style>
body,h2,ul,h3,dl,dd{margin:0;padding:0; font-family:"宋体";}
li{ list-style:none;}
img{ border:none; vertical-align:top;}
a{ text-decoration:none;}
.clear{zoom:1;}
.clear:after{ content:"";display:block;clear:both;}
.wrap{width:730px;margin:0 auto;}
.head{height:24px;border-top:3px solid #e4e4e4;border-bottom:1px solid #e4e4e4;}
.title{float:left;padding:0 10px 0 5px;background:url(img/titleBg.jpg) right 9px no-repeat; line-height:24px; font-size:12px; color:#0362b4;}
.pic_list{padding-top:15px;}
.pic_list li{ float:left;width:96px;padding:0 21px 0 24px;}
.pic_list .pic{border:1px solid #d6d3dc;padding:2px;}
.pic_list h3{ font:normal 12px/22px "宋体"; text-align:center;padding-top:7px;}
.pic_list h3 a{color:#4c4c4c;}
.text_list{ background:url(img/dlBg.jpg);}
.text_list dt{width:120px;height:26px;float:left; background:url(img/dtBg.jpg) repeat-x;padding:6px 0 0 10px;margin-right:10px; display:inline;}
.text_list dt a{ display:block; background:url(img/dtIco.jpg) no-repeat 0 13px;padding-left:7px; font-size:12px; line-height:22px;color:#000;}
.text_list dd{width:95px;height:16px;overflow:hidden;float:left;border-right:1px solid #ccc;margin:10px 0 6px 0; text-indent:15px; line-height:16px; font-size:12px;}
.text_list dd a{ color:#343434;}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<h2 class="title">全球通业务</h2>
</div>
<ul class="pic_list clear">
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
<li>
<div class="pic">
<a href="#">
<img src="img/pic2.jpg" />
</a>
</div>
<h3><a href="#">信息管家</a></h3>
</li>
</ul>
<dl class="text_list clear">
<dt><a href="#">基本业务</a></dt>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">更多</a></dd>
<dt><a href="#">基本业务</a></dt>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">国际长途</a></dd>
<dd><a href="#">国际漫游</a></dd>
<dd><a href="#">更多</a></dd>
</dl>
</div>
<!--<li>
<a href="#">
<img />
<strong></strong>
</a>
</li>-->
</body>
</html>
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
