大连网站制作客服
主营业务
  • 网站制作
  • 网站维护
  • 网站推广
  • 域名空间
联系电话
联系人:尹先生
QQ:1050706570
E-mail:biz@noonenet.cn
地址:大连市甘井子区哲林北园29号
·首页 >> 设计表现 >> div+css 垂直导航栏并添加翻转效果

div+css 垂直导航栏并添加翻转效果

  更新时间:2009-8-24 14:38:37    编辑:小苗儿
以下是引用片段:

<style type="text/css">
<!--
body{
   margin:0px;
   padding:0px;
   font:12px/20px "宋体";
}

.nav{
  width:160px;
  margin-left:100px;
  float:left;
  margin-top:30px;
  overflow:hidden;
  display:inline;
}
.nav ul{
  float:left;
  width:100%;
  margin:0px;
  padding:0px;
  list-style:none;
  border-bottom:#999 dashed 1px;
}
.nav a{
   color:#000000;
   background:#e7e7e7;
   border:#999 dashed 1px;
   border-bottom:none;
   padding:5px 5px 5px 30px;
   display:block;
}
<!-- 从块级元素变成行内元素,消除导航栏上每个链接之间的空间。 -->
.nav li{
   display:inline;
}
<!-- 这个样式利用* html hack,把CSS属性只应用给IE6和更早的版本。IE7完全忽略这个规则,就像所有其他浏览器一样。这个样式声明本身没有意义,它企图设置链接的高度为1px,这是IE忽略的东西,但是它强制浏览器把按钮的背景颜色当成链接的一部分。 -->
* html .nav a{
   height:1px;
}
.project a.projectlink,
.quiz a.quizlink,
.expert a.expertlink,
.home a.homelink,
.baidu a.baidulink{
   background:#FF33FF;
}
.nav a:link{
   color:#000;
   text-decoration:none;
}
.nav a:visited{
   color:#000;
   text-decoration:none;
}
.nav a:hover{
   font-weight:bold;
   color:#3333CC;
   background:#FFCCCC;
   text-decoration:none;
}
-->
</style>

 

<body class="home">
<div class="nav">
  <ul>
  <Li><a href="http://www.163.com" class="homelink">首页</a></Li>
  <li><a href="http://www.163.com" class="expertlink">公司简介</a></li>
  <li><a href="http://www.baidu.com" class="baidulink">产品展示</a></li>
  <li><a href="http://www.163.com" class="quizlink">联系我们</a></li>
  <li><a href="http://www.163.com" class="projectlink">招贤纳士</a></li>
  </ul>
</div>
</body>

 

原载: No.1网络工作室 http://www.noonenet.cn/
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。


Tags:垂直导航,翻转效果
同类文章:
· 给链接定义样式
· 用CSS建立相册,相册说明,图片阴影效果
· 火狐下li里插图片有空隙
· FONT属性的缩写技巧
· 优化网站设计的方法(五种)
返回新闻列表
top
本站关键字:大连网站制作 - 大连网站建设 - 大连网页制作
CopyRight © 2009-2012 No.1网络工作室 All Rights Reserved  sitemap
地址:大连市甘井子区哲林北园29号 电话:13889684613 E-mail:biz@noonenet.cn QQ:1050706570
logo