导航绝对是页面布局中最常见的，为了不用每次去写，稍微贴个简单的导航模版出来，方便以后使用。

<title>CSS菜单</title>

<style type="text/css">

*{margin:0px;padding:0px;font-size:12px;}

#nav li{float:left; list-style:none;}

#nav li a{color:#;text-decoration:none;display:block;width:100px;height:25px;line-height:25px;text-align:center;background:#ececec;margin-left:2px;}

#nav li a:hover{background:#;color:#eee;}

</style>

</head>

<body>

<ul id="nav">

  <li><a href="#">首页</a></li>

  <li><a href="#">文章</a></li>

  <li><a href="#">参考</a></li>

  <li><a href="#">Blog</a></li>

  <li><a href="#">论坛</a></li>

  <li><a href="#">联系</a></li>

</ul>

CSS布局中——导航是非常常见的的更多相关文章

  1. 今天在Mac机器上使用了Flex Builder编辑了一个源代码文件，保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号，其实^M在Linux/Unix中是非常常见的，也就是我们在Win中见过的/r回车符号。由于编辑软件的编码问题，某些IDE的编辑器在编辑完文件之后会自动加上这个^M符号。看起来对我们的源代码没有任何影响，其实并不然，当我们把源代码文件Check In到svn之类

    今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在W ...

  2. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  3. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  7. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  8. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  9. css布局中关于 块状元素和行内元素的区分

    这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性 ...

随机推荐

  1. Qt 内存管理机制（转）

      许转载http://devbean.blog.51cto.com/448512/526734 强类型语言在创建对象时总会显式或隐式地包含对象的类型信息.也就是说,强类型语言在分配对象内存空间时,总 ...

  2. Code for the Homework1

    作业要求: http://www.cnblogs.com/bingc/p/4919692.html 代码(未使用Eigen): #include <iostream> #include & ...

  3. iOS 状态栏管理

    iOS 7 以前:状态栏由 UIApplication 管理 1.隐藏状态栏 : application.statusBarHidden = NO; 2.设置状态栏样式 : application.s ...

  4. c++ 发布动态.so

    原文地址 代码改变世界 Posts - 105, Articles - 0, Comments - 1561 Cnblogs Dashboard Logout Home Contact Gallery ...

  5. 严重: The web application [] appears to have started a thread named [Abandoned connection cleanup thread] but has failed to stop it.

    今日在重新部署项目时出现此问题,虽然对项目无影响,但问题就是问题.完整信息如下(使用idea工具): 十二月 05, 2015 11:44:27 上午 org.apache.catalina.star ...

  6. jQuery的优点——（一）

    稍微学点js然后就用起jQuery,用久了,就好像自己都成高手了,想得少了,都觉得自己就是js高手了.哗啦啦的惭愧啊=.= 面试GY的时候,因为在简历上写着大大的会用jQuery快速开发原型页面,然后 ...

  7. static 内部类

    一般情况下是不可以用static修饰类的.如果一定要用static修饰类的话,通常static修饰的是匿名内部类. 在一个类中创建另外一个类,叫做成员内部类.这个成员内部类可以静态的(利用static ...

  8. Python/Ruby/Go/Node 之四国大战

    Python Flask vs Ruby Sinatra vs Go Martini vs Node Express 本文授权转载自 zybuluo 博客. 题外话一: 最近一段时间,Cloud In ...

  9. java Collections.sort()实现List排序的默认方法和自定义方法

    1.java提供的默认list排序方法 主要代码: List<String> list = new ArrayList();list.add("刘媛媛"); list. ...

  10. kali2.0 系统自带截图功能

    (1)点击左下角的[显示应用程序] (2)在上面搜索栏输入关键字“screen” (3)进入截图选项页面