Web前端项目实战(含代码)-微博界面效果
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
实现微博效果如下:
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;
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.gv,a.member{
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;
}
div.group{
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;
}