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

<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. Cadence封装制作之表贴封装的制作

    以0805封装为例 1.打开PCB editor-> Allegro PCB Design XL 2.File -> New ① Drawing Type -> Package Sy ...

  2. PHP内置函数

    1 变量函数 a.is_xxx函数用来判断变量类型       is_int.is_integer.is_long,判断变量是否是整型       is_float.is_double.is_real ...

  3. Xcode常用设置

    1.设置主题和字体大小 2.设置显示代码行号

  4. 微软职位内部推荐-Principal Dev Manager for Windows Phone Apps

    微软近期Open的职位: Location: China, BeijingDivision: Operations System Group Engineering Group OverviewOSG ...

  5. 微软职位内部推荐-This Job is no longer available.

    微软近期Open的职位: 如果你想试试这个职位,请跟我联系,我是微软的员工,可以做内部推荐.发你的中英文简历到我的邮箱:Nicholas.lu.mail(at)gmail.com

  6. android/IOS各平台分享链接/跳转链接配置说明（备用）

    Android: [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 微信/朋友圈 //设置 ...

  7. 1027: [JSOI2007]合金 - BZOJ

    Description 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的 ...

  8. jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...

  9. [Unity+Android]横版扫描二维码

    原地址:http://blog.csdn.net/dingxiaowei2013/article/details/25086835 终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系 ...

  10. nginx上用fastcgi配置python环境

    费了2天的功夫,翻阅了无数的中文.英文资料,终于搞定.写下此文留待以后翻阅用      本文环境,centOS 5.4 ,Nignx-0.8.49, Python 2.6.5   ========== ...