登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

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

2010-12-13 22:14:20|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
以下是引用片段:

<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>

  评论这张
 
阅读(1012)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018