.nav ul{ 980px;/*设置元素宽度为980px*/ border:1px solid #000;/*设置一个颜色为#000,宽度为1px的边框*/ margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/ } .nav ul li{ float:left;/*让li元素左浮动*/ list-style-type:none; /*去掉前面的小点 } .nav ul li a{ 80px;/*设置元素宽为80px*/ height:28px;/*设置高度为28px*/ line-height:28px;/*设置行距为28px,让文字在每行的中间位置*/ background:red;/*设置元素的背景为红色*/ color:#FFF;/*文字颜色是白色*/ margin:5px 10px; font-size:12px;/*用12号字*/ display:block;/*这个比较关键,因为a本身就是联级元素,本身不具有宽高, 用这个把它变成块级元素,这样前面设置的宽和高就能起作用了*/ text-align:center;/*让文本居中*/ text-decoration:none; /*去掉下划线*/ }
当访客鼠标放到某个元素上的时候,这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时,这个a元素的样式就按下面的代码执行*/ 78px; height:26px; line-height:28px; border:1px solid red; color:red; background:#FFF; }