发表于： 2017-03-14 23:56:54
1 763
今天完成的事：
固定了背景图片和图片自适应，做了main部分的表单
明天计划的事：
继续完成任务5
问题：
main部分竖的滚动条设置。location和username还不能完全自适应。footer按钮的设置。
收获：
学习了flex的布局教程。
ul，li，ol标签的使用方法。
html的语义化等等。
完成情况如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>护工个人主页</title>
<style type="text/css">
html{
font-size: 62.5%;
}
body{
min-width: 320px;
max-width: 1080px;
}
body,p,ul,li{
margin: 0;
}
ul,li{
list-style: none;
}
header,footer{
width: 100%;
height: 6rem;
font-size: 3rem;
position: fixed;
text-align: center;
}
header{
color: #fff;
background:#68cdd5;
line-height: 6rem;
top: 0;
}
main{
position: fixed;
width: 100%;
top: 6rem;
bottom: 6rem;
overflow: hidden;
}
.user-section{
height: 32rem;
background: url("icon1.png") no-repeat center;
background-size: cover;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.user-iamge{
position: absolute;
width: 30%;
padding: 5% 0 5% 5%;
}
.user-info{
position: fixed;
width: 100%;
left: 30%;
}
.username{
font-size: 3rem;
padding-bottom: 1rem;
}
.location{
font-size: 2rem;
background: url("Shape.png") no-repeat left;
padding-left: 2.5rem;
}
.user-form{
font-size: 2rem;
}
.title{
padding-left: 3rem;
line-height: 10rem;
border-bottom: solid #ccc;
}
.title span{
padding: 0 3rem 0;
border-left: .5rem solid #5fc0cd;
}
.list{
padding-left: 3%;
}
.list li{
position: relative;
padding: 2rem;
min-height: 4rem;
line-height: 4rem;
border-bottom: solid #ccc;
overflow: auto;
}
.tag{
display:inline-block;
padding: 0 2rem 0 3rem;
background: url("star.png") no-repeat left center;
}
.label{
position: fixed;
border-right: solid #ccc;
width: 10%;
color: #aaa;
}
.item{
margin-left: 13%;
}
footer{
bottom: 0;
}
.box{
width: 100%;
float: left;
}
.leftbox{
float: left;
margin: 1% 0;
margin-left: 2%;
width: 46%;
height: 4rem;
color: #68cdd5;
background: #fff;
border: solid #68cdd5;
border-radius: 1rem;
line-height: 4rem;
}
.rightbox{
float: left;
margin: 1% 0;
margin-left: 2%;
width: 46%;
height: 4rem;
color: #fff;
background: #68cdd5;
border: solid #68cdd5;
border-radius: 1rem;
line-height: 4rem;
}
</style>
</head>
<body>
<header style="background-image:url(back.png);background-repeat:no-repeat;background-position: 2%;background-size: auto">
个人主页
</header>
<main>
<div class="user-section">
<div class="user-iamge"><img src="woman.png" style="max-width: 100%"></div>
<div class="user-info">
<p class="username">切格瓦拉 99岁</p>
<p class="location">古巴.哈瓦那.白宫</p>
</div>
</div>
<div class="user-form">
<div class="title"><span>专业技能</span></div>
<ul class="list">
<li>
<div class="tag">住家</div>
<div class="tag">不含餐</div>
</li>
<li>
<div class="label">从业年限</div>
<div class="item">0-3年</div>
</li>
<li>
<div class="label">工作时间</div>
<div class="item">全天</div>
</li>
<li>
<div class="label">服务价格</div>
<div class="item">5毛</div>
</li>
<li>
<div class="label">自我介绍</div>
<div class="item">专业膜法几十年,经验丰富。</div>
</li>
</ul>
</div>
</main>
<footer>
<div class="box">
<div class="leftbox">留言</div>
<div class="rightbox">电话联系</div>
</div>
</footer>
</body>
</html>
返回列表
评论