菜单栏的学习
阶段一
-
用ul无序列列表构建菜单
-
清除默认样式 *{margin:0;padding:0;}
清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点
去掉a标签的下划线 a{text-decoration：none}
在导航栏中经常用 height: 30px;line-height: 30px;可使文字垂直居中。 -
如果用为文字前面增加像素，最好用缩进的方式来实现
{text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ） -
ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;}
*{ } （用于全局设置）
*{}和body{}的区别
*{}代表对所有的元素进行了设置，而body{}是对body里面进行了设置
<sytle>
*{color:red;}
body{color:black;}
</style>
<body>
abc
<div> def </div>
</body>
对于上面这段代码，body里面有abc，还有个div元素里面有个def。那么到底是红色还是黑色呢？
因为body设置了黑色，那么body里面都应该是黑色的，除非单独设置了div是别的颜色，然而*{}就可以替代div{}所以，相当于body单独设置成了黑色，但是div单独设置成了红色。就是这么简单。
网友评论