width: 90%
padding: 8px 0
font-size: 14px
border: none
outline: none
appearance: none
-webkit-appearance: none
-moz-appearance: none
}
div:after{
content: ""
width: 13px
height: 7px
background: url(../../../images/about/sanjiaoxing2.png) no-repeat center
-webkit-background-size: 100% 100%
background-size: 100% 100%
position: absolute
right: 20px
top: 45%
//给自定义的图标实现点击下来功能
pointer-events: none
}
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:select { width: 210px}。
3、浏览器运行index.html页面,此时网页下拉列表的大小被调整为了210px。
1,一般下拉菜单的二级菜单都是绝对定位的,绝对定位的元素脱离了常规流,所以不占位,他们会叠加在其他元素的上面或者下面2,你可以把这里面的空格当作[内],也就是子孙元素的意思
#menu ul li ---- #menu 内的 ul 内的 li
#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after
after/before 的意义在于,他们不存在在html文档中,但是又能被浏览器显示出来,因此,可以用来实现一些效果。
常用的例如:
~文字前面的icon,不用在html中插入多余的空元素,直接使用after或者before,前面后面随便插.......
~清除浮动
~为引用的文字加入引号
~画一些有意思的图标