发表于： 2018-10-29 21:38:44
1 804
今天完成的事情：今天完成了任务6的header和content，header用固定定位，flex布局，然后中间按钮要分两种底色分别倒角。
css：
header{
width : 100%;
height : 50px;
position : fixed;
top : 0;
background-color: #5fc0cd;
display : flex;
justify-content : space-between;
align-items : center;
}
.header-ico1{
width : 28px;
height: 32px;
margin: 10px;
}
.header-ico2{
width : 28px;
height : 32px;
background-image : url(sprites.png);
background-position: -29px 0;
margin : 10px;
}
.header-middle{
display : flex;
justify-content : center;
background-color: #55a8b3;
border-radius : 5px;
}
.header-button1{
border : none;
outline : none;
border-radius : 5px 0 0 5px;
color : #fff;
background-color: #55a8b3;
font-size : 20px;
}
.header-button2{
border : none;
outline : none;
border-radius : 5px;
background-color: #fff;
color : #5fc0cd;
font-size : 20px;
padding : 5px 10px;
}
html：
<header>
<div class="header-ico1"></div>
<div class="header-middle">
<button class="header-button1">找雇主</button>
<button class="header-button2">找护工</button>
</div>
<div class="header-ico2"></div>
</header>
content顶部用加了三个select标签，去掉边框和点击是样式，不过还没解决三等分居中问题，
css
.location{
width : 30%;
border : none;
border-right: 1px solid #e1e5e7;
outline : 0;
padding-left: 1%;
}
.content-top{
width : 100%;
height : 50px;
border-bottom: 1px solid #e1e5e7;
}
.content{
margin: 40px 0;
}
html：
<ul class="content">
<li>
<ul>
<li class="content-top">
<select class="location">
<option>所在地</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<select class="location">
<option>所在地</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<select class="location">
<option>所在地</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</li>
</ul>
content主体是列表标签ul和li，里面有flex布局，唯一问题是多余文字变省略号
css：
.item{
width : 100%;
border-bottom: 1px solid #e1e5e7;
font-size : 14px;
}
.item-1{
margin : 5px;
line-height: 21px;
color : #999999;
}
.date{
display : inline-block;
background-image : url(sprites.png);
width : 16px;
height : 16px;
background-position: -13px 0;
vertical-align : middle;
margin-right : 5px;
}
.item-2{
line-height : 21px;
display : flex;
justify-content: space-between;
margin : 5px;
padding-left : 25px ;
overflow : hidden;
text-overflow : ellipsis;
}
.span1{
overflow : hidden;
text-overflow: ellipsis;
}
.item-right{
display : flex;
justify-content: flex-end;
align-items : center;
color : #ff0000;
font-size : 16px;
}
.ico{
width : 10px;
height : 10px;
margin : 0 5px;
border-top : 2px solid #5fc0cd;
border-left: 2px solid #5fc0cd;
transform : rotate(135deg);
}
.add{
display : inline-block;
background-image : url(sprites.png);
width : 16px;
height : 16px;
background-position: 3px 0;
vertical-align : middle;
margin-right : 5px;
}
html：
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>25元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>35元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>45元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>45元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>55元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
<ul class="item">
<li class="item-1">
<div class="date"></div>
服务日期
<li class="item-2">
<span class="span1">2015-7-5 至 2015-7-12</span>
<div class="item-right">
<span>65元/小时</span>
<div class="ico"></div>
</div>
</li>
<li class="item-1">
<div class="add"></div>
北京.通州.果园
</li>
</ul>
明天计划的事情：今天发现任务验收标准要用bootstrap作为基础布局，明天学习一下并完成任务6.
遇到的问题：header中间的按钮是一个div嵌套两个div，其中一个独立背景色，另一个一父级一个背景色，但是设置倒角的时候，与父级底色相同的div倒角不显示：
然后发现是因为跟父级背景色相同，而父级没有倒角，所以不显示，于是给父级div设置了倒角，而且要与子级相同，不然不会显示，还要注意白色那边也要设置相同数据，不然白色div倒角变大就会露出父级div的背景色。
.header-middle{
display : flex;
justify-content : center;
background-color: #55a8b3;
border-radius : 5px;
}
.header-button1{
border : none;
outline : none;
border-radius : 5px 0 0 5px;
color : #fff;
background-color: #55a8b3;
font-size : 20px;
}
.header-button2{
border : none;
outline : none;
border-radius : 5px;
background-color: #fff;
color : #5fc0cd;
font-size : 20px;
padding : 5px 10px;
}
收获：学会了用列表布局。
返回列表
评论