|
主题:会CSS的进来,需要求救 [收藏主题] | 转到: |
yuxiang1986 发表于:2008/9/16 13:56:00 | 只看该作者 查看该作者主题
11楼
|
|
支持(0) | 反对(0) 顶端 底部 |
yuxiang1986 发表于:2008/9/16 13:55:00 | 只看该作者 查看该作者主题
12楼
|
|
支持(0) | 反对(0) 顶端 底部 |
yuxiang1986 发表于:2008/9/16 11:47:00 | 只看该作者 查看该作者主题
13楼
|
|
支持(0) | 反对(0) 顶端 底部 |
yuxiang1986 发表于:2008/9/16 11:46:00 | 只看该作者 查看该作者主题
14楼
|
|
支持(0) | 反对(0) 顶端 底部 |
XHTML代码: <ul id="nav">
好了,现在需要把这个列表处理一下横向排放: #nav li {margin: 0; padding: 0; list-style: none; display: inline;} 我们都知道<a>标签不是默认的块级元素,如果不是块级元素鼠标所感应的热区就不是我们所设定的长宽,而是其元素本身的大小。但CSS可以把其声明为块级元素。 #nav a { float:left; padding: 34px 0 0 0; overflow: hidden; height: 50px;} 这里有一个很有意思的事!那就是,在这一句中有没有“display:block;”都是一样的。这里的“padding:34px 0 0 0;”是我们背景图的一半高度(注:背景图是把两张图片上下合在一起的图片)但是并不是用来控制背景图的,而是把<a>标签中的文字隐藏。由于触发动作并且移动位置是一样的,所以可以集中描述移动背影的位置。 #nav a:hover { background-position: 0 -34px;} 这句的意思是:在#nav下的所有链接在鼠标经过时其背景向上移动34个像素。最后就是给菜单中的每一个链接加上背景图片。 #nav1 a {width:59px;background:url(btn_nav1.jpg) top left no-repeat;} 好了,完成,其中要注意的是:“padding:34px 0 0 0;”“#nav a:hover { background-position: 0 -34px;}” 需要根据自己的实际情况来设定值。 |
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |