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

2018年12月26日12:45:36 发表评论 1,545 views

今天给大家分享一段仿新浪微博个人信息代码，把它放在博客边栏作为博主基本信息介绍，挺搭配的，大家可以看我博客首页，其实关于这段代码呢.....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.     padding: 16px 16px 10px 16px;
  3.     border-bottom-style: solid;
  4.     border-bottom-width: 1px;
  5. }
  6. .S_line2 {
  7.     border-color: #f2f2f5;
  8. }
  9. .PCD_person_info .verify_area .verify {
  10.     margin-bottom: 7px;
  11. }
  12. .PCD_person_info .verify_area .verify .icon_bed {
  13.     margin: 0 10px 0 0;
  14. }
  15. .W_fl {
  16.     float: left;
  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-left: 10px;
  30.     line-height: 30%;
  31.     border-left-style: solid;
  32.     border-left-width: 1px;
  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-align: middle;
  40. }
  41. .W_icon_level.icon_level_c5 {
  42.     background-color: #d60000;
  43. }
  44. .W_icon_level {
  45.     width: 25px;
  46.     line-height: 14px;
  47.     text-align: center;
  48.     display: inline-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-height: 18px;
  56. }
  57. .WB_innerwrap {
  58.     padding: 5px;
  59. }
  60. .PCD_person_info .detail {
  61.     margin: -10px 0 -8px;
  62.     overflow: hidden;
  63. }
  64. .PCD_person_info .ul_detail {
  65.     margin-bottom: -1px;
  66. }
  67. .PCD_person_info .ul_detail .item {
  68.     padding: 7px 0 5px 0;
  69.     border-bottom-style: solid;
  70.     border-bottom-width: 1px;
  71.     line-height: 18px;
  72. }
  73. .S_line2 {
  74.     border-color: #f2f2f5;
  75. }
  76. .PCD_person_info .ul_detail .item_ico {
  77.     width: 25px;
  78. }
  79. .W_fl {
  80.     float: left;
  81. }
  82. .PCD_person_info .ul_detail .item_text {
  83.     width: 243px;
  84.     margin-top: 1px;
  85.     word-wrap: break-word;
  86. }

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

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

 

站长小智

发表评论

您必须登录才能发表评论！