分享一段博主简介代码 仿新浪微博

  • 内容
  • 评论
  • 相关

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

觉得有用,欢迎打赏!

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注