Zend Studio » float http://www.zendstudio.net 提供zend studio教程、zend studio下载等相关资源的公益性站点。 Thu, 02 Sep 2010 08:07:07 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 DIV+CSS经典——双语导航菜单 无JS代码 http://www.zendstudio.net/archives/div-css-rotation-menu-list/ http://www.zendstudio.net/archives/div-css-rotation-menu-list/#comments Fri, 02 Nov 2007 04:58:52 +0000 gently http://www.zendstudio.net/?p=81 这个菜单的巧妙之处在于对a:hover伪类的淋漓尽致的应用(用<span>隐藏杀机)，所以不用JS代码，也能实现这种很炫的效果。
怎么看怎么有点像flash的效果呀？呵呵，不多说了，看代码吧！（代码首页显示不下，只好就此截断了，请多包涵。 ^_^）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双语导航菜单--鼠标放上去就能切换语言</title>
<style type="text/css">
* {margin:0;padding:0;}    
#nav{
  padding: 10px 10px 0;
  font: bold 12px Arial, Helvetica, sans-serif,"宋体";
  list-style:none;
}
 
#nav li{
  float: left;
  margin-right: 1px;
}
 
#nav li a,#nav li a:hover span{
  line-height: 20px;
  text-decoration: none;
  background: #DDD;
  color: #666;
  display: block;
  width: 80px;
  text-align: center;
  overflow:hidden;
}
 
#nav li a span{display:none;}
 
#nav a:hover{
  position: relative;
}
 
#nav a:hover span{
  display:block;
  position:absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
 
#nav a:hover span{
    padding-top:2px;
}
 
#nav li a:hover,#nav li a:hover span{
  color: #FFF;
  background: #DC4E1B;
}
 
#navbar{
  background: #DC4E1B;
  height: 8px;
  overflow: hidden;
  clear: both;
}
 
</style>
</head>
<body>
    <ul id="nav">
    <li><a href="index.html">Home<span>首　页</span></a></li>
    <li><a href="about.html">About us<span>关于我们</span></a></li>
    <li><a href="products.html">Products<span>产品展示</span></a></li>
    <li><a href="services.html">Services<span>售后服务</span></a></li>
    <li><a href="contact.html">Contact<span>联系我们</span></a></li>
  </ul>
  <div id="navbar"></div>
</body>
</html>

相关日志

]]> http://www.zendstudio.net/archives/div-css-rotation-menu-list/feed/ 2 凑热闹 DIV+CSS 中float 属性用法 http://www.zendstudio.net/archives/float-attributes-in-css/ http://www.zendstudio.net/archives/float-attributes-in-css/#comments Mon, 29 Jan 2007 07:01:50 +0000 gently http://www.zendstudio.net/?p=4   昨儿做了个实验，简单用DIV+CSS排了个布局经典的header+left+right+footer型。我先写
[codes=xml]
<div class="header">HEADER</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<div class="footer">FOOTER</div>
[/codes]
可是当我想让right 为右对齐,设置 float:right，结果扯了，不是想要的结果，于是将<div class="right"></div>调到<div class="left"></div>上面，问题就解决了。呵呵

相关日志

]]> http://www.zendstudio.net/archives/float-attributes-in-css/feed/ 1