MrThinco5年前
<!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">
<title>Document</title>
<style>
body,ul,li{margin: 0;padding: 0;}
body{background-image: url(img/bg.png);background-repeat: no-repeat;background-color: #e9e9e9;background-position: 0 41px;}
.top{width: 100%;height: 41px;background-color: #000;position: fixed;}
.top > div{width: 90px ;height: 35px;overflow: hidden; float: left;}
.top ul{list-style: none;}
.top ul > li{float: left;margin: auto 20px;color: white;line-height: 35px;}
.container{width: 1100px;height: 1000px;position: absolute;top: 41px;left: 0px;right: 0px;margin: auto;z-index: -1;}
.container .header{height: 120px;}
.container .header .header_img{margin-left:10px;padding: 5px;height: 100px;width: 100px;float: left;background-color: honeydew;}
.container .header .header_right{height: 95px;margin-left:150px;}
.container .header .header_right .vip1{width: 60px;height: 30px;}
.container .header .header_right .vip2{width: 76px;height: 26px;}
.container .header .header_right .header_ul ul{list-style: none;}
.container .header .header_right .header_ul ul > li{float: left;margin: 20px 20px;}
.container .main{position: relative;} /*定位父级*/
.container .main .left{position: absolute;top: 0;left: 0;height: 520px;width: 170px;background-color: #2A282A;}
.container .main .left span{margin-left: 10px;color: #7B7678;}
.container .main .left ul{list-style: none;}
.container .main .left ul > li{margin: 10px 30px;color: #7B7678;}
.container .main .right{position: absolute;top: 0;right: 0;height: 520px;width: 300px;background-color: #2A282A;color: #7B7678;}
.container .main .right img{width: 66px;height: 66px;border-radius: 10px;margin: 10px;}
.container .main .content{height: 520px;margin-left: 180px;margin-right: 310px;padding-left: 10px;background-color: #2A282A;color: #98969A;}
.container .main .content .header_img{width: 48px;height: 48px;border-radius: 100%; border: 3px solid #eee; overflow: hidden;float: left;}
.container .main .content .box1{margin: 20px auto;}
.container .main .content .box1 > div{margin-left: 70px;}
.container .main .content .box1 > div > p{margin: 0px;}
.container .main .content .box2{margin-left: 10px;}
.container .main .content .box2 .info_img{width: 322px; height: 203px;margin-left: 60px;}
.container .footer{height: 50px;background-color: lightgray; }
</style>
</head>
<body>
<!-- 顶部的固定导航区 -->
<div class="top">
<div>
<img src="img/ico.png" height="40px;" alt="">
</div>
<ul>
<li>个人中心</li>
<li>我的主页</li>
<li>好友</li>
<li>游戏</li>
<li>装扮</li>
</ul>
</div>
<!-- 主体内容部分 -->
<div class="container">
<!-- 主体的头部 -->
<div class="header">
<div class="header_img"><img src="./img/photo.gif" alt=""></div>
<div class="header_right">
<div>
<span>多宝多</span><br/>
<img class="vip1" src="./img/vip1.png" alt=""><span>成长值1成长速度-10点/天0%</span><img class="vip2" src="./img/vip2.png" alt="">
</div>
<div class="header_ul">
<ul>
<li>个人中心</li>
<li>我的主页</li>
<li>好友</li>
<li>游戏</li>
<li>装扮</li>
<li>设置</li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 主体左侧 -->
<div class="left">
<span>好友动态</span>
<ul>
<li>好友动态</li>
<li>特别关心</li>
<li>与我相关</li>
<li>那年今日</li>
<li>腾讯课堂</li>
<li>游戏应用</li>
</ul>
</div>
<!-- 主体内容区 -->
<div class="content">
<span>好友动态</span>
<div class="box1">
<img class="header_img" src="./img/user.jpg" alt="">
<div>
<p>天生是只狗</p>
<p>2017年12月02日</p>
</div>
</div>
<div class="box2">
<p> 对这个世界如果你有太多的抱怨
跌倒了 就不敢继续往前走
为什么 人要这么的脆弱 堕落
请你打开电视看看
多少人为生命在努力勇敢的走下去
我们是不是该知足 珍惜一切就算没有拥有
还记得 你说家是唯一的城堡随着稻香河流继续奔跑
微微笑 小时候的梦我知道
不要哭 让萤火虫带着你逃跑
乡间的歌谣 永远的依靠
回家吧 回到最初的美好
</p>
<img class="info_img" src="./img/jb.jpg" alt="">
<p>来自：IPhone X</p>
<div style="color: white;">
<span>浏览：108次 </span>
<span style="margin-left: 250px;">
<a style="text-decoration: none;margin: 0px 20px;color: white;" href="">转发</a>
<a style="text-decoration: none;margin: 0px 20px;color: white;" href="">点赞</a>
<a style="text-decoration: none;margin: 0px 20px;color: white;" href="">评论</a>
</span>
</div>
</div>
</div>
<!-- 主体右侧 -->
<div class="right">
<span>最近访客</span>
<div class="box1">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
<img class="header_img" src="./img/frend.jpg" alt="">
</div>
</div>
</div>
<!-- 主体底部 -->
<div class="footer">主体底部</div>
</div>
</body>
</html>
0
