发表于： 2020-02-06 22:06:26
1 1264
今日完成的事
阅读学习vhvw相关知识，并应用在task6上
弄明白设计稿尺寸与css样式的关系
学习css模拟下拉框
下拉框在移动端和pc效果是不同的
完成task6头部底部和三个下拉框
遇到的问题
设计稿为720尺寸属于1.92倍设计图，直接切出的图片属于二倍图，制作成雪碧图后不方便自适应；
经过查询后，自适应一般这些小图标使用字体图标代替，
解决方法
暂且在图片外套div，图片div使用zoom或transform：scal();进行缩放，后期在用字体图标代替、
缺点，自适应小图标不会变化，比例失调
明日计划
完成task6列表页
收获
学会使用vh和vw进行自适应
学会使用渐变属性完成下拉框的分割线
会使用select模拟下拉框并会修改样式
flex布局更加熟练
今日成果
<!DOCTYPE html>
<html>
<head calss="min">
<meta charset="uft-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" href="../css/6.css">
<title>护工列表页</title>
</head>
<body>
<header class="min">
<div class="btn_top">
<button class="btn_top_l" type="button">找雇主</button><button class="btn_top_r" type="button">找护工</button>
</div>
<div class="location"><button type="button"></button></div>
</header>
<main class="min">
<div class="top_select">
<select>
<option>所在地</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<div class="linear"></div>
<select>
<option>食宿</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div class="linear"></div>
<select>
<option>病人情况</option>
<option>能自理</option>
<option>不能自理</option>
<option>半失能</option>
<option>手术后</option>
</select>
</div>
</main>
<footer class="min">
<div class="bottom_btn">
<div class="bottom_btn_l"></div> 首页
</div>
<div class="bottom_btn_mid">
<div></div>
</div>
<div class="bottom_btn">
<div class="bottom_btn_r"></div>我的
</div>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: 0;
outline: none;
border: none;
text-decoration: none;
}
/* 头部 */
header {
position: absolute;
height: 6.8vh;
top: 0;
left: 0;
right: 0;
background-color: #5fc0cd;
/* 横竖居中 */
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid; */
}
.min {
min-width: 320px;
}
/* 中间按钮容器 */
.btn_top {
/* position: absolute; */
/* left: 50%; */
/* top: 0.7vh; */
/* 居中 */
/* margin-left: -19.9vw; */
width: 39.6vw;
height: 5.4vh;
border-radius: 1rem;
background-color: #55a8b3;
overflow: hidden;
}
/* 中间两按钮共同样式 */
.btn_top button {
font-size: 17px;
width: 50%;
height: 100%;
}
/* 左侧按钮 */
.btn_top_l {
background: #55a8b3;
color: #fff;
}
/* 右侧按钮 */
.btn_top_r {
background-color: #fff;
border-radius: 1rem;
color: #5fc0cd;
}
/* 右侧定位图标容器 */
.location {
width: 3.4vh;
height: 3.4vh;
/* 右边距 */
position: absolute;
right: 4.2vw;
/* border:1px solid; */
}
/* 内侧图片 */
.location button {
width: 44px;
height: 44px;
background-image: url(../img/6/task6.png);
background-position: -215px -10px;
background-color: #5fc0cd;
/* 居中缩放 */
zoom: 0.5;
/* border:1px solid; */
}
/* 主体 */
main {
position: absolute;
top: 6.8vh;
bottom: 7.8vh;
left: 0;
right: 0;
/* 自动滚动条 */
overflow: auto;
/* border: 1px solid red; */
}
.top_select {
height: 6.25vh;
border-bottom: 1px solid #e1e5e7;
}
/* 下拉框 */
.top_select select {
float: left;
width: 33.1vw;
min-width: 106px;
height: 6.25vh;
/* 清除移动端默认样式 */
background-color: #fff;
color: #afbac0;
font-size: 14px;
/* border:1px solid; */
text-align-last: center;
padding: 0 2%;
/* 移入鼠标变手 */
cursor: pointer;
/*去掉默认的下拉三角*/
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url(../img/6/shape1.png);
background-repeat: no-repeat;
background-position: 97% center;
background-color: transparent;
}
.linear {
float: left;
width: 1px;
height: 6.25vh;
background-image: linear-gradient(#fff, #e1e5e7, #fff);
/* border:1px solid; */
}
/* 底部 */
footer {
height: 7.8vh;
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* 横向分布 竖直居中 */
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f8fafb;
border-top: 1px solid #e1e5e7;
}
/* 左右按钮公共样式 */
.bottom_btn {
width: 6.3vw;
height: 6vh;
font-size: 10px;
/* 竖直排列 左右居中 */
display: flex;
flex-flow: column;
text-align: center;
}
/* 左按钮 */
.bottom_btn_l {
width: 46px;
height: 40px;
background: url(../img/6/task6.png) -277px -10px;
zoom: 0.5;
margin: auto;
}
/* 右按钮 */
.bottom_btn_r {
width: 42px;
height: 41px;
background: url(../img/6/task6.png) -153px -10px;
zoom: 0.5;
margin: auto;
}
/* 中间按钮 */
.bottom_btn_mid {
width: 7.3vh;
height: 7.3vh;
background-color: #5fc0cd;
border-radius: 50%;
/* 居中 */
display: flex;
text-align: center;
}
/* 中图标图片 */
.bottom_btn_mid div {
width: 40px;
height: 41px;
background: url(../img/6/task6.png) -93px -10px;
/* zoom:0.5; */
transform: scale(0.5);
/* border:1px solid; */
margin: auto;
}
返回列表
评论