易截截图软件、单文件、免安装、纯绿色、仅160KB

漂亮的CSS + XHTML导航菜单


你大概知道:对于一个新的访问者来说,他在最初20秒内与某网站的互动情况,决定了他是否会留在这个网站做进一步的探索,还是扬长而去。这就意味着,在设计网页的时候,你必须遵循一定的规律来留住访问者。简单的说,就是把所有的网页元素放在访问者所期待的位置。进行此设计的一个重要而有效的部分,就是整一个易于使用的导航菜单。
本文将手把手带领您在jQuery的帮助下,制作一个漂亮的CSS + XHTML导航菜单。
Home
Services
Our clients
The team
About us
Contact us
第一步:HTML
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" mce_href="#" class="normalMenu">Home</a></li>
<li><a href="#" mce_href="#" class="normalMenu">Services</a></li>
<li><a href="#" mce_href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" mce_href="#" class="normalMenu">The team</a></li>
<li><a href="#" mce_href="#" class="normalMenu">About us</a></li>
<li><a href="#" mce_href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>

呵呵,这代码简单吧?其实就是一个 ul
+ li
的结构。一目了然。如果您想加一项,减一项,或是换个菜单链接,就对着 li
和 a
标签下手就成。嗯,唯一需要注意的就是,怎么设定一个当前(或选定)的菜单项。如上面代码,您就把 a
的 class 设为 “selectedMenu” 即可(如代码中的 Our clients 项)。


相关文档:

Css实现表格奇偶行不同色

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
#DataGrid1 tr {
    background-color: expression(
        this.sectio ......

CSS控制左边固定,右边自由伸展

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.main{position:relative;width:100%}
.left{position:absolute;width:200px;border:solid 1px red; height: ......

Css 图解margin 和 padding 的区别

Css 图解margin 和 padding 的区别
以前常常以为margin 和 padding的区别,而老是google,现在理清了...
图解:

margin : 相当于组件的 外边缘 与外部组件的距离
padding : 相当于组件的 内边缘 与内部组件的距离 ......

CSS Sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
优点:
当用户往U盘中拷200张图片,会等很久。但是 ......

jQuery使用手册之CSS操作

Jquery对css的操作相当方便,能很方便我们去通过js修改css。传统javascript对css的操作相当繁琐,比如
<div id="a" style="background:blue">css</div>
取它的background语法是:
document.getElementById("a").style.background
而jQuery对css更方便的操作:
$("#a").background();$("#a").background ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号