<!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=gb2312" />

 <style type="text/css">

 #headNav {

     width:960px;

     height:30px;

     line-height:30px;

     background-color: lightblue;

     margin:0 auto;

 }

 #headNav ul {

     list-style:none;

 }

 #headNav ul li {

     float:left;

     height: 30px;

     line-height: 30px;

     padding:0 10px;

 }

 #headNav ul li:hover {

     background-color: white;

 }

 a {

     color:red;

     text-decoration:none;

 }

 a:hover {

 }

 </style>

 </head>

 <body>

 <div id="headNav">

     <ul>

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

         <li><a href="#">网页版式布局</a></li>

         <li><a href="#">div+css教程</a></li>

         <li><a href="#">div+css实例</a></li>

         <li><a href="#">常用代码</a></li>

     </ul>

 </div>

 </body>

 </html>

注意：

①第12行即导航的div要设置其高度

使用div+css制作简单导航 以及要注意问题的更多相关文章

  1. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  5. CSS3学习-用CSS制作立体导航栏

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

  6. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  7. Div+Css制作圆

    Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...

  8. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  9. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

随机推荐

  1. 巧用selectKey

    在Ibatis中,insert()的返回值为一个Object的主键,其实这个Object的主键是这样的来的:如果在bean的xml文件中设置了插入的keyProperty,则insert()方法返回的 ...

  2. 去除ActionBar的方法

    今天做一个播放器项目,由于要去除ActionBar,纠结好久,原来这么简单 记录一下 只需要修改AndroidManifest.xml文件中的主题即可 <application android: ...

  3. JavaScript高级程序设计（第三版）学习笔记8、9、10章

    第8章,BOM BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象.因此,在全局作用域中声明的函数.变量都会变成window对象 ...

  4. 搭建eclipse+maven+scala-ide的scala web开发环境

    http://www.tuicool.com/articles/NBzAzy 江湖传闻,scala开发的最佳利器乃 JetBrains 的神作 IntelliJ IDEA ,外加构建工具sbt 是也. ...

  5. sqlserver 2012 重启是 ID 自动增长 1000的问题

    1. Open "SQL Server Configuration Manager"2. Click "SQL Server Services" on the ...

  6. java反射案例讲解

    本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...

  7. .net 中连接mysql

    1. 下载mysql驱动.里面包含需要连接mysql的dll.mysql-connector-net    地址:http://dev.mysql.com/downloads/file/?id=463 ...

  8. SQL SERVER 锁定的实例

    ---实例DB:AdventureWorks2014 --- 创建view DBLocks USE [AdventureWorks2014] GO /****** Object: View [dbo] ...

  9. Ext.Net 布局

    Ext.Net 布局 Panel布局类有10种:容器布局,自适应布局,折叠布局,卡片式布局,锚点布局,绝对位置布局,表单布局,列布局,表格布局,边框布局       1,Ext.layout.Cont ...

  10. 添加数据库的Maven依赖(SqlServer,Oracle)

    oracle: 1.在Oracle官网下载ojdbc的jar包 例:ojdbc7.jar,版本是12.1.0.2,存储地址/home/peng/下载 2.dos中进入存储地址执行如下命令行(注意各项对 ...