<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="global.css"/>
<script src="css/auto-size.js"></script>
</head>
<body>
<!-- 导航-->
<header>
<div class="pic">
<img src="img/avatar.png" />
</div>
<div class="loginbar">
<p>k欧巴</p>
<p><em>V1</em><span>至尊会员</span></p>
</div>
<a href="#">></a>
</header>
<!-- 内容-->
<div class="box">
<!-- 想看看过影评话题-->
<div class="heart">
<ul>
<li>
<i></i>
<p>想看<span>99+</span></p>
</li>
<li>
<i></i>
<p>看过<span>99+</span></p>
</li>
<li>
<i></i>
<p>评影<span>99+</span></p>
</li>
<li>
<i></i>
<p>话题<span>99+</span></p>
</li>
</ul>
</div>
<!-- 我的订单-->
<div class="submenu">
<p>我的订单</p>
<p>全部 <a href="#">></a> </p>
</div>
<div class="menu">
<ul>
<li>
<i></i>
<p>未消费</p>
</li>
<li>
<i></i>
<p>待付款</p>
</li>
<li>
<i></i>
<p>待评价</p>
</li>
<li>
<i></i>
<p>退款</p>
</li>
</ul>
</div>
<div class="shop">
<ul>
<li>
<p>我的消息</p>
<a href="#">></a>
</li>
<li>
<p>我的收藏</p>
<a href="#">></a>
</li>
<li>
<p>会员中心</p>
<a href="#">></a>
</li>
<li>
<p>我的成就</p>
<a href="#">></a>
</li>
</ul>
</div>
</div>
<footer>
<ul>
<li>
<i></i>
</li>
<li>
<i></i>
</li>
<li>
<i></i>
</li>
<li>
<i></i>
</li>
</ul>
</footer>
</body>
</html>
css装饰
body{
background-color:#f5f5f5 ;
}
/*导航*/
header{
width: 100%;
height:3.36rem;
background-color:#d33e37;
display: flex;
align-items: center;
}
a{
text-decoration:none;
}
.pic{
width: 1.87rem;
height: 1.87rem;
/*outline: 1px solid red;*/
background: url("img/loading_2.e3d934bf_02.png") no-repeat;
background-size: 100%;
margin-left:.57rem ;
}
.pic img{
width: 100%;
}
.loginbar p:first-child{
font-size:.35rem;
color: white;
margin-left: 1.2rem;
}
.loginbar p:last-child{
width: 2.3rem;
font-size:.3rem;
border: .01rem solid ;
border-radius:.53rem;
color:white;
margin-left: .55rem;
text-align: center;
margin-top: .2rem;
}
header a{
color: white;
margin-left:4.5rem;
font-family:"simsun";
}
/*内容*/
.box{
width: 100%;
height: 11.74rem;
/*outline: 0.01rem solid red;*/
}
/*想看看过影评话题*/
.heart{
width: 100%;
height:2.14rem;
/*outline: 0.01rem solid red;*/
background-color: white;
}
.heart ul{
display: flex;
padding: .35rem 0;
}
.heart li{
flex-grow: 1;
text-align: center;
}
.heart li:not(:last-child){
border-right: 1px solid #F1F1F1;
}
.heart li p{
font-size: 0.37rem;
font-weight: bold;
}
.heart li i{
display: inline-block;
width: .7rem;
height: .65rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
.heart li:nth-child(2) i{
width: 1rem;
background-position:-1.69rem 0;
}
.heart li:nth-child(3) i{
background-position: -2.82rem 0;
}
.heart li:nth-child(4) i{
width:.56rem;
background-position: -0.96rem 0;
}
/*我的订单*/
.submenu{
width:100%;
height:1.36rem;
margin-top: 0.41rem;
background-color: white;
border-bottom: 0.01rem solid #f5f5f5;
display: flex;
justify-content: space-between;
}
.submenu p{
font-size: 0.44rem;
padding: .4rem;
font-weight: bold;
}
.submenu p:last-child{
color:#989898;
font-size: 0.35rem;
}
.submenu p a{
color:#989898;
}
/*未消费待付款待评价退款*/
.menu{
width: 100%;
height:1.9rem;
background-color: white;
}
.menu ul{
display: flex;
/*padding: .35rem 0;*/
}
.menu li{
flex-grow: 1;
text-align: center;
}
.menu li p{
font-size: 0.3rem;
font-weight: bold;
}
.menu li i{
display: inline-block;
width: .66rem;
height: .66rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
.menu li:first-child i{
background-position:0 -0.77rem;
}
.menu li:nth-child(2) i{
width: 0.73rem;
background-position:-1rem -0.77rem;
}
.menu li:nth-child(3) i{
width: 0.67rem;
background-position: -1.88rem -0.77rem;
}
.menu li:nth-child(4) i{
width:.65rem;
background-position: -2.87rem -0.77rem;
}
/*我的消息我的收藏。。。。。*/
.shop ul{
width: 100%;
height:5.43rem;
/*outline: 0.01rem solid red;*/
margin-top: 0.47rem;
}
.shop li{
font-size:0.43rem;
font-weight: bold;
display: flex;
justify-content: space-between;
}
.shop li a{
font-family: "simsun";
color: #a5a5a5;
margin-top: 0.48rem;
margin-right:0.48rem;
}
.shop li p{
margin-top: 0.48rem;
margin-left: 0.47rem;
}
.shop li:first-child{
height:1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(2){
height:1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(3) {
height: 1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
.shop li:nth-child(4) {
height: 1.4rem;
border-bottom: 0.01rem solid #e4e4e4;
background-color: white;
}
/*脚部*/
footer{
width: 100%;
height: 1.51rem;
/*outline: 0.01rem solid red;*/
/*position:fixed;*/
margin-top: 0.49rem;
}
footer ul{
display: flex;
justify-content: space-around;
}
footer li{
flex-grow: 1;
text-align: center;
margin-top: 0.26rem;
}
footer li i{
display: inline-block;
width: .78rem;
height:1.14rem;
background: url("img/icon.png");
background-size: 5rem 3rem;
}
footer li:first-child i{
background-position:0 -1.58rem;
}
footer li:nth-child(2) i{
background-position:-0.96rem -1.58rem;
}
footer li:nth-child(3) i{
background-position:-2.07rem -1.58rem;
}
footer li:nth-child(4) i{
width: 0.8rem;
background-position:-2.95rem -1.58rem;
}
说实话用这个布局方法比浮动什么的好多了又快捷又方便
时间： 2024-10-19 16:14:42