Web实现：旧版微博个人页整体实现

微博已经改版了，这部分代码还是很久之前写的，旧版的个人主页，分享一下。
HTML部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><link rel="stylesheet" href="./index.css"><title>微博个人页</title></head><body><header class="clearFix"><div class="left"><div class="img"></div><div class="input-box"><inputtype="text"placeholder="大家都在搜：中国队开赛三天已超上届金牌总数"/><span class="search"></span></div></div><div class="right"><ul class="nav clearFix"><li class="item"><img src="./images/first-page.png" alt="" /><span>首页</span></li><li class="item"><img src="./images/video.png" alt="" /><span>视频</span></li><li class="item"><img src="./images/find.png" alt="" /><span>发现</span></li><li class="item"><img src="./images/game.png" alt="" /><span>游戏</span></li></ul><ul class="regist-login"><li>注册</li><li>|</li><li>登陆</li></ul></div></header><div class="container"><div class="banner"><div class="banner-top"><div class="main"><div class="head-icon"></div><div class="personal-introduce"><span class="name">我是娜扎</span><span class="sex-icon"></span><span class="level-icon"></span></div><div class="professional">演员，代表作《择天记》</div><div class="focus-messages"><div class="focus"><div class="btn"><span class="add"></span><span>关注</span></div><div class="select"><span></span></div></div><div class="messages"><div class="btn">私信</div><div class="select"><span></span></div></div></div></div></div><div class="banner-bottom"><div class="inner"><div class="home-page">她的主页</div><div class="photo-album">她的相册</div></div></div></div><main><div class="main-left"><ul class="counter"><li class="item"><div><div class="number">524</div><div class="text">关注</div></div></li><li class="item"><div><div class="number">18705761</div><div class="text">粉丝</div></div></li><li class="item"><div><div class="number">1650</div><div class="text">微博</div></div></li></ul><div class="person-info"><div class="verify-info"><div class="verify"><span class="vip-icon"></span><span class="text">微博认证</span></div><div class="icons"><span class="flag-icon"></span><span class="panda-icon"></span></div></div><div class="introduce">演员，代表作《择天记》</div><ul class="detail"><li class="item">北京</li><li class="item">简介：工作请联系：nazhagongzuo@163.com</li><li class="item">博客地址：<a href="http://www.renren.com/profile.do?id=325727008">http://www.renren.com/profile.do?id=325727008</a></li><li class="item">标签 <a href="">舞蹈平面</a></li></ul><div class="more"><span class="text">查看更多</span><span class="right-icon"></span></div></div><div class="ranking"><div class="title"><div class="name">明星势力榜</div><div class="love"><span class="lovenum">39938</span><span class="text">爱慕值</span></div></div><div class="flower"><div class="fl-info"><div><div class="fl-info-text">已经收到 <b>299104</b> 朵花</div><div class="fl-info-btn">立即送花</div></div><div class="fl-info-avatar"></div></div><div class="fl-rule">送花可增加明星的爱慕值，帮助明星在微博中获得更多曝光机会。</div><div class="fl-ranking">我是娜扎 内地榜排行 <b>第51名</b><a href="#">去看看?</a></div></div></div><div class="relation"><div class="title">微关系</div><div class="relation-container"><div class="follow"><div class="title">她的关注(523)</div><ul class="follow-list"><li class="item"><div class="avatar-tag"><div class="avatar"></div><div class="tag-blue"></div></div><div class="name">绿洲</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div><div class="tag-blue"></div></div><div class="name">带着微笑去旅行</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div><div class="tag-blue"></div></div><div class="name">粉丝红包</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div><div class="tag-red"></div></div><div class="name">BIGBIGBIG</div></li></ul></div><div class="fans"><div class="title">她的粉丝(18705761)</div><ul class="fans-list"><li class="item"><div class="avatar-tag"><div class="avatar"></div></div><div class="name">泽·逸</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div></div><div class="name">霍霍1018</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div></div><div class="name">小菌朵...</div></li><li class="item"><div class="avatar-tag"><div class="avatar"></div></div><div class="name">用户6...</div></li></ul></div></div><div class="more"><span class="text">查看更多</span><span class="right-icon"></span></div></div></div><div class="main-right"><div class="works"><div class="title">她的作品</div><ul class="work-list"><li class="item"><div class="cover"><imgsrc="./images/work1.png"alt=""/><span class="play-icon"></span></div><div class="info"><div class="info-title">时光尽头</div><div class="text">文件格式：MP3(320K)</div><div class="text">154人已购买</div><div class="option"><a href="">2.00元正版</a><em></em><a href="">分享</a></div></div></li><li class="item"><div class="cover"><imgsrc="./images/work2.png"alt=""/><span class="play-icon"></span></div><div class="info"><div class="info-title">你-娜扎</div><div class="text">我是娜扎</div><div class="option"><span class="praised-icon"></span><a href="">1474</a><em></em><a href="">分享</a></div></div></li></ul><div class="more"><span class="text">查看更多</span><span class="right-icon"></span></div></div><div class="messages"><div class="message"><div class="message-core"><div class="avatar"></div><div class="detail"><div class="info"><span class="username">我是娜扎</span><span class="v-square-icon"></span><span class="level-icon"></span><span class="flag-icon"></span><span class="panda-icon"></span></div><div class="text"><span>10月2日 01:16 来自 小米CC9</span></div><div class="detail-core"><div class="text">初秋的巴黎，与<a href="">@Alexander-McQueen</a>诉说一场时装的故事<span class="heart-icon"></span></div><div class="pic-list"><imgsrc="./images/pic1.jpg"alt=""/><imgsrc="./images/pic2.jpg"alt=""/><imgsrc="./images/pic3.jpg"alt=""/><imgsrc="./images/pic4.jpg"alt=""/><imgsrc="./images/pic5.jpg"alt=""/><imgsrc="./images/pic6.jpg"alt=""/><imgsrc="./images/pic7.jpg"alt=""/><imgsrc="./images/pic8.jpg"alt=""/><imgsrc="./images/pic9.jpg"alt=""/></div><div class="fresh-news"><span class="fresh-news-icon"></span><span class="text">娜扎最新动态追踪</span></div></div></div></div><ul class="message-option"><li class="item"><a href=""><span class="star-icon"></span><span>收藏</span></a></li><li class="item"><a href=""><span class="share-icon"></span><span>23842</span></a></li><li class="item"><a href=""><span class="repeat-icon"></span><span>6</span></a></li><li class="item"><a href=""><span class="praised-icon"></span><span>105819</span></a></li></ul></div><div class="message"><div class="message-core"><div class="avatar"></div><div class="detail"><div class="info"><span class="username">我是娜扎</span><span class="v-square-icon"></span><span class="level-icon"></span><span class="flag-icon"></span><span class="panda-icon"></span></div><div class="text"><span>10月14日 23:17 来自 小米CC9</span></div><div class="detail-core"><div class="text">希望这个世界多一些温暖和善意</div><div class="fresh-news"><span class="fresh-news-icon"></span><span class="text">娜扎最新动态追踪</span></div></div></div></div><ul class="message-option"><li class="item"><a href=""><span class="star-icon"></span><span>收藏</span></a></li><li class="item"><a href=""><span class="share-icon"></span><span>15613</span></a></li><li class="item"><a href=""><span class="repeat-icon"></span><span>11</span></a></li><li class="item"><a href=""><span class="praised-icon"></span><span>110484</span></a></li></ul></div><div class="message"><div class="message-core"><div class="avatar"></div><div class="detail"><div class="info"><span class="username">我是娜扎</span><span class="v-square-icon"></span><span class="level-icon"></span><span class="flag-icon"></span><span class="panda-icon"></span></div><div class="text"><span>8月19日 10:13 来自 小米CC9</span></div><div class="detail-core"><div class="text">很高兴成为「小米CC手机大使」邀请你与我一同参与<a href="">#我的颜值3200万#</a>自拍挑战~快来参加吧！</div><div class="repeat-message"><div class="info"><span class="user">@小米手机</span><span class="v-blue-icon"></span><span class="level6-icon"></span><span class="flag-icon"></span></div><div class="repeat-core"><div class="repeat-text"><span>你好，娜扎！</span><br><span>热烈欢迎<a href="">@我是娜扎</a>成为「小米CC手机大使」</span><br><span>我们用CC9前置3200万相机，为娜扎拍了一张自拍大片，简直不要太好看！转发过万就再发一张</span><span class="heart-icon"></span><br><br><span>「福利」关注+转发，抽送一台小米CC9！</span><a href="">#小米CC#</a></div><div class="pic"><img src="./images/mi-pic.png" alt=""></div><div class="addition"><div class="text">8月19日 10:00 来自 小米CC9 已编辑</div><ul class="message-option"><li class="item"><a href=""><span class="share-icon"></span><span>98400</span></a></li><li class="item"><a href=""><span class="repeat-icon"></span><span>16760</span></a></li><li class="item"><a href=""><span class="praised-icon"></span><span>48484</span></a></li></ul></div></div></div></div></div></div><ul class="message-option"><li class="item"><a href=""><span class="star-icon"></span><span>收藏</span></a></li><li class="item"><a href=""><span class="share-icon"></span><span>47480</span></a></li><li class="item"><a href=""><span class="repeat-icon"></span><span>8</span></a></li><li class="item"><a href=""><span class="praised-icon"></span><span>57783</span></a></li></ul></div></div></div></main></div></body>
</html>

