1、纯css拉菜单默认样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <select name="" id=""> <option value="">hahaha</option> <option value="">honghonghong</option> <option value="">heihei</option> </select> </form> </body> </html>默认样式如图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> select{ /*设置边框*/ border: 2px solid skyblue; /*将默认的select选择框样式清除*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*在选择框最右侧中间显示小箭头图片*/ background: url("arrow.png") right center no-repeat; width: 200px; /*设置字体颜色*/ color: #333; /*清除高亮样式*/ outline: none; } </style> </head> <body> <form action="#" method="post"> <select name="" id=""> <option value="">hahaha</option> <option value="">honghonghong</option> <option value="">heihei</option> </select> </form> </body> </html>
改变样式后：
2、消除图片上下之间的间隙：img{vertical-align:bottom};
因为图片文字等inline元素是默认与父级元素baseline对齐的，而baseline又离父级底边有一定的距离，所以会出现图片与下面的元素出现间隙的情况。可以设置vertical--align：bottom
3.消除表单输入文本框和按钮之间的间隙。当文本框和按钮相邻时，会产生默认的间隙，因为<inpu>元素时内联块元素，内联元素是当做字体来处理的，字体有间隙，所以表单之间会产生间隙
方法1：将表单的父元素font-size设为0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .parent{ font-size: 0; } </style> </head> <body> <div class="parent"> <input type="text" value="消除文本框和按钮间隙"> <input type="button" value="确定"> </div> </body> </html>
方法2：将两个表单元素写在一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="parent"> <input type="text" value="消除文本框和按钮间隙"><input type="button" value="确定"> </div> </body> </html>4.css3选择器nth-child(n)和nth-of-type(n)的区别：
如p:nth-child(n) 代表选择p元素的父元素下的第n个子元素，不论子元素的类型是不是p；
而p:nth-of-type(n)代表选择p元素的父元素下的第n个类型是p的子元素
