发表于： 2019-11-02 23:15:25
1 1060
今天做的事
今天把任务5做了90%
本来做完了结果发现还要做一个头部固定
明天再做吧
效果如图
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="task5.css">
</head>
<body>
<div class="boss">
<div class="one">
<div class="one1">
<img src="../img/123.png" height="37" width="22"/>
</div>
<div class="one2">
个人主页
</div>
</div>
<div class="two">
<div class="two1">
<img src="img/矢量智能对象2.png" height="120" width="120"/>
</div>
<div class="two2">
高素雅 51岁
<div class="two3">
<img src="img/Shape 4.png" height="19" width="14"/> 北京.通州.果园
</div>
</div></div>
<div class="there">
<div class="there2" > |
</div>
<div class="there1">
专业技能
</div>
</div>
<div class="four" >
</div>
<div class="five">
<div class="five1">
<img src="img/形状 4 拷贝 3.png" height="18" width="18"/> 住家
<div class="five2">
|
</div>
<div class="five3">
<img src="img/形状 4 拷贝 3.png" height="18" width="18"/> 不含餐
</div>
</div>
<div class="four1">
</div>
</div>
<div class="six">
从业年限 |
<div class="six1"> 0~3年
</div>
</div>
<div class="four1">
</div>
</div>
<div class="six">
工作时间 |
<div class="six1"> 全天
</div>
</div>
<div class="four1">
</div>
<div class="six">
服务价格 |
<div class="six2"> 25元/小时
</div>
</div>
<div class="four1">
</div>
<div class="six">
<div class="six4">
自我介绍 |
</div>
<div class="six3"> 可以洗衣、做饭、照顾老人。在护 工方面有5年的经验，经验丰富。
</div>
</div>
</div>
<div class="four" ></div>
<div class="seven">
<div class="seven1">
留言</div>
<div class="seven2">
电话联系
</div>
</div>
</div>
</body>
</html>
body{
margin: 0;
background: white;
min-width: 400px;
}
.one{
background: #5fc0cd;
height: 50px;
display: flex;
justify-content: center;
flex-grow:1;
align-items: center;
position: absolute;
width: 100%;
}
.one1{
flex-grow:1;
margin-left: 10px;
}
.one2{
flex-grow:1;
color: white;
font-size: 25px;}
.two{display: flex;
align-items: center;
background-image:url("img/图层 2.png");
height: 300px;
weight: 100%;
background-size: 100% 100%;
}
.two1{
margin-left: 30px;
}
.two2{
margin-left: 80px;
color: white;
font-size: 22px;
}
.two3{
display: flex;
align-items: center;
font-size: 17px;
margin-top: 10px;
}
.there{
display: flex;
align-items: center;
background: white;
height: 70px;
}
.there2{
color: #5fc0cd;
margin-left: 15px;
font-size: 17px;
}
.there1{
margin-left: 25px;
font-size: 22px;
}
.four
{
weight:auto;
height: 1px;
background:#CDCAC6 ;
}
.five{
height: 70px;
}
.five1{
display: flex;
align-items: center;
margin-left: 42px;
height: 70px;
font-size: 22px;
}
.five3{display: flex;
align-items: center; font-size: 22px;}
.five2{
color:#CDCAC6;
}
.four1 {
weight:auto;
height: 1px;
background:#CDCAC6 ;
margin-left: 25px;
}
.six{
display: flex;
align-items: center;
margin-left: 42px;
height: 70px;
font-size: 22px;
color: #989494;
}
.six1{
font-size: 22px;
color:black;
}
.six2{ font-size: 22px;
color: #e26163;
}
.six3{ display: flex;
align-items: center;
height:70px;
font-size: 19px;
color:black;
}
.six4{
min-width: 120px;
}
.seven{
display: flex;
justify-content: center;
align-items: center;
margin-top: 800px;
}
.seven1{
display: flex;
margin-left: 30px;
width:50%;
height:60px;
border-radius:15px;
text-align: center;
border: 2px solid #5fc0cd;
justify-content: center;
color: #5fc0cd;
font-size: 22px; align-items: center;
}
.seven2{
display: flex;
background: #5fc0cd;
font-size: 22px;
width:50%;
height:60px;
border:2px solid ;
border-radius:15px;
text-align: center;
color: white;
justify-content: center;
margin-left: 30px;
align-items: center;
margin-right: 30px;
}
遇到的问题
对各种方法还不是很熟悉
收获
大体有了自己的思路
明天的计划
做完任务5
返回列表
评论