• web标准出台以后，非常注重的一个标准就是希望内容与样式分离。希望HTML就干HTML该干的事。但是有的时候我们为了美观必须多多少少改动HTML 代码。下面介绍几个导航栏。

                  1.折角试导航栏（这个导航栏的特点是，没有使用任何背景图片，却在导航文字前面加了一个小小的三角形。原理是利用边框的构成，隐藏DIV的其余三边，只留下左边框。） 

                

<!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">
#shizhe{border-width:6px; border-style:solid; border-color:#000 #ccc #999 #666;width:0px;}
#menu{ font-family:arial;font-size:14px;}
#menu a,#menu a:visited{display:block;float:left;position:relative;background-color:#c00;color:#fff;text-decoration:none;padding:6px;margin:1px 0 0 1px;position:relative;}
#menu a .corner{position:absolute;top:0px;left:0px;border-left:6px #fff solid; border-bottom:6px solid #c00;}
#menu a:hover{background-color:#f90;color:#333;}
</style>
</head>

<body>
<div id="shizhe"></div>
<div id="menu">
<a href="#"><span class="corner"></span>Home</a>
<a href="#"><span class="corner"></span>Contact Us</a>
<a href="#"><span class="corner"></span>Web Dev</a>
<a href="#"><span class="corner"></span>Web Design</a>
<a href="#"><span class="corner"></span>Map</a>
</div>
</body>
</html>

2圆角跳起菜单
   这个菜单，用纯CSS模拟除了一个圆角。另外可以当鼠标经过的时候弹起。
 

