发表于: 2019-09-18 19:25:41
1 875
调整任务六,提交后师兄指出了两处不足
1、下拉框的宽度过窄

其实是因为,我的下拉框是后加的,之前把病人情况只当按钮放在那里,没有做出了下拉框的效果
后来为了露出旁边的小三角,把下拉框宽度改成了80%
hhh被师兄发现了
然后重新改成了宽度100%,小三角被挤到下面去了
那只能把小三角放在背景里了
select {
cursor: pointer;
width: 100%;
padding-right: .5rem;
font-size: 1rem;
text-align-last: center;
color: #999;
border: none;
background: url(img/task6-down.jpg) no-repeat right; /*背景图是小三角图片,不重复,靠右*/
background-size: 1.2rem;
-webkit-appearance: none; /*这里是去掉默认的下拉框小三角*/
outline: none;
}
调整后
2、顶部的按钮没有改成动态的
加上hover实现按钮的变色
button:hover {
color: #55a8b3;
background-color: #fff;
}
写代码的时候发现冒号前后不能有空格,否则不起作用
鼠标悬浮上按钮背景变成白色
除了:hover选择鼠标指针浮动在其上的元素,并设置其样式。还有:link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被访问的页面的链接,:active选择器用于活动链接。
评论