实现微博效果如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{
font-size:12px;
}
.clear{
zoom:1;
}
.clear:after{
content:"";
display:block;
clear:both;
}
ul{
width:600px;
list-style:none;
margin:0 auto;
padding:0px;
border:1px solid #f2f2f5;
}
ul li{
float:left;
width:264px;
height:108px;
padding:16px 0px 16px 16px;
margin:10px;html特效代码照片
background:#f2f2f5;
}
a{
text-decoration:none;
color:#000;
}
.left{
float:left;
width:66px;
height:108px;
border-right:1px solid #d9d9d9;
}
.left span{
display:inline-block;
height:100%;
vertical-align:middle;
}
.left img{
vertical-align:middle;
}
.right{
float:left;
padding-left:10px;
}
.right div{
margin-bottom:5px;
}
.right a{
vertical-align:middle;
}
a.title{
font-weight:bold;
font-size:14px;
}
a.v,a.lv,a.ber{
width:15px;
height:15px;
display:inline-block;
}
a.v{
background:url(images/icon.png) no-repeat 0px -300px;
}
a.lv{
background:url(images/icon.png) no-repeat 0px -72px;
}
a.gv{
background:url(images/icon.png) no-repeat 0px -48px;
}
a.member{
background:url(images/icon.png) no-repeat -26px -125px;
}
a.site{
color:#eb7350;
}
up{
float:left;
width:84px;
height:26px;
line-height:26px;
text-align:center;
border:1px solid #cecece;
color:#333;
}
a.member2{
background-position:-26px -25px;
}
a.member4{
background-position:-26px -74px;
}
</style>
</head>
<body>
<ul class="clear">
<!--糗事大百科-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/1.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">糗事大百科</a>
<a href="#" class="v"></a>
<a href="#" class="member"></a>
</div>
<div>
已关注
</div>
<div>
微博知名博主
</div>
<div>
通过微博<a href="#" class="site"> weibo</a>关注
</div>
<div class="clear">
<div class="group">
休闲
</div>
</div>
</div>
</li>
<!--经典-电影-台词-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/2.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">经典-电影-台词</a>
<a href="#" class="member member2"></a>
</div>
<div>
已关注
</div>
<div>
简介：共赏佳作，品读经典
</div>
<div>
通过微博<a href="#" class="site"> weibo</a>关注
</div>
<div class="clear">
<div class="group">
休闲
</div>
</div>
</div>
</li>
<!--头条新闻-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/3.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">头条新闻</a>
<a href="#" class="lv"></a>
</div>
<div>
已关注
</div>
<div>
新浪新闻中心24小时播报...
</div>
<div>
通过微博<a href="#" class="site"> weibo</a>关注
</div>
<div class="clear">
<div class="group">
媒体
</div>
</div>
</div>
</li>
<!--旅行志-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/4.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">旅行志</a>
<a href="#" class="gv"></a>
</div>
<div>
已关注
</div>
<div>
微博旅游帐号
</div>
<div>
通过微博<a href="#" class="site"> weibo</a>关注
</div>
<div class="clear">
<div class="group">
媒体
</div>
</div>
</div>
</li>
<!--胡歌-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/5.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">胡歌</a>
<a href="#" class="v"></a>
<a href="#" class="member"></a>
</div>
<div>
已关注
</div>
<div>
演员，出演电视剧《琅琊榜》...
</div>
<div class="clear">
<div class="group">
明星
</div>
</div>
</div>
</li>
<!--林依晨Ariel-->
<li class="clear">
<div class="left">
<span></span>
<img src="images/6.jpg" />
</div>
<div class="right">
<div>
<a href="#" class="title">林依晨Ariel</a>
<a href="#" class="v"></a>
<a href="#" class="member member4"></a>
</div>
<div>
已关注
</div>
<div>
台湾演员、歌手
</div>
<div class="clear">
<div class="group">
明星
</div>
</div>
</div>
</li>
</ul>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论