您的位置：首页 > 其它

浮动综合实例练习

2014-03-31 22:10 393 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航