2018-07-08
2018-07-08 本文已影响42人
璐璐熙可
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>最右主界面</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/aui.css" /> -->
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
/*头部样式 start*/
header{
position: fixed;
top:0;
width: 100%;
/*border:1px solid red;*/
height:2.25rem;
line-height:2.25rem;
background: #fff;
}
header img{
width:1rem;
padding-top:0.5rem;
}
header .item{
min-height: 2.25rem;
position: absolute;
right: 5rem;
left: 5rem;
}
header li{
float:left;
width:33%;
text-align: center;
}
header li a{
color:#333;
}
header li.first a{
color:blue;
}
/*头部样式 end*/
/*主体内容 start*/
main{
margin-top:2rem;
}
main img.pic{
width: 2rem;
height:2rem;
border-radius: 50%;
}
main img.pic-01{
width: 0.75rem;
height:0.75rem;
position: absolute;
top:0.75rem;
right:0;
}
main span.text{
margin-left:0.75rem;
position: absolute;
top:0.5rem;
}
main .wrap{
position: relative;
}
section.first p{
color:#000;
font-size: 0.8rem;
}
section a.btn{
display: block;
background: blue;
border-radius: 2rem;
width:3rem;
/*height:1.5rem;
line-height: 1.5rem;*/
color:#fff;
text-decoration: none;
font-size: 0.6rem;
text-align: center;
padding:0.25rem;
}
.second .phota{
position: relative;
}
.second p{
position: absolute;
top:1.5rem;
padding:0 0.75rem;
font-size:0.8rem;
}
.third .share{
position: relative;
font-size:0.7rem;
}
.third .share .tom-img{
position: absolute;
top:0;
left:0;
width:1rem;
height:1rem;
}
.third .share .top-img{
position: absolute;
top:0;
left:4rem;
}
.third .share .to-img{
position: absolute;
top:0;
left:13rem;
}
.third .share .bo-img{
position: absolute;
top:0;
left:16rem;
}
.share .sx{
position: absolute;
top:0;
left:1.5rem;
}
.share .sz{
position: absolute;
top:0;
left:5.5rem;
}
.share .swx{
position: absolute;
top:0;
left:14.5rem;
}
/*主体内容 end*/
/*底部导航 start*/
footer ul{
position: fixed;
width: 100%;
height:50px;
bottom:0;
background: #fff;
}
footer li{
float: left;
width: 25%;
text-align: center;
}
footer img{
width:1.25rem;
height:1.25rem;
display: block;
margin:0 auto;
}
footer a{
color:#000;
font-size: 0.6rem;
}
/*底部导航 end*/
</style>
</head>
<body>
<header class="aui-padded-l-15 aui-padded-r-15 clearfix">
<img class="fl" src="../image/search.png" alt="">
<ul class="fl item clearfix">
<li class="first"><a href="#">推荐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">图文</a></li>
</ul>
<img class="fr" src="../image/edit.png" alt="">
</header>
<main class="aui-padded-15">
<section class="first aui-padded-b-15">
<div class="wrap clearfix">
<img class="fl pic" src="../image/people.png" alt="">
<span class="fl text">璐璐</span>
<img class="fr pic-01" src="../image/close.png" alt="">
</div>
<p class="aui-padded-t-15 aui-padded-b-15">我想知道你在干什么</p>
<div class="photo">
<img src="../image/photo.png" alt="" width="100%">
</div>
</section>
<section class="second aui-padded-b-15">
<a href="#" class="btn">内涵图</a>
<div class="phota">
<img src="../image/bj.png" alt="" width="100%">
<p>
那年夏天，心情很好，我们一起去湖边玩啥,那年夏天，心情很好
</p>
</div>
</section>
<section class="third aui-padded-b-15">
<a class="share">
<img class="tom-img" src="../image/share.png" alt="">
<span class="sx">263</span>
<img class="tom-img top-img" src="../image/top.png" alt="">
<span class="sx sz">44</span>
<img class="tom-img top-img to-img" src="../image/to.png" alt="">
<span class="sx sz swx">128</span>
<img class="tom-img top-img to-img bo-img" src="../image/bo.png" alt="">
</a>
</section>
<section class="first aui-padded-b-15 aui-padded-t-15">
<div class="wrap clearfix">
<img class="fl pic" src="../image/people.png" alt="">
<span class="fl text">璐璐</span>
<img class="fr pic-01" src="../image/close.png" alt="">
</div>
<p class="aui-padded-t-15 aui-padded-b-15">我想知道你在干什么</p>
<div class="photo">
<img src="../image/photo.png" alt="" width="100%">
</div>
</section>
</main>
<footer>
<ul class="list clearfix">
<li>
<a href="#">
<img src="../image/right-on.png" alt="">
<div>最右</div>
</a>
</li>
<li>
<a href="#">
<img src="../image/talk.png" alt="">
<div>跟拍</div>
</a>
</li>
<li>
<a href="#">
<img src="../image/introduce.png" alt="">
<div>消息</div>
</a>
</li>
<li>
<a href="#">
<img src="../image/my.png" alt="">
<div>我的</div>
</a>
</li>
</ul>
</footer>
</body>
</html>
