css实现导航栏的制作
平时我们在浏览网页的时候,常常看见导航栏是动态的,其实我们可以通过css样式表的定义就可以完成。
首先我们看一下css代码:
#nav {
width:900px;
margin:0 auto;
background:#E1F4FD;
}
#nav li {
float:left;
font-size:14px;
}
#nav li a {
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:148px;
height:30px;
text-align:center;
background-color:#39F;
margin-left:2px;
}
#nav li a:hover {
background-color:blue;
color:#ffffff;
}
下面就是在网页中引用:
<div align="center">
<ul id="nav">
<li><a href="#" mce_href="#" target="_parent">首 页</a></li>
<li><a href="#" mce_href="#" target="_self">关于我们</a></li>
<li><a href="#" mce_href="#" target="_parent">硬件维护</a></li>
<li><a href="#" mce_href="#" target="_parent">软件中心</a></li>
<li><a href="#" mce_href="#" target="_parent">资源下载</a></li>
<li><a href="#" mce_href="#" target="_self">在线交流</a></li>
</ul>
</div>
是不是很简单!
相关文档:
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden;
解释一下:
text-overflow :ellipsis; //让截断的文字显示为点点。还有一个值是clip意思是截断不显示点点
white-space : nowrap; //让文字不换行
overflow : hidden; //超出要隐藏
要显示为点点,3个缺一不可,还有,除了firefox,opera其他浏 ......
1、十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;
2、disp ......
一、css优先于位置也有关系
.vm与.vb 样式的定义在优先级别上是相同的,但是如果在html属性里class="vm vb"定义的话优先级并不是写在属性里的顺序,而是写在样式里顺序来决定的。如下的例子
<mce:style><!--
.vm{vertical-align:middle} /* 由于位置原因优先于vb*/
.vb{vertical-align:baseline}
--> ......
/*标题元素*/
h1,h2,h3,h4,h5,h6 {
color: green;
}
/*父元素继承*/
body {
font-family: Verdana, sans-serif;
}
/*id 选择器*/
#red {color:red;}
/*id 选择器和派生选择器*/
#red p {
font-style: italic;
text-align: right;
margin ......