发表于： 2018-12-11 20:06:41
3 747
今天完成的事情：
完善任务九的内容，提交审核，主要就是下拉菜单和合作企业的点击样式
明天计划的事情：
明天应该继续任务十了吧....
遇到的问题：
做合作企业点击样式的时候需要用到box-shadow属性
box-shadow: 2px 3px 5px #999;
阴影分为外部（outset）和内部（inset），默认是外部阴影
第一个值控制水平阴影
第二个值控制垂直阴影
这两个值都可以为负数
另外还有两个可选的值
blur和spread
blur控制阴影模糊距离 spread控制阴影尺寸
其实在chrome浏览器里直接用开发者工具调试好了复制下来就比较方便
另外学到了hover选择器不仅能控制子元素，甚至兄弟元素也能控制，只限同个父元素下的相邻同级元素
<body>
<style>
.first {
color: #5d756e;
}
.first:hover + .fourth {
color: red
}
/*>或空格均可用于子代选择*/
.first:hover > .first-child {
color: #000000
}
.first:hover + .second {
color: rgba(0, 0, 0, 0.38);
}
.first:hover + .second > .third {
color: #0000FF;
}
/* ‘+’ 用于同级选择 */
/* ‘>’ 或 ‘ ’ 用于后代选择 */
</style>
<div class='first'>计划hover元素
<div class="first-child">hover元素的子元素</div>
</div>
<div class='second'>紧邻hover的下个同级元素
<div class='third'>紧邻hover的下个同级元素的子元素</div>
</div>
<div class="fourth" style="">非紧邻hover的同级元素，无法改变</div>
</body>
---------------------
作者：pobu168
来源：CSDN
原文：https://blog.csdn.net/fengjingyu168/article/details/76523278
版权声明：本文为博主原创文章，转载请附上博文链接！
收获：
今天学到了蛮多的，解决了一些很麻烦的问题，善用搜索引擎能解决大部分问题
返回列表
评论