分享一段博主简介代码 仿新浪微博
今天给大家分享一段仿新浪微博个人信息代码,把它放在博客边栏作为博主基本信息介绍,挺搭配的,大家可以看我博客首页,其实关于这段代码呢…..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); ?>