今天完成的事
1.隐藏下拉菜单的默认三角按钮
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
2.因为伪元素不能作用于select标签 修改下拉列表部分的架构 每个select标签外包一个DIV容器
<nav>
<div class="select">
<select class="select">
<option value="所在地">所在地</option>
</select>
</div>
<div class="select">
<select class="select">
<option value="所在地">食宿</option>
</select>
</div>
<div class="select">
<select class="select">
<option value="所在地">病人情况</option>
</select>
</div>
</nav>
3.使用伪元素添加需要的向下三角形
.div-s::before {
content: "";
.block;
.absolute;
border-top: 5px solid rgb(184, 184, 184);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 22px;
margin-left: 32%;
}
4.提交任务12
5.开始任务13
6.根据提示修改任务12中才不足及错误之处 改变select便签部分的架构
在里面添加一个空白DIV 然后在这个div上添加伪元素
<nav>
<div>
<select class="select">
<option value="所在地">所在地</option>
</select>
<div class="div-s"></div>
</div>
<div>
<select class="select">
<option value="所在地">食宿</option>
</select>
<div class="div-s"></div>
</div>
<div>
<select class="select">
<option value="所在地">病人情况</option>
</select>
<div class="div-s"></div>
</div>
</nav>
并且修改伪元素的定位方式及流动方向 距离右边为固定宽度
.div-s::after {
content: "";
.block;
.relative;
width: 0px;
float: right;
border-top: 5px solid rgb(184, 184, 184);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: -28px;
right: 10px;
}
7.电话和留言方式那里经过检查发现了问题
在less中 属性值是不能直接使用公用类的
比如之前我提交时使用的方式就是这样
border: 2px solid .color5;
.color5 {
color:rgb(95, 192, 205);
}
应该按照正常的方式使用
border: 2px solid rgb(95, 192, 205);
8.给footer按钮的文字添加颜色
9.提交任务
明天的计划
1.提交任务12
2.开始任务13
3.依据以前的代码重新构思任务13的架构
遇到的问题
1.想实现滑动按钮滑动时文字颜色自动改变 好像只有JS能达成这个效果
今天的收获
1.less属性中的属性值不能直接引用另一个属性。
2.细节把握没有做好 还是有些马虎 以后要改正过来。
返回列表
评论