分享一段博主简介代码 仿新浪微博
今天给大家分享一段仿新浪微博个人信息代码,把它放在博客边栏作为博主基本信息介绍,挺搭配的,大家可以看我博客首页,其实关于这段代码呢.....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); ?>
您可能感兴趣的文章
- 11-11wordpress导航菜单新窗口打开的设置方法
- 11-11WP-PostViews插件如何修改文章阅读数
- 11-11wordpress附件保存目录改为年月日和上传文件重命名为时间戳
- 11-11WordPress 上传媒体库文件重命名 全格式支持
- 11-11解决wordpress安装后更新或者上传文件权限不足的问题
- 11-11wordpress实现主动推送+熊掌号推送同步进行
- 11-11WordPress 添加友情链接设置 nofollow 属性
- 11-11WordPress 实现 wp_list_bookmarks 自定义友情链接排除调用
- 11-11WordPress首页指定或排除某分类文章显示
- 11-11WordPress不同分类调用不同的文章模板


阅读排行
推荐教程
- 09-22wordpress如何添加描述
- 11-11wordpress附件保存目录改为年月日和上传文件重命名为时间戳
- 10-19纯代码给WordPress网站添加独立下载页面功能
- 11-11WordPress之给文章内容中间插入广告的实现方法
- 10-18wordpress无插件调用随机文章的方法
- 10-18WordPress 技巧:WordPress 后台也使用七牛云存储
- 10-24Win10无法调节声音怎么办?Win10无法调节声音的解决方法
- 10-19WordPress上传图片HTTP错误的解决方法
- 10-18让注册用户可以上传自己的头像的WordPress插件-WP User Avatar v2.
- 11-11国外WordPress精美主题如何DIY汉化成中文版呢?





