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

<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. mac 下 sphinx + mysql + php 实现全文搜索（xampp）（1）

      原理: 使用sphinx 中的indexer 生成索引数据 service/web 端 利用searched 调用索引数据 步骤: 下载 sphinx: 下载地址:http://sphinxsea ...

  2. Flasback数据库(闪回数据库)

    数据库闪回原理: 一旦启用了闪回数据库,修改的块映像会不时从数据库缓冲区复制到闪回缓冲区.通过新的后台恢复写入器(Recovery Writer, RVWR)将此闪回缓冲区内容刷新到磁盘和闪回日志接着 ...

  3. 查看某一个点是否在某个多边形内 使用ST_Contains函数

    查看某一个点是否在某个多边形内  使用ST_Contains函数 --LINESTRING ( 121.312350 30.971457 , 121.156783 31.092221 , 121.35 ...

  4. 【Entity Framework 7】 完全不一样的玩法

    http://www.cnblogs.com/n-pei/p/4274907.html

  5. C#微信登录-手机网站APP应用

    要求:公众号必须先认证,认证费用￥300/年,比较黑 一.微信登录核心代码 //核心代码,没判断异常 1.登录页面 protected void Page_Load(object sender, Ev ...

  6. 在百万数据中找出重复的数据sql

    select * from (select count(name) as isone, name from tbl_org_departments group by name) t where t.i ...

  7. vncserver 添加用户

    1.在vncserver设置登录用户的信息   #vi /etc/sysconfig/vncservers   VNCSERVERS="1:root 2:wt" 此处添加用户   ...

  8. select框的text与value值的获取(实用版)

    function def(){    var key = document.getElementById ('selectarea'); //select list var value = docum ...

  9. Kafka server的的停止

    这算是CountDownLatch的一个典型使用场景. kafka.Kafka对象的main方法中与此有关的代码为 // attach shutdown handler to catch contro ...

  10. WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法

    WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法 - likebeta - 博客园 http://www.cnblogs.com/likebeta/archive/2012 ...