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>
是不是很简单!
相关文档:
.
Transparent
{
width
: 16px
;
height
: 42px
;
background
: transparent
url(images/transparent.png)
no-repeat
;
}
*
html
.
Transparent
{
&nbs ......
我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢,浏览器渲染的速度又如何呢?
这是应该是浏览器开发者应该关心的(页面加载更快,用户就会更愉快)。Mozilla有一篇文章:about best practices . Google当然也很关心这个问题,他们也有这样一篇文章:Optimize browser rendering 。
让我们了解下他们主要倡 ......
可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的,整个页面主要由三个div组成,它们的id分别是:
csdnblog_header,
csdnblog_sidebar, csdnblog_content。
所以,定义它们的主体样式可以这样:
#csdnblog_header
{
//头部的风格 ......
一、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 ......