您的位置 >>> 星想互联 >>> 课堂教学 >>> 教学案例
仿新浪局部排版效果
点击数:2090  发布时间2017-03-28 08:48:58

<html>
<head>
<style>
*{padding:0;margin:0;}
body{font-size:14px;color:#333;line-height:2;}
ul,li{list-style:none;}
a{color:#00c;text-decoration:none;}
a:hover{color:#f90;text-decoration:underline;}
.t1,.t2{width:340px;float:left;margin-left:40px;margin-top:40px;}

.t1 li,.t2 li{border-bottom:1px dashed #ccc;height:40px;line-height:40px;}
.t1 li{background:url(icon.png) no-repeat 0px -285px;padding-left:12px}
.t2 li{background:url(icon.png) no-repeat 0px -385px;padding-left:22px}
</style>


</head>

<body>

<div class="t1">
 <ul>
 <li><a href="">习近平会见尼泊马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总斯加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总理 同马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平会泊尔总理 同马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总理 同马达加加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总斯加总统举行会谈</a></li>
 </ul>
</div>


<div class="t2">
 <ul>
 <li><a href="">习近平会见尼泊马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总斯加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总理 同马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平会泊尔总理 同马达加斯加总统举行会谈</a></li>
 <li><a href="">习近平加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总理 同马达加加总统举行会谈</a></li>
 <li><a href="">习近平会见尼泊尔总斯加总统举行会谈</a></li>
 </ul>
</div>

</body>

</html>

来源:星想互联