<!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>
ul{height:26px;margin:0; padding:10px;list-style-type:none;background:#ddd;}
.item{float:left;width:100px;margin:0 -1px 0 0;padding:0; font:14px arial; font-weight:bold;}
.item p{padding:0 0 2px 0;margin:0;text-align:center;background:#cc6;border:solid 1px #000;border-top-width:0;}
.item div{height:1px;overflow:hidden;background:#cc6;border-left:solid 1px #000;
border-right:solid 1px #000;}
.item .pad{height:10px;border:0;background:transparent;}
/*she zhi yuanjiao*/
.item .row1{margin:0 5px;background:#000;}
.item .row2{margin:0 3px;border:0 2px;}
.item .row3{margin:0 2px;}
.item .row4{margin:0 1px;height:2px;}
/*yuanjiao she zhi  jiesu*/
.item a,.item a:visited{display:block;color:#000;text-decoration:none;}
.item a:hover p{background:#884;padding-bottom:12px;color:#fff;}
.item a:hover .pad{height:0px;}
.item a:hover .row1,
.item a:hover .row2,
.item a:hover .row3,
.item a:hover .row4{background:#884;}

</style>
</head>

<body>
<ul >
<li class="item">
<a href="http://www.baidu.com"  target="_blank">
  <div class="pad"></div>
  <div class="row1"></div>
  <div class="row2"></div>
  <div class="row3"></div>
  <div class="row4"></div>
  <p>Home</p>
  </a>
</li>
  <li class="item">
<a href="http://www.baidu.com"  target="_blank">
   <div class="pad"></div>
  <div class="row1"></div>
  <div class="row2"></div>
  <div class="row3"></div>
  <div class="row4"></div>
  <p>Home</p>
  </a>
</li>
  <li class="item">
<a href="http://www.baidu.com"  target="_blank">  <div class="pad"></div>
  <div class="row1"></div>
  <div class="row2"></div>
  <div class="row3"></div>
  <div class="row4"></div>
  <p>Home</p>
  </a>
</li>
  <li class="item">
<a href="http://www.baidu.com"  target="_blank">
   <div class="pad"></div>
  <div class="row1"></div>
  <div class="row2"></div>
  <div class="row3"></div>
  <div class="row4"></div>
  <p>Home</p>
  </a>
</li>
</ul>
</body>

3.下拉菜单。纯CSS的下拉菜单。但是在IE6上需要做部分更改。
  <!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>CSS下拉菜单</title>
<!--css start!-->
<style type="text/css">
#menu{width:610px;margin:0px;padding:0px;font:14px arial;list-style-type:none;}
#menu li{float:left;marging:0 2px 0 0;position:relative;width:150px;padding:0 1px 0 0;}
#menu li dl{background:#ccc url(lala.gif) no-repeat left bottom;margin:0; padding:0 0 10px 0;margin:0px; }
#menu li dt{margin:0;text-align:center;border-bottom:1px solid #b00;padding-top:10px;}
#menu li dl a,#menu li dl a:visited{display:block;color:#333;text-decoration:none;}
#menu li dd{color:#fff;bacground:#47a;margin:0;border-bottom:1px  dashed #9F9;}
#menu li dd a,#menu li dd a:hover{display:block;color:#fff;text-decoration:none;background:#ccc url(lalal-3.gif) no-repeat;padding:12px;}
#menu li dd{display:none;}
#menu li:hover dd  {display:block;}
#menu li dd a:hover{background:#000;color:#FF3;}
</style>
</head>

<body>
<ul id="menu";>
   <li>
     <dl>
        <dt><a herf="#">我的生活</a> </dt>
          <dd><a herf="#">旅行活</a></dd>
          <dd><a herf="#">朋友活</a></dd>
          <dd><a herf="#">城市活</a></dd>
          <dd><a herf="#">时光活</a></dd>
          <dd><a herf="#">爱情活</a></dd>
      </dl>
    </li>

<li>
     <dl>
        <dt><a herf="#">我的生活</a></dt>
          <dd><a herf="#">旅行活</a></dd>
          <dd><a herf="#">朋活</a></dd>
          <dd><a herf="#">城市活</a></dd>
          <dd><a herf="#">时光活</a></dd>
          <dd><a herf="#">爱情活</a></dd>
      </dl>
    </li>
 <li>
     <dl>
        <dt><a herf="#">我的生活</a> </dt>
          <dd><a herf="#">旅行活</a></dd>
          <dd><a herf="#">朋友活</a></dd>
          <dd><a herf="#">城市活</a></dd>
          <dd><a herf="#">时光活</a></dd>
          <dd><a herf="#">爱情活</a></dd>
      </dl>
    </li>

</ul>
 
</body>
</html>

CSS导航的魔力——源自温谦老师《CSS彻底研究设计》的更多相关文章

  1. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  2. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  3. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  4. 强烈推荐一款CSS导航菜单

    强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...

  5. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  7. App.js和App.css（用于移动应用的js和css）

    App.js和App.css(用于移动应用的js和css) 一.App.js和App.css(用于移动应用的js和css) App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 ...

  8. gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  9. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

随机推荐

  1. linux用户管理

    管理用户的文件 添加用户组 添加用户 修改权限

  2. 需要一个策略文件,但在加载此媒体时未设置checkPolicyFile标志

    LoaderContext的checkPolicyFile属性: 如果您从执行调用的 SWF 文件所在的域之外加载图像(JPEG.GIF 或 PNG),并且您预计将需要从 ActionScript 访 ...

  3. 如何在xml文件中加注释或取消注释

    1)加注释:Ctrl+Shift+/ 2)取消注释:Ctrl+Shift+\ 本文欢迎转载,但请注明作者与出处: 作者:Sophia 出处:http://www.cnblogs.com/Sophia- ...

  4. git资料图

  5. 我总结的git命令指南。

    git命令行指南 1.windows上安装git的网址:http://msysgit.github.com/. 没有安装过git的 这个网址里下mymsgit. 因为发现有些同学对git还不是那么熟悉 ...

  6. pil

    http://effbot.org/imagingbook/ 一.安装 pip install PIL --allow-external PIL --allow-unverified PIL   出现 ...

  7. CMakeLists for tesseract

    在网上找了很多,直接用都不行,试了半天的到以下的结果. cmake_minimum_required(VERSION 2.8) project( test ) include_directories ...

  8. Robot Framework入门学习1 安装部署详解

    安装注意: 目前Robot framework-ride不支持python3,安装时请下载python2.7版本. Robot Framework安装时出现了一点小问题,网上没有找到直接的介绍,现将安 ...

  9. 怎么将oracle数据库的数据迁移

    打开要导出数据的PC,进入cmd界面 先进入数据库输入sqlplus,账号system密码508956.有权限的账户密码 2. create directory dir_555 as 'd:/asd1 ...

  10. 不容错过！2016年度优秀UI/UX设计文章

    本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用 ...