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

原创 2018年10月22日21:40:1421评论搜索同类文章897阅读打印本文

今天给大家分享一段仿新浪微博个人信息代码,把它放在博客边栏作为博主基本信息介绍,挺搭配的,大家可以看我博客首页,其实关于这段代码呢.....o(* ̄︶ ̄*)o,(⊙o⊙)…好吧,不说废话了,直接上代码吧,效果图如下:
给大家分享一段博主简介代码 仿新浪微博

一、HTML代码

  1. <div class="PCD_person_info">
  2.         <div class="verify_area W_tog_hover S_line2">
  3.         <p class="verify clearfix">
  4.         <span class="icon_bed W_fl"><i class="be be-iconfontzhizuobiaozhun023114"></i></span>
  5.         <span class="icon_group S_line1 W_fl"><span class="renqi">本站已陪伴博主<?php echo floor((time()-strtotime("2015-07-08"))/86400); ?></span></span>
  6.         </p>
  7.         <p class="info"><span>百度贵阳营销中心网络营销咨询顾问...</span></p>
  8.         </div>
  9.         <div class="WB_innerwrap">
  10.                 <div class="detail">
  11.                     <ul class="ul_detail">
  12.                         <li class="item S_line2 clearfix">
  13.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-ditu1"></i></em></span>
  14.                             <span class="item_text W_fl">坐标:六盘水市</span>
  15.                         </li>
  16.                         <li class="item S_line2 clearfix">
  17.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-zhutihuodong"></i></em></span>
  18.                             <span class="item_text W_fl">院校:贵州民族大学</span>
  19.                         </li>
  20.                         <li class="item S_line2 clearfix">
  21.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-zhuti"></i></em></span>
  22.                             <span class="item_text W_fl">工作:百度贵阳营销中心</span>
  23.                         </li>
  24.                         <li class="item S_line2 clearfix">
  25.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-shoucang"></i></em></span>
  26.                             <span class="item_text W_fl">情感:单身</span>
  27.                         </li>
  28.                         <li class="item S_line2 clearfix">
  29.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-qq1"></i></em></span>
  30.                             <span class="item_text W_fl">Q Q: 200947202</span>
  31.                         </li>
  32.                         <li class="item S_line2 clearfix">
  33.                             <span class="item_ico W_fl"><em class="W_ficon ficon_cd_place S_ficon"><i class="be be-weibo"></i></em></span>
  34.                             <span class="item_text W_fl">微博: https://weibo.com/512378865</span>
  35.                         </li>
  36.                     </ul>
  37.                 </div>
  38.         </div>
  39. </div>

二、CSS样式

  1. .PCD_person_info .verify_area {
  2.     padding16px 16px 10px 16px;
  3.     border-bottom-style: solid;
  4.     border-bottom-width1px;
  5. }
  6. .S_line2 {
  7.     border-color#f2f2f5;
  8. }
  9. .PCD_person_info .verify_area .verify {
  10.     margin-bottom7px;
  11. }
  12. .PCD_person_info .verify_area .verify .icon_bed {
  13.     margin: 0 10px 0 0;
  14. }
  15. .W_fl {
  16.     floatleft;
  17. }
  18. .W_fl .be-iconfontzhizuobiaozhun023114{
  19.     font-size:30px !important;
  20.     color:#f49800;
  21.     line-height: 150%;
  22. }
  23. .W_fl .renqi{
  24.     font-size:16px !important;
  25.     color#ff8a00;
  26.     line-height: 250%;
  27. }
  28. .PCD_person_info .verify_area .icon_group {
  29.     padding-left10px;
  30.     line-height: 30%;
  31.     border-left-style: solid;
  32.     border-left-width1px;
  33. }
  34. .S_line1, .W_btn_prev, .W_btn_next, .W_btn_b {
  35.     border-color#d9d9d9;
  36. }
  37. .PCD_person_info .verify_area .icon_group .W_icon_level{
  38.     margin: 0 10px 0 0;
  39.     vertical-alignmiddle;
  40. }
  41. .W_icon_level.icon_level_c5 {
  42.     background-color#d60000;
  43. }
  44. .W_icon_level {
  45.     width25px;
  46.     line-height14px;
  47.     text-aligncenter;
  48.     displayinline-block;
  49.     background#a4a4a4;
  50.     border-radius: 8px;
  51.     margin: 0 0 0 3px;
  52.     padding: 0 5px 0 3px;
  53. }
  54. .PCD_person_info .verify_area .info {
  55.     line-height18px;
  56. }
  57. .WB_innerwrap {
  58.     padding5px;
  59. }
  60. .PCD_person_info .detail {
  61.     margin: -10px 0 -8px;
  62.     overflowhidden;
  63. }
  64. .PCD_person_info .ul_detail {
  65.     margin-bottom: -1px;
  66. }
  67. .PCD_person_info .ul_detail .item {
  68.     padding7px 0 5px 0;
  69.     border-bottom-style: solid;
  70.     border-bottom-width1px;
  71.     line-height18px;
  72. }
  73. .S_line2 {
  74.     border-color#f2f2f5;
  75. }
  76. .PCD_person_info .ul_detail .item_ico {
  77.     width25px;
  78. }
  79. .W_fl {
  80.     floatleft;
  81. }
  82. .PCD_person_info .ul_detail .item_text {
  83.     width243px;
  84.     margin-top1px;
  85.     word-wrap: break-word;
  86. }

PS:由于本人粗心大意,导致贴错了CSS样式代码,在此深表歉意,现代码已更正,欢迎使用。另,有朋友说代码有BUG,不知这位朋友使用的是否为Wordpress程序,因为代码中有一句是调用建站时间,只适用WP,之所以出错大概因为这个原因吧,如果不是Wordpress博客,请找到并删除以下代码再使用。

<?php echo floor((time()-strtotime("2015-07-08"))/86400); ?>

The End

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:21   其中:访客  14   博主  7

    • avatar 风依  1楼

      好东西留个脚印之后试试

      • avatar 子午书屋  2楼

        前端高手啊

        • avatar Action  3楼

          每次打开都有惊喜,厉害!

          • avatar 杰新博客  4楼

            很棒,可以的、。 :razz:

            • avatar 赚书网  5楼

              可以

              • avatar 学习笔记Blog  6楼

                不错,代码收藏了!

                • avatar 顾敏锋博客  7楼

                  样式不错,不过不想折腾

                  • avatar 火星五号趣闻  8楼

                    不错,去折腾一下去。

                    • avatar 贵安服务  9楼

                      厉害了 博主

                      • avatar 去看你博客  10楼

                        HTML和CSS代码还是没有改过来吗 :shock:

                        • avatar 常阳岁月  11楼

                          我被吓到了,我说怎么一模一样哈哈

                          • avatar 山野愚人居  12楼
                            2018年10月23日 18:10 回复TA

                            能告诉我上面两段代码是什么不同么?bug!

                            • avatar 夏日博客  13楼
                              2018年10月23日 16:48 回复TA

                              可以在关于我页面或者首页做个这样一个简单的介绍,体验很好。

                              • avatar boke112导航  14楼

                                是不是搞错了,感觉HTML代码和CSS代码都是一样的???