CSS部分：

@charset "UTF-8";
header {display: flex;justify-content: space-between;box-sizing: border-box;padding-left: 110px;padding-right: 95px;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);background: #ffffff; }header .left {display: flex;align-items: center; }header .left .img {width: 80px;height: 50px;background: url(./images/weibo-header.png) no-repeat center;background-size: contain; }header .left .input-box {position: relative;width: 470px;margin-left: 30px;box-sizing: border-box;background-color: #f2f2f2; }header .left .input-box input {border: 1px solid #cccccc;box-sizing: border-box;width: 100%;height: 28px;border: none;background-color: transparent;font-size: 12px;color: #808080;padding-left: 10px;padding-right: 35px;line-height: 29px;outline: 0; }header .left .input-box input:focus {border: 1px solid #ff830a;background: #fff; }header .left .input-box span {position: absolute;width: 16px;height: 28px;line-height: 28px;top: 0px;right: 15px;background: url(./images/search.png) no-repeat center;background-size: contain; }header .right {display: flex;font-size: 12px; }header .right .nav {width: 232px;height: 50px;margin-right: 30px;display: flex;justify-content: space-between;align-items: center; }header .right .nav li {margin-right: 15px;display: flex;align-items: center; }header .right .nav li:last-child {margin-right: 0px; }header .right .nav li img {width: 18px;height: 18px;margin-right: 4px; }header .right .regist-login {display: flex;align-items: center; }header .right .regist-login li:nth-child(2) {margin: 0 10px;color: #d9d9d9; }.container .banner {width: 920px;margin: 0 auto;color: #fff;text-align: center; }.container .banner .banner-top {height: 300px;background: url(./images/banner-bg.png) no-repeat bottom center;background-size: contain;padding-top: 30px;box-sizing: border-box; }.container .banner .banner-top .main {width: 275px;margin: 0 auto; }.container .banner .banner-top .main .head-icon {width: 108px;height: 110px;margin: 0 auto;border-radius: 50%;background: url(./images/banner-head-icon.png) no-repeat center;background-size: contain; }.container .banner .banner-top .main .personal-introduce {display: flex;justify-content: center;align-items: flex-end;margin-top: 10px;text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.31); }.container .banner .banner-top .main .personal-introduce .name {line-height: 29px;font-size: 22px; }.container .banner .banner-top .main .personal-introduce .sex-icon {display: inline-block;width: 16px;height: 16px;margin: 0px 8px;margin-bottom: 4px;background: url(./images/sex-icon.png) no-repeat center;background-size: contain; }.container .banner .banner-top .main .personal-introduce .level-icon {display: inline-block;width: 16px;height: 16px;margin-bottom: 4px;background: url(./images/leval-icon.png) no-repeat center;background-size: contain; }.container .banner .banner-top .main .professional {margin-top: 5px;text-align: center;font-size: 12px;line-height: 20px;text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.42); }.container .banner .banner-top .main .focus-messages {display: flex;justify-content: space-between;margin-top: 19px; }.container .banner .banner-top .main .focus-messages .focus {display: flex;justify-content: flex-start; }.container .banner .banner-top .main .focus-messages .focus .btn {display: flex;justify-content: center;align-items: center;width: 100px;height: 32px;margin-right: 5px;background: linear-gradient(180deg, #fa823c 0%, #f55f10 100%);border-radius: 2px;font-size: 14px;line-height: 20px;color: #ffffff; }.container .banner .banner-top .main .focus-messages .focus .btn span {display: inline-block; }.container .banner .banner-top .main .focus-messages .focus .btn .add {width: 11px;height: 11px;margin-right: 4px;background: url(./images/add-icon.png) no-repeat;background-size: contain; }.container .banner .banner-top .main .focus-messages .focus .select {display: flex;justify-content: center;align-items: center;width: 20px;height: 32px;background: linear-gradient(180deg, #fa823c 0%, #f55f10 100%);border-radius: 2px; }.container .banner .banner-top .main .focus-messages .focus .select span {width: 7px;height: 4px;background: url(./images/triangle-icon.png) no-repeat;background-size: contain; }.container .banner .banner-top .main .focus-messages .messages {display: flex;justify-content: flex-start; }.container .banner .banner-top .main .focus-messages .messages .btn {display: flex;justify-content: center;align-items: center;width: 100px;height: 32px;margin-right: 8px;background: #70757f;border-radius: 2px;font-size: 14px;line-height: 20px;color: #ffffff; }.container .banner .banner-top .main .focus-messages .messages .select {display: flex;justify-content: center;align-items: center;width: 30px;height: 32px;background: #70757f;border-radius: 2px; }.container .banner .banner-top .main .focus-messages .messages .select span {width: 14px;height: 11px;background: url(./images/list-icon.png) no-repeat;background-size: contain; }.container .banner .banner-bottom {background-color: #fff;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); }.container .banner .banner-bottom .inner {display: flex;justify-content: space-between;margin: 0 auto;width: 320px; }.container .banner .banner-bottom .inner div {display: flex;justify-content: center;align-items: center;box-sizing: border-box;width: 70px;height: 40px;font-size: 14px;line-height: 14px;color: #000000; }.container .banner .banner-bottom .inner .home-page {border-bottom: 2px solid #f7691d; }.container main .main-left {margin-right: 19px;flex: none;width: 300px; }.container main .main-left .counter {display: flex;height: 60px;align-items: center;background: #fff;box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px; }.container main .main-left .counter .item {flex: 1;border-left: 1px solid #d9d9d9;height: 36px;display: flex;justify-content: center;align-items: center;text-align: center; }.container main .main-left .counter .item:first-child {border: none; }.container main .main-left .counter .item .number {font-size: 12px;color: #333333;line-height: 14px;margin-bottom: 6px; }.container main .main-left .counter .item .text {font-size: 12px;color: #868686;line-height: 14px; }.container main .main-left .person-info {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px;background: #fff;width: 300px;font-size: 12px;margin-top: 15px; }.container main .main-left .person-info a {color: #ff830a;font-size: 12px;text-decoration: none; }.container main .main-left .person-info .verify-info {display: flex;align-items: center;padding-top: 13px;padding-left: calc(16px + 4px);margin-bottom: 10px; }.container main .main-left .person-info .verify-info .verify {width: 90px;height: 28px;border-radius: 28px;background: #fdb73d;display: flex;justify-content: center;align-items: center; }.container main .main-left .person-info .verify-info .verify .vip-icon {width: 14px;height: 16px;background: url(./images/vip.png) no-repeat center bottom/contain;margin-right: 4px; }.container main .main-left .person-info .verify-info .verify .text {color: #fff; }.container main .main-left .person-info .verify-info .icons {height: 28px;border-left: 1px solid #d9d9d9;margin-left: 10px;padding-left: 11px;display: flex;align-items: center; }.container main .main-left .person-info .verify-info .icons .flag-icon {width: 16px;height: 14px;display: block;background: url(./images/flag.png) no-repeat center bottom/contain;margin-right: 10px; }.container main .main-left .person-info .verify-info .icons .panda-icon {width: 16px;height: 14px;display: block;background: url(./images/panda.png) no-repeat center bottom/contain; }.container main .main-left .person-info .introduce {color: #141414;padding-bottom: 13px;padding-left: calc(16px + 4px); }.container main .main-left .person-info .detail {border-top: 1px solid #f2f2f5;border-bottom: 1px solid #d9d9d9;padding: 0 16px; }.container main .main-left .person-info .detail .item {padding: 10px 5px 10px 23px;border-top: 1px solid #f2f2f5; }.container main .main-left .person-info .detail .item:first-child {border: none;background: url(./images/address.png) no-repeat 0 8px/20px 20px; }.container main .main-left .person-info .detail .item:nth-child(2) {background: url(./images/file.png) no-repeat 0 8px/20px 20px; }.container main .main-left .person-info .detail .item:nth-child(3) {background: url(./images/link.png) no-repeat 0 8px/20px 20px; }.container main .main-left .person-info .detail .item:nth-child(4) {background: url(./images/tag.png) no-repeat 0 8px/20px 20px; }.container main .main-left .person-info .more {height: 36px;display: flex;align-items: center;justify-content: center; }.container main .main-left .person-info .more .text {font-size: 12px;color: #333;margin-right: 4px; }.container main .main-left .person-info .more .right-icon {width: 4px;height: 7px;background: url(./images/arrow-right.png) no-repeat center/contain; }.container main .main-left .ranking {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px;background: #fff;width: 300px;margin-top: 15px; }.container main .main-left .ranking .title {height: 39px;display: flex;justify-content: space-between;align-items: center;font-size: 14px;font-weight: 500;color: #333;padding: 0 16px; }.container main .main-left .ranking .title .name {font-weight: 500; }.container main .main-left .ranking .title .love {font-weight: normal; }.container main .main-left .ranking .title .love .lovenum {color: #ff830a;font-size: 14px; }.container main .main-left .ranking .flower {padding: 12px 16px 11px;border-top: 1px solid #f2f2f5;font-size: 12px;color: #333333; }.container main .main-left .ranking .flower .fl-info {margin-bottom: 11px;display: flex;justify-content: space-between; }.container main .main-left .ranking .flower .fl-info .fl-info-avatar {width: 50px;height: 50px;border-radius: 50%;background: url(./images/avatar.png) no-repeat center; }.container main .main-left .ranking .flower .fl-info .fl-info-text {margin-bottom: 9px; }.container main .main-left .ranking .flower .fl-info .fl-info-text > b {font-size: 14px; }.container main .main-left .ranking .flower .fl-info .fl-info-btn {padding: 0 10px;width: fit-content;display: flex;justify-content: center;align-items: center;height: 26px;color: #fff;border-radius: 2px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);background-color: #ff8140;border: 1px solid #f77c3d; }.container main .main-left .ranking .flower .fl-rule {margin-bottom: 6px;color: #808080; }.container main .main-left .ranking .flower .fl-ranking a {color: #eb7350;float: right;text-decoration: none; }.container main .main-left .relation {width: 300px;margin: 0 auto;margin-top: 15px;box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px;background: #fff; }.container main .main-left .relation > .title {height: 39px;display: flex;align-items: center;font-size: 14px;font-weight: 500;color: #333;padding: 0 16px; }.container main .main-left .relation .relation-container {border-top: 1px solid #f2f2f5;border-bottom: 1px solid #d9d9d9;padding: 0 16px; }.container main .main-left .relation .relation-container .title {font-size: 14px;font-weight: 500;color: #333333;margin: 13px 0 9px; }.container main .main-left .relation .relation-container .follow-list,
.container main .main-left .relation .relation-container .fans-list {margin-bottom: 17px;display: flex;justify-content: space-between; }.container main .main-left .relation .relation-container .fans-list .item:nth-child(1) .avatar {background: url(./images/fan-avatar-1.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .fans-list .item:nth-child(2) .avatar {background: url(./images/fan-avatar-2.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .fans-list .item:nth-child(3) .avatar {background: url(./images/fan-avatar-3.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .fans-list .item:nth-child(4) .avatar {background: url(./images/fan-avatar-4.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .follow-list .item:nth-child(1) .avatar {background: url(./images/focus-avatar-1.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .follow-list .item:nth-child(2) .avatar {background: url(./images/focus-avatar-2.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .follow-list .item:nth-child(3) .avatar {background: url(./images/focus-avatar-3.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .follow-list .item:nth-child(4) .avatar {background: url(./images/focus-avatar-4.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .item {width: 50px;flex: none;text-align: center; }.container main .main-left .relation .relation-container .item .avatar-tag {width: 50px;position: relative;margin-bottom: 9px; }.container main .main-left .relation .relation-container .item .avatar {width: 50px;height: 50px;border-radius: 50%; }.container main .main-left .relation .relation-container .item .tag-blue {position: absolute;bottom: -5px;right: -1px;width: 24px;height: 24px;background: url(./images/v-circle-blue.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .item .tag-red {position: absolute;bottom: -5px;right: -1px;width: 24px;height: 24px;background: url(./images/v-circle-red.png) no-repeat center/contain; }.container main .main-left .relation .relation-container .item .name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #333; }.container main .main-left .relation .more {height: 36px;display: flex;align-items: center;justify-content: center; }.container main .main-left .relation .more .text {font-size: 12px;color: #333;margin-right: 4px; }.container main .main-left .relation .more .right-icon {width: 4px;height: 7px;background: url(./images/arrow-right.png) no-repeat center/contain; }.container main .main-right .works {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px;background: #fff;margin-bottom: 15px; }.container main .main-right .works .title {height: 35px;display: flex;justify-content: space-between;align-items: center;font-size: 14px;font-weight: 500;color: #333;padding: 0 16px; }.container main .main-right .works .work-list {border-top: 1px solid #f2f2f5;border-bottom: 1px solid #d9d9d9;padding: 5px 6px;display: flex;justify-content: space-between;font-size: 0; }.container main .main-right .works .work-list .item {display: flex; }.container main .main-right .works .work-list .item .cover {position: relative; }.container main .main-right .works .work-list .item .cover img {width: 142px;height: 142px; }.container main .main-right .works .work-list .item .cover .play-icon {width: 26px;height: 28px;position: absolute;bottom: 14px;right: 10px;background: url(./images/play-icon.png) no-repeat center/contain; }.container main .main-right .works .work-list .item .info {width: 149px;box-sizing: border-box;background: #f2f2f5;position: relative;padding: 8px 10px 9px; }.container main .main-right .works .work-list .item .info .info-title {font-size: 14px;color: #333333; }.container main .main-right .works .work-list .item .info .text {font-size: 12px;color: #808080; }.container main .main-right .works .work-list .item .info .option {position: absolute;bottom: 9px;right: 9px;display: flex;align-items: center; }.container main .main-right .works .work-list .item .info .option .praised-icon {width: 12px;height: 13px;background: url(./images/praised.png) no-repeat center/contain;display: inline-block;margin-right: 4px; }.container main .main-right .works .work-list .item .info .option a {font-size: 12px;color: #333333;text-decoration: none; }.container main .main-right .works .work-list .item .info .option em {border-left: 1px solid #d9d9d9;height: 14px;margin: 0 7px 0 5px; }.container main .main-right .works .more {height: 36px;display: flex;align-items: center;justify-content: center; }.container main .main-right .works .more .text {font-size: 12px;color: #333;margin-right: 4px; }.container main .main-right .works .more .right-icon {width: 4px;height: 7px;background: url(./images/arrow-right.png) no-repeat center/contain; }.container main .main-right .messages .message {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);border-radius: 2px;background: #fff;margin-bottom: 15px; }.container main .main-right .messages .message .message-core {display: flex;padding: 25px 28px 6px; }.container main .main-right .messages .message .message-core .avatar {flex: none;width: 38px;height: 38px;border-radius: 50%;background: url(./images/avatar.png) no-repeat center/contain; }.container main .main-right .messages .message .message-core .detail {flex: 1;margin-left: 15px; }.container main .main-right .messages .message .message-core .detail .info {display: flex;align-items: center;margin-bottom: 5px; }.container main .main-right .messages .message .message-core .detail .info .username {font-size: 14px;color: #333333;margin-right: 2px; }.container main .main-right .messages .message .message-core .detail .info .v-square-icon {width: 16px;height: 16px;background: url(./images/v-square.png) no-repeat center/contain;margin-right: 4px; }.container main .main-right .messages .message .message-core .detail .info .level-icon {width: 16px;height: 16px;background: url(./images/level.png) no-repeat center/contain;margin-right: 4px; }.container main .main-right .messages .message .message-core .detail .info .flag-icon {width: 16px;height: 16px;background: url(./images/flag.png) no-repeat center/contain;margin-right: 4px; }.container main .main-right .messages .message .message-core .detail .info .panda-icon {width: 16px;height: 16px;background: url(./images/panda.png) no-repeat center/contain;margin-right: 4px; }.container main .main-right .messages .message .message-core .detail .info .v-blue-icon {width: 16px;height: 16px;background: url(./images/v-blue.png) no-repeat center/contain;margin-right: 4px; }.container main .main-right .messages .message .message-core .detail .text {margin-bottom: 5px;font-size: 12px;color: #808080; }.container main .main-right .messages .message .message-core .detail .detail-core .text {font-size: 14px;color: #333333; }.container main .main-right .messages .message .message-core .detail .detail-core .text a {font-size: 14px;color: #eb7350;text-decoration: none; }.container main .main-right .messages .message .message-core .detail .detail-core .text .heart-icon {vertical-align: -4px;display: inline-block;width: 18px;height: 18px;background: url(./images/heart-3d.png) no-repeat center/contain; }.container main .main-right .messages .message .message-core .detail .detail-core .pic-list {font-size: 0;width: 350px; }.container main .main-right .messages .message .message-core .detail .detail-core .pic-list img {width: 110px;height: 110px;margin: 5px 5px 0 0; }.container main .main-right .messages .message .message-core .detail .detail-core .fresh-news {margin-top: 4px;display: flex;align-items: center; }.container main .main-right .messages .message .message-core .detail .detail-core .fresh-news .fresh-news-icon {width: 16px;height: 18px;margin-right: 6px;background: url(./images/fresh-news.png) no-repeat center/contain; }.container main .main-right .messages .message .message-core .detail .detail-core .fresh-news .text {font-size: 12px;color: #eb7350; }.container main .main-right .messages .message .message-core .detail .repeat-message {margin: 0 -28px -6px -80px;padding: 9px 25px 0 80px;background: #f2f2f5;font-size: 12px;color: #333333; }.container main .main-right .messages .message .message-core .detail .repeat-message .info {display: flex;align-items: center; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .repeat-text a {color: #eb7350;text-decoration: none; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .repeat-text .heart-icon {vertical-align: -2px;display: inline-block;width: 14px;height: 14px;background: url(./images/heart.png) no-repeat center/contain; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .pic {margin-top: 6px; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .pic img {width: 167px;height: 223px; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .addition {display: flex;justify-content: space-between; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .addition .text {font-size: 12px;color: #808080; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .addition .message-option {height: fit-content; }.container main .main-right .messages .message .message-core .detail .repeat-message .repeat-core .addition .message-option .item {width: 76px;height: 13px; }.container main .main-right .messages .message .message-option {height: 39px;display: flex;align-items: center;border-top: 1px solid #f2f2f5; }.container main .main-right .messages .message .message-option .item {flex: 1;height: 22px;border-right: 1px solid #d9d9d9; }.container main .main-right .messages .message .message-option .item:last-child {border: none; }.container main .main-right .messages .message .message-option .item > a {height: 100%;display: flex;align-items: center;justify-content: center;font-size: 11px;color: #808080;text-decoration: none; }.container main .main-right .messages .message .message-option .item > a:hover {color: #eb7350; }.container main .main-right .messages .message .message-option .item [class$='-icon'] {margin-right: 8px;width: 12px;height: 12px; }.container main .main-right .messages .message .message-option .item .star-icon {background: url(./images/star-line.png) no-repeat center/contain; }.container main .main-right .messages .message .message-option .item .share-icon {background: url(./images/share-line.png) no-repeat center/contain; }.container main .main-right .messages .message .message-option .item .repeat-icon {background: url(./images/repeat-line.png) no-repeat center/contain; }.container main .main-right .messages .message .message-option .item .praised-icon {background: url(./images/praised-line.png) no-repeat center/contain; }html,
body {height: 100%;margin: 0; }ul,
li {margin: 0;padding: 0; }li {list-style: none; }h1,
h2 {margin: 0; }p {margin: 0;padding: 0; }/* 浏览器都有自己的默认样式，以上部分为清除浏览器默认样式 */
.container {background: #5e7aa1 url(./images/body_bg_page.jpg) no-repeat center top/contain;padding-top: 30px; }.container main {width: 920px;margin: 15px auto 0 auto;padding-bottom: 165px;display: flex; }@media screen and (max-width: 900px) {.container .banner,
.container main {width: 600px; }.container .main-left {display: none; } }

Web实现：旧版微博个人页整体实现相关推荐

浏览器为低版本IE的时候的信息提示；旧版 Internet Explorer 升级提示页；旧版 Internet Explorer 淘汰行动
本部分内容来自:https://support.dmeng.net/ 旧版 Internet Explorer 升级提示页旧版 Internet Explorer 淘汰行动微软对旧版 Intern ...
应用迁移方案_Kubernetes如何成为迁移旧版应用程序的解决方案
应用迁移方案在互联网的早期,如果要启动应用程序,则必须购买或租用硬件. 这是一台物理服务器或服务器机架,并且每个应用程序需要一台服务器,因此非常昂贵. 在2001年,VMware推出了虚拟化软件,该 ...
web浏览器_2019版 web 浏览器现状
两天前,有感于微软放弃 Edgehtml 引擎,使用 Chromiun 取而代之的事件,我发表了一篇关于浏览器兴衰的文章.微软的此番作为被视为将 Chromium 与 Safari 的 webkit ...
iOS13升级后的第一感觉：旧版iPhone重生，并向您提供了20个隐藏功能！
iOS13升级后的第一感觉:旧版iPhone重生,并向您提供了20个隐藏功能! 伴随iPhone11系列的正式发售,苹果也面向全球果粉用户推送了iOS13正式版.作为每年一度的大版本系统更新,自然会带 ...
Python爬虫【二】爬取PC网页版“微博辟谣”账号内容(selenium同步单线程)
专题系列导引爬虫课题描述可见: Python爬虫[零]课题介绍 – 对"微博辟谣"账号的历史微博进行数据采集课题解决方法: 微博移动版爬虫 Python爬虫[一]爬取移 ...
Python爬虫【四】爬取PC网页版“微博辟谣”账号内容(selenium多线程异步处理多页面)
专题系列导引爬虫课题描述可见: Python爬虫[零]课题介绍 – 对"微博辟谣"账号的历史微博进行数据采集课题解决方法: 微博移动版爬虫 Python爬虫[一]爬取移 ...
Python爬虫【三】爬取PC网页版“微博辟谣”账号内容(selenium单页面内多线程爬取内容)
专题系列导引爬虫课题描述可见: Python爬虫[零]课题介绍 – 对"微博辟谣"账号的历史微博进行数据采集课题解决方法: 微博移动版爬虫 Python爬虫[一]爬取移 ...
python新旧特性过渡_网站改版时的一种新旧版过渡方案
网站改版时,需要考虑一个周全的过渡方案,其中不容忽视的一点就是对旧版的处理问题.即使借助完美的数据迁移方案可以使新版从内容上完全取代旧版,但我们仍然不应该立即彻底废除掉旧版,因为: 1.网民有可能通过 ...
再见！微软宣布终止对旧版 Microsoft Edge 浏览器的支持
微软宣布自 2021 年 3 月 9 日起终止对旧版 Microsoft Edge(Microsoft Edge Legacy)浏览器的支持. 旧版 Microsoft Edge 是基于 EdgeHT ...

Web实现：旧版微博个人页整体实现

Web实现：旧版微博个人页整体实现相关推荐

最新文章

热门文章