今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
任务五的基本完成
明天计划的事情:(一定要写非常细致的内容)
继续完成
遇到的问题:(遇到什么困难,怎么解决的)
遇到了我使用了固定定位的时候,上面的背景图片会出现浮动的情况,就是关于封闭标签的问题
收获:(通过今天的学习,学到了什么知识)
今天的学习让我学到了
z-index属性:表示谁压着谁。数值大的压盖住数值小的。
有如下特性:
(1)属性值大的位于上层,属性值小的位于下层。
(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。
(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用。
(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时,我们可以用这个z-index属性决定,谁处于最上方。
定义列表<dl>
里面又有着<dt>还有<dd>标签。那么这里面的<dt>标签是干嘛的呢?
<dt>就是列表的标题,是用来表达你要写的东西的题目,那么<dd>标签呢?
就是在列表的列表项,也就是说是你要描述的内容
也就是说<dt>是一个列表项,列出了有几个<dd>项目,一个<dt>是可以搭配很多的<dd>项目的
<dt><dd>都是容器级的标签,根据容器级的标签属性,里面什么都可以放,但是有一点要记住,你用的什么标签,不是 根据样子来决定的,而是根据语义来决定的,也就是说语义的本质上是结构
<table>标签是一个表格的标签,它的作用是,形成一个表格,可以在表格里面放东西,那么表格是又什么组成的呢?
是由每行<tr>然而每行的<tr>又是由什么组成的呢?答案是由<td>来组成的,那么<tr>就是行的意思,那么就是一个表格<table>是由每行<tr>来组成的,每行又是由<td>来组成的
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!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>
<link rel="stylesheet" type="text/css" href="task5.css">
</head>
<body>
<header>
<!-- <a class="return"></a> -->
<div class="arrow-left arrow-box">
<b class="left">
<i class="left-arrow1"></i>
<i class="left-arrow2">
</i></b>
</div>
<span>个人主页</span>
</header>
<div class="box2">
<div class="headportrait"></div>
<div class="name">高素雅
<span class="age">51岁</span>
<div>
<div class="coords"></div>
<div class="site">北京.通州.果园</div>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="skill">
<p>专业技能</p>
</div>
<div class="require">
<div class="box4">
<div class="pentagram1"></div>
<span class="require1">住家</span>
</div>
<div class="box5">
<div class="pentagram2"></div>
<span class="require2">不含餐</span>
</div>
</div>
<div class="experience">
<span class="experience1">工作年限</span>
<span class="experience2">0~3年</span>
</div>
<div class="time">
<span class="time1">工作时间</span>
<span class="time2">全天</span>
</div>
<div class="price">
<span class="price1">服务价格</span>
<span class="price2">25元/小时</span>
</div>
<div class="introduction">
<span class="introduction1">自我介绍</span>
<span class="introduction2">可以洗衣、做饭、照顾老人。在护
工方面有5年的经验,经验丰富。</span>
</div>
<div class="connection">
<button class="leaveword">留言</button>
<button class="phone">电话联系</button>
</div>
</div>
</body>
</html>
html{
font-size: 62.5%;
}
body{
margin: 0;
font-size: 2rem;
}
header{
height:4.4rem;
background-color: #5FC0CD;
text-align: center;
position: fixed;
width: 100%;
top:0;
}
.left{
position:absolute;
left:0;
top:1rem;
}
.left-arrow1,.left-arrow2{
position:absolute;
left:0;
border-top:10px transparent dashed;
border-left:10px transparent dashed;
border-bottom:10px transparent dashed;
border-right:10px white solid;
}
.left-arrow2{
left:4px;/*重要*/
border-right:10px solid #5FC0CD;
}
.arrow{
width: 1.5rem;
height: 1.5rem;
border-top: 3px solid white;
border-left: 3px solid white;
transform:rotate(-45deg);
display: inline-block;
margin-left: 3.5rem;
margin-top: 1.2rem;
float: left;
}
header span{
color: white;
line-height: 4rem;
margin-right: 6rem;
}
.box2{
background:url(./doctor.png) no-repeat;
height:16.3rem;
background-size:cover;
display: flex;
align-items: center;
margin-top: 4.4rem;
}
.headportrait{
background: url(./head\ portrait.png) no-repeat;
height: 8.45rem;
background-size:7rem;
width: 8.45rem;
margin-left: 1.5rem;
}
.name{
color: white;
margin-left: 2rem;
}
.age{
margin-left: 2rem;
}
.coords{
background: url(./Shape\ 4.png) no-repeat;
width: .9rem;
height: 1.15rem;
align-items: center;
background-size: cover;
display:inline-block;
vertical-align: middle;
}
.site{
font-size: 1rem;
margin-left: 2rem;
display: contents;
}
.box3{
height: 41.65rem;
}
.skill{
height: 5rem;
border: 1px solid #E1E5E7;
}
p{
border-left:4px solid #5FC0CD;
display: inline-block;
line-height: 2rem;
margin-left: 2rem;
padding-left: 1rem;
}
.require{
border-bottom: .5px solid #E1E5E7;
margin-left: 1.65rem;
line-height: 5rem;
height: 5rem;
font-size: 1.8rem;
}
.box4{
display: inline-block;
padding-left: 1rem;
border-right:1px solid #E1E5E7;
line-height: 2rem;
padding-right: 1rem;
}
.pentagram1{
background: url(./pentagram1.png) no-repeat;
display: inline-block;
width: 1.1rem;
height: 1.2rem;
background-size: contain;
margin-left: 3rem;
}
.box5{
display: inline-block;
}
.pentagram2{
display: inline-block;
background: url(./pentagram2.png) no-repeat;
width: 1.1rem;
height: 1.2rem;
background-size: contain;
}
.experience{
border-bottom:1px solid #EFF0F4;
height: 5rem;
line-height: 5rem;
margin-left: 1.65rem;
}
.experience1{
margin-left: 3.4rem;
border-right: 1px solid #E1E5E7;
padding-right: 1rem;
}
.experience2{
margin-left: 1.35rem;
}
.time{
border-bottom:1px solid #EFF0F4;
height: 5rem;
line-height: 5rem;
margin-left: 1.65rem;
}
.time1{
margin-left: 3.4rem;
border-right: 1px solid #E1E5E7;
padding-right: 1rem;
}
.time2{
margin-left: 1.35rem;
}
.price{
border-bottom:1px solid #EFF0F4;
height: 5rem;
line-height: 5rem;
margin-left: 1.65rem;
}
.price1{
margin-left: 3.4rem;
border: 1px solid #E1E5E7;
padding-right: 1rem;
border-top: 0;
border-left:0;
border-bottom: 0;
}
.price2{
margin-left: 1.35rem;
color: #E26163;
}
.introduction{
border-bottom:1px solid #EFF0F4;
height: 5rem;
display: flex;
margin-left: 1.65rem;
align-items: center;
}
.introduction1{
margin-left: 3.4rem;
border: 1px solid #E1E5E7;
padding-right: 1rem;
border-top: 0;
border-left:0;
border-bottom: 0;
word-break: keep-all;
}
.introduction2{
font-size: 1.4rem;
width: 40rem;
padding-left: 2rem;
}
.connection{
display: flex;
margin-top: 5rem;
width: 100%;
position: fixed;
top: 75%;
}
.leaveword{
width: 40%;
height: 4.4rem;
background-color: white;
border: 1px solid #5FC0CD;
color: #5FC0CD;
font-size: 100%;
border-radius: 5px;
margin: auto;
}
.phone{
width: 40%;
height: 4.4rem;
background-color: #5FC0CD;
border: 1px solid #5FC0CD;
color: white;
font-size: 100%;
border-radius: 5px;
margin: auto;
}
评论