2007-10-19

精通CSS+DIV：用CSS制作菜单

关键字: menu
一、item list
1,列表符号 
ul {
  list-style-type: decimal;
}
li.special {
  list-style-type: circle;
}

disc
circle
square
decimal
upper-alpha
lower-alpha
upper-roman
lower-roman
none


2,图片符号 
ul {
  list-style-image: url(icon1.jpg);
}

or

ul {
  list-style-type: none;
}
li {
  background: url(icon1.jpg) no-repeat;
  padding-left: 25px;
}


二、no table menu 
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">My Blog</a></li>
		<li><a href="#">Friends</a></li>
		<li><a href="#">Next Station</a></li>
		<li><a href="#">Contact me</a></li>
	</ul>	
</div>

#navigation {
  width: 200px;
}

#navigation ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

#navigation li {
  border-bottom: 1px solid #ED9F9F;
}

#navigation li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  text-decoration: none;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
}

#navigation li a:link, #navigation li a:visited {
  background-color: #c11136;
  color: #FFFFFF;
}
#navigation li a:hover {
  background-color: #990020;
  color: #FFFF00;
}


三、横向和纵向菜单 
#navigation li {
  float: left;
}


四、Tab菜单 
<ul id="tabnav">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<div id="content">
</div>

li.current {
  border-bottom: 1px solid #FFFFFF;
  color: #000000;
  background-color: #FFFFFF;
}

即当前访问的tab菜单弄成白色下边框和白色背景，这样就将下边带边框的content div的边框覆盖一部分，所以看起来就是tab菜单了
评论
发表评论

您还没有登录，请登录后发表评论

hideto
搜索本博客
我的相册
A6bdc31c-c66e-468e-961e-9cc721e82adc-thumb
screenshot
共 1 张
存档
最新评论