页面效果大致如下：
首页效果：
“收藏夹”页面如下：
点击收藏夹页面中的“模块二”效果：
“关注”页面：
“粉丝”页面：
大致页面轮廓就是这样，后期细节还有待加强，代码如下：
HTML代码：
个人中心
哈哈哈哈哈哈
@安娜
女
lv.2
知名搞笑博主
不是因为做不到才没有信心，而是因为没有信心下做不到，路从来都是自己的走出来的。
- 模块一
- 模块二
- 模块三
- 模块四
相册
我的收藏
默认收藏夹
11
默认收藏夹
11
- 模块
- 模块二
- 模块三
- 模块四
模块一内容
模块二内容
模块三内容
模块四内容
设置
我的粉丝
粉丝
22
黑名单
22
全部粉丝
小学小学寻
@安娜
呀呀呀呀，哈哈哈
我的关注
全部关注
33
特别关心
1
自定义分组
33
全部关注
嘿嘿
@琳达
hard and hard
/*
2017年12月14日整理
公用css样式：包含头部，导航，主容器，以及一些公用样式如：m-t-10 等于 margin-top:10px
*/
*{
margin: 0;
padding: 0;
}
body{
background:#e6ecf0;
}
/*全局公用样式*/
.f-l{
float: left;
}
.f-r{
float: right;
}
.p-r-25{
padding-right: 25px;
}
.m-t--10{
margin-top: 10px;
}
.l-h-60{
line-height:60px;
}
.b-f{
background: #ffffff;
}
.m-t-50{
margin-top: 50px;
}
.m-l-30{
margin-left: 30px;
}
.m-l-20{
margin-left: 20px;
}
.p-l-20{
padding-left: 20px;
}
/*
顶部样式
*/
.head{
height: 250px;
/*background-image: url("../img/head.png");*/
background: #999999;
background-size: 100% 100%;
}
.banner{
width: 100%;
height: 220px;
margin: 0 auto 0 auto;
}
.img-round{
width: 120px;
height:120px;
border-radius: 120px 120px 120px 120px;
}
.banner table{
padding-top: 80px;
margin-left: 30px;
}
.nickname{
font-family: 微软雅黑;
font-size: 24px;
color: #ffffff;
font-weight: bold;
}
.username{
font-family: 微软雅黑;
font-size: 14px;
color: #EEEEEE;
line-height: 30px;
}
.sex{
font-family: 微软雅黑;
font-size: 14px;
color: #ffffff;
text-align: center;
/*性别女背景色*/
background: #fcb9ba;
/*
!*性别男背景色*!
background: #00b7ee;
*/
width: 22px;
height:22px;
border-radius: 22px 22px 22px 22px;
}
.lv{
font-family: 微软雅黑;
font-size: 14px;
color: #ffffff;
text-align: center;
background: #f5894e;
height:0.1px;
border-radius: 8px 8px 8px 8px;
}
.school{
font-family: 微软雅黑;
font-size: 14px;
color: #ffffff;
/*font-weight: bold;*/
text-align: center;
background: #08c25b;
width: 9%;/*宽度不能根据字数变化而变化，把div改成span可以解决，但会有一些小问题。待定*/
height: 22px;
border-radius: 8px 8px 8px 8px;
margin-left: 15px;
}
.signature{
font-family: 微软雅黑;
font-size: 16px;
color: #ffffff;
font-weight: bold;
line-height: 50px;
}
/*
导航样式*/
.outer {
width:100%;
}
ul{
list-style-type: none;
}
#tab1 {
overflow:hidden;
zoom:1;
background:#fff;
height: 50px;
}
#tab1 li {
float:left;
color:#333333;
height:48px;
cursor:pointer;
line-height:60px;
padding:0 35px;
}
#tab1 li.current {
border-bottom: solid 2px #00a0e9;
}
#content {
border-top-width:0;
}
#content ul {
line-height:25px;
display:none;
margin:0 30px;
padding:10px 0;
}
.nav-text{
font-family: 微软雅黑;
font-size: 16px;
color: #ededed;
}
/*二级导航*/
.cnt-nav {
overflow:hidden;
zoom:1;
background:#fff;
/*height: 50px;*/
/*border:1px solid #000;*/
}
.cnt-nav dt {
float:left;
color:#333333;
height:48px;
cursor:pointer;
line-height:48px;
padding:0 70px;
}
/*
主容器*/
.contain{
width: 1170px;
height: 600px;
margin: 20px auto 0 auto;
/*background: #08c25b;*/
}
.cnt{
width: 1170px;
/*height: 600px;*/
background: #e6ecf0;
/*margin: 20px auto 0 auto;*/
}
/*二级容器*/
/*#tab2 {
overflow:hidden;
zoom:1;
background:#fff;
height: 50px;
}*/
/*#tab2 dt {
float:left;
color:#333333;
height:48px;
cursor:pointer;
line-height:60px;
padding:0 35px;
}*/
#tab2 dt.current {
border-bottom: solid 2px #00a0e9;
}
#cnt2 {
border-top-width:0;
width: 740px;
}
#cnt2 p{
display:none;
}
.cnt3{
width: 740px;
}.fan-img{
width: 80px;
height:80px;
border-radius: 80px 80px 80px 80px;
}
.fan-nickname{
font-family: 微软雅黑;
font-size: 20px;
color: #5a5a5a;
font-weight: bold;
}
.fan-username{
font-family: 微软雅黑;
font-size: 12px;
color: #5a5a5a;
line-height: 30px;
}
.fan-signature{
font-family: 微软雅黑;
font-size: 14px;
color: #828282;
font-weight: bold;
line-height: 50px;
}
.all-fan{
font-family: 微软雅黑;
font-size: 18px;
color: #5e5e5e;
}