发表于： 2020-03-13 23:42:04
1 1369
今日完成的事
学习渐变边框并应用于task6
基本完成task6
明日计划
task6细节修改后同步服务器并提交任务
着手task7
遇到的问题
boostrap样式覆盖
解决办法
<header class="d-flex">
使用bootstrap的弹性盒样式代替css外联样式
收获
会使用linear-gradient结合border-image制作渐变边框
border-image的难点在于border-image-slice的使用
参考资料https://blog.csdn.net/dengdai848586/article/details/51488700
bootstrap网格系统的应用
可使用ml-auto进行分离布局
offset-md-*进行列偏移布局
bootstrap4中文文档https://code.z01.com/v4/layout/grid.html
成果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/task6.css">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<title>护工列表页</title>
</head>
<body>
<header class="d-flex">
<div class="btn-wrap">
<button class="btn-top btn-top-l">找雇主</button>
<button class="btn-top btn-top-r color1">找护工</button>
</div>
<div class="local"><img class="icon" src="../img/task6/icon1.png"></div>
</header>
<main>
<div class="row no-gutters select-wrap">
<select class="col linear">
<option>所在地</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select class="col linear">
<option>食宿</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select class="col">
<option>病人情况</option>
<option>能自理</option>
<option>不能自理</option>
<option>半失能</option>
<option>手术后</option>
</select>
</div>
<ul class="service-list">
<li class="list row no-gutters">
<div class="list-items col-6">
<div class="list-head">
<span class="icon-2"><img class="icon" src="../img/task6/icon2.png"></span>
<span class="font1">服务日期</span>
</div>
<div class="date font2">2015-7-5 至 2015-7-12</div>
<div class="address">
<span class="icon-3"><img class="icon" src="../img/task6/icon3.png"></span>
<span class="font1">北京·通州·果园</span>
</div>
</div>
<div class="price col-3 ml-auto">
<span class="font3">25元/小时</span>
<div class="angle"></div>
</div>
</li>
</ul>
</main>
<footer class="d-flex">
<div class="btn-bottom">
<div class="bottom-img"><img class="icon" src="../img/task6/icon4.png"></div>
<div class="color1">首页</div>
</div>
<div class="btn-write ">
<img class="icon" src="../img/task6/icon5.png">
</div>
<div class="btn-bottom">
<div class="bottom-img"><img class="icon" src="../img/task6/icon6.png"></div>
<div class="color2">我的</div>
</div>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
}
html {
font-size: 16px;
font-size: 62.5%;
}
/* 头部 */
header {
position: absolute;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 6.8vh;
background-color: #5fc0cd;
}
/* 按键容器 */
.btn-wrap {
display: flex;
flex-direction: row;
width: 39.6vw;
height: 5.4vh;
background-color: #55a8b3;
border-radius: 0.7rem;
}
/* 共同样式 */
.btn-top {
width: 50%;
height: 100%;
font-size: 1.2rem;
border-radius: 0.5rem;
}
/* 左侧找雇主 */
.btn-top-l {
background-color: #55a8b3;
color: #fff;
}
/* 右侧找护工 */
.btn-top-r {
background-color: #fff;
}
/* 定位图片 */
.local {
position: absolute;
right: 3.4vw;
width: 3.4vh;
height: 3.4vh;
}
main {
position: absolute;
top: 6.8vh;
bottom: 7.8vh;
left: 0;
right: 0;
}
/* 下拉框外部容器 */
.select-wrap {
width: 100%;
height: 6.2vh;
border-bottom: 1px solid #e1e5e7;
}
/* 下拉框 */
select {
width: 100%;
height: 100%;
/* border: none; */
outline: none;
color: #999;
font-size: 2.8rem;
/* select文本居中 */
text-align-last: center;
/* 移入鼠标变手 */
cursor: pointer;
}
/* 分割线 */
.linear {
border-right: 1px solid;
border-image: linear-gradient(white, #e1e5e7, white)1 10 1;
}
.service-list {
width: 100%;
height: 79.2vh;
/* 自动滚条 */
overflow: auto;
line-height: 2.3vh;
}
.list {
width: 100%;
height: 14vh;
padding: 0 5vw;
border-bottom: 1px solid #e1e5e7;
}
.list-items {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.icon-2 {
display: inline-block;
width: 1.8vh;
height: 1.8vh;
}
.date {
padding-left: 3vh;
}
.icon-3 {
display: inline-block;
width: 1.4vh;
height: 1.8vh;
}
.font1 {
padding-left: 5px;
font-size: 1.8vh;
color: #999;
line-height: 3.6vh;
}
.font2 {
color: #333;
font-size: 1.8vh;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.font3 {
color: red;
font-size: 1.8vh;
}
.price {
display: flex;
justify-content: center;
align-items: center;
}
.angle {
width: 1.5vh;
height: 1.5vh;
border-top: 0.3vh solid #5fc0cd;
border-right: 0.3vh solid #5fc0cd;
transform: rotate(45deg);
}
footer {
position: absolute;
justify-content: space-around;
align-items: center;
height: 7.8vh;
bottom: 0;
width: 100%;
background-color: #f8fafb;
border-top: 1px solid #e1e5e7;
padding: 0 15vw;
}
.btn-bottom {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 8.4vw;
height: 6vh;
}
.bottom-img {
width: 3.3vh;
height: 3.3vh;
}
.btn-write {
width: 7.7vh;
height: 7.7vh;
}
.icon {
display: block;
width: 100%;
height: 100%;
}
.color1 {
color: #5fc0cd;
}
.color2 {
color: #999;
}
返回列表
评论