今天给大家分享一段仿新浪微博个人信息代码,把它放在博客边栏作为博主基本信息介绍,挺搭配的,大家可以看我博客首页,其实关于这段代码呢.....o(* ̄︶ ̄*)o,(⊙o⊙)…好吧,不说废话了,直接上代码吧,效果图如下:
一、HTML代码
<div class="PCD_person_info">
<div class="verify_area W_tog_hover S_line2">
<p class="verify clearfix">
<span class="icon_bed W_fl"><i class="be be-iconfontzhizuobiaozhun023114"></i></span>
<span class="icon_group S_line1 W_fl"><span class="renqi">本站已陪伴博主<?php echo floor((time()-strtotime("2015-07-08"))/86400); ?>天</span></span>
</p>
<p class="info"><span>百度贵阳营销中心网络营销咨询顾问...</span></p>
</div>
<div class="WB_innerwrap">
<div class="detail">
<ul class="ul_detail">
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-ditu1"></i></em></span>
<span class="item_text W_fl">坐标:六盘水市</span>
</li>
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-zhutihuodong"></i></em></span>
<span class="item_text W_fl">院校:贵州民族大学</span>
</li>
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-zhuti"></i></em></span>
<span class="item_text W_fl">工作:百度贵阳营销中心</span>
</li>
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-shoucang"></i></em></span>
<span class="item_text W_fl">情感:单身</span>
</li>
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-qq1"></i></em></span>
<span class="item_text W_fl">Q Q: 200947202</span>
</li>
<li class="item S_line2 clearfix">
<span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-weibo"></i></em></span>
<span class="item_text W_fl">微博: https://weibo.com/512378865</span>
</li>
</ul>
</div>
</div>
</div>
二、CSS样式
.PCD_person_info .verify_area {
padding: 16px 16px 10px 16px;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.S_line2 {
border-color: #f2f2f5;
}
.PCD_person_info .verify_area .verify {
margin-bottom: 7px;
}
.PCD_person_info .verify_area .verify .icon_bed {
margin: 0 10px 0 0;
}
.W_fl {
float: left;
}
.W_fl .be-iconfontzhizuobiaozhun023114{
font-size:30px !important;
color:#f49800;
line-height: 150%;
}
.W_fl .renqi{
font-size:16px !important;
color: #ff8a00;
line-height: 250%;
}
.PCD_person_info .verify_area .icon_group {
padding-left: 10px;
line-height: 30%;
border-left-style: solid;
border-left-width: 1px;
}
.S_line1, .W_btn_prev, .W_btn_next, .W_btn_b {
border-color: #d9d9d9;
}
.PCD_person_info .verify_area .icon_group .W_icon_level{
margin: 0 10px 0 0;
vertical-align: middle;
}
.W_icon_level.icon_level_c5 {
background-color: #d60000;
}
.W_icon_level {
width: 25px;
line-height: 14px;
text-align: center;
display: inline-block;
background: #a4a4a4;
border-radius: 8px;
margin: 0 0 0 3px;
padding: 0 5px 0 3px;
}
.PCD_person_info .verify_area .info {
line-height: 18px;
}
.WB_innerwrap {
padding: 5px;
}
.PCD_person_info .detail {
margin: -10px 0 -8px;
overflow: hidden;
}
.PCD_person_info .ul_detail {
margin-bottom: -1px;
}
.PCD_person_info .ul_detail .item {
padding: 7px 0 5px 0;
border-bottom-style: solid;
border-bottom-width: 1px;
line-height: 18px;
}
.S_line2 {
border-color: #f2f2f5;
}
.PCD_person_info .ul_detail .item_ico {
width: 25px;
}
.W_fl {
float: left;
}
.PCD_person_info .ul_detail .item_text {
width: 243px;
margin-top: 1px;
word-wrap: break-word;
}
如果不是Wordpress博客,请找到并删除以下代码再使用。
<?php echo floor((time()-strtotime("2015-07-08"))/86400); ?>