微博已经改版了，这部分代码还是很久之前写的，旧版的个人主页，分享一下。
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">
<input
type="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">
<img
src="./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">
<img
src="./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">
<img
src="./images/pic1.jpg"
alt=""
/>
<img
src="./images/pic2.jpg"
alt=""
/>
<img
src="./images/pic3.jpg"
alt=""
/>
<img
src="./images/pic4.jpg"
alt=""
/>
<img
src="./images/pic5.jpg"
alt=""
/>
<img
src="./images/pic6.jpg"
alt=""
/>
<img
src="./images/pic7.jpg"
alt=""
/>
<img
src="./images/pic8.jpg"
alt=""
/>
<img
src="./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; } }
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
