第一步、编写横向菜单的HTML代码架构

请将以下代码添加到HTML文档的导航栏区域中。

<ul id="menu">

 <li><a href="http://www.baidu.com">Baidu.Com</a></li>

 <li><a href="http://www.Code52.Net">Code52.Net</a></li>

 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>

 <li><a href="http://www.google.com" class="last">Google.Com</a></li>

</ul>

第二步、编写CSS代码

1、设置公共样式

请将以下CSS代码添加到HTML文档的<head>...</head>标签范围中。

<style type="text/css">

#menu {

font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */

}

#menu, #menu li {

list-style:none; /* 将默认的列表符号去掉 */

padding:0; /* 将默认的内边距去掉 */

margin:0; /* 将默认的外边距去掉 */

}

</style>

大家都知道，<ul>中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来。

Tips：因为我们现在将导航栏拉出来独立讲解，所以需要设置一些公共样式，如果您在 body 或其他地方已经重设了默认效果，以上代码可以去掉

2、让文字横排

大家都知道，<ul>标签下的项目<li>默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列。

<style type="text/css">

#menu li {

float:left; /* 往左浮动 */

}

</style>

3、设置链接样式：

<style type="text/css">

#menu li a {

display:block; /* 将链接设为块级元素 */

padding:8px 50px; /* 设置内边距 */

background:#3A4953; /* 设置背景色 */

color:#fff; /* 设置文字颜色 */

text-decoration:none; /* 去掉下划线 */

border-right:1px solid #000; /* 在左侧加上分隔线 */

}

</style>

我们用内边距（即填充padding）的方式，让每个菜单变得宽一些，如果你的菜单是中英文混排的，建议设置单个菜单的高宽，这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式：

<style type="text/css">

#menu li a {

display:block; /* 将链接设为块级元素 */

width:150px; /* 设置宽度 */

height:30px; /* 设置高度 */

line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */

text-align:center; /* 居中对齐文字 */

background:#3A4953; /* 设置背景色 */

color:#fff; /* 设置文字颜色 */

text-decoration:none; /* 去掉下划线 */

border-right:1px solid #000; /* 在左侧加上分隔线 */

}

</style>

4、链接悬停效果：

通过以上几步的综合作用，一个横向导航栏的初步框架就出现了。此步主要是定义链接的悬停效果，让导航栏更美观。当然，如果要让导航栏更炫丽，你可以在CSS悬停属性上定义背景图片。

<style type="text/css">

#menu li a:hover {

background:#146C9C; /* 变换背景色 */

color:#fff; /* 变换文字颜色 */

}

</style>

这里的代码一个缺陷，最右边会多出来一个边框，由于 :first-child 伪类不被IE系列浏览器所支持，我们只能单独写一个样式，将最后一个边框去掉，同时要给 HTML 代码增加一个额外选择符。

<ul id="menu">

<li><a href="http://www.baidu.com">Baidu.Com</a></li>

<li><a href="http://www.Code52.Net">Code52.Net</a></li>

<li><a href="http://www.yahoo.com">Yahoo.com</a></li>

<li><a href="http://www.google.com" class="last">Google.com</a></li>

</ul>

<style type="text/css">

#menu li a.last {

border-right:0; /* 去掉左侧边框 */

}

</style>

好了，到这里一个简单的横向导航菜单就制作完成了，是不是很简单？ 下面给出完整代码：

<style type="text/css">

#menu {

 font:12px verdana, arial, sans-serif;

}

#menu, #menu li {

 list-style:none;

 padding:0;

 margin:0;

}

#menu li {

 float:left;

}

#menu li a {

 display:block;

 /* 如果是中英文混排的文字，建议用固定宽度

 width:150px;

 height:30px;

 line-height:30px;

 text-align:center;

 */

 padding:8px 50px;

 background:#3A4953;

 color:#fff;

 text-decoration:none;

 border-right:1px solid #000;

}

#menu li a:hover {

 background:#146C9C;

 color:#fff;

 text-decoration:none;

 border-right:1px solid #000;

}

#menu li a.last {

 border-right:0; /* 去掉左侧边框 */

}

</style>

<ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="http://www.Code52.Net">Code52.Net</a></li> <li><a href="http://www.yahoo.com">Yahoo.com</a></li> <li><a href="http://www.google.com" class="last">Google.com</a></li> </ul>

你可以查看我们制作的在线演示和下载本文提供的实例包。

上面的CSS样式，我修改了一下。如下：

<style type="text/css">
#menu {
font-size: 12px;
font-weight: bolder;
}
#menu li{
list-style-image: none;
list-style-type: none;

border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
float: left;
}
#menu li a{
color: #FFFFFF;
text-decoration: none;
margin: 0px;
padding-top: 8px;
display: block; /* 作为一个块 */
padding-right: 50px; /* 设置块的属性 */
padding-bottom: 8px;
padding-left: 50px;
}
#menu li a:hover{
background-color: #0099CC;
}

</style>

HTML代码 CSS的更多相关文章

  1. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  2. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  3. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...

  4. 教你如何写出高效整洁的 css 代码——css优化(转载)

    css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...

  5. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

  6. 三行代码CSS竖向居中

    .element{ position:relative; top:50%; transform:translateY(-50%); } 这里无需设置高度或者父元素的position属性.(IE9可用) ...

  7. 自用代码css获取任意网址的/favicon.ico的方法教程

    尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用这种办法获取 如果有好的方法望评论告知 谢谢 <img :ng-src="'http://'+list.url+'/fav ...

  8. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  9. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

随机推荐

  1. hdu 2732 最大流 **

    题意:题目是说一个n*m的迷宫中,有每个格子有柱子.柱子高度为0~3,高度为0的柱子是不能站的(高度为0就是没有柱子)在一些有柱子的格子上有一些蜥蜴,一次最多跳距离d,相邻格子的距离是1,只要跳出迷宫 ...

  2. 【洛谷】4180：【模板】严格次小生成树[BJWC2010]【链剖】【线段树维护最大、严格次大值】

    P4180 [模板]严格次小生成树[BJWC2010] 题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说, ...

  3. 升级Tornado到4后weibo oauth登录不了

    把 Tornado 升级到4后,发现正常运行的微博登录不可以了. 原因是4已经移除 RequestHandler.async_callback and WebSocketHandler.async_c ...

  4. Codeforces Round #359 (Div. 2) A. Free Ice Cream 水题

    A. Free Ice Cream 题目连接: http://www.codeforces.com/contest/686/problem/A Description After their adve ...

  5. ThinkPHP空操作和空控制器的处理

    所谓的空操作和空控制器,简而言之就是系统中不存在该方法或控制器,导致系统报错(本文版本3.2.3). 正确URL(测试环境):  http://oa.com/index.php/admin/publi ...

  6. Mysql 5.6 慢日志配制

    一.配制my.cnf(/etc/my.cnf) slow_query_log=onlong_query_time=1slow_query_log_file=/var/log/slow_query.lo ...

  7. java 内存溢出 栈溢出的原因与排查方法

     1. 内存溢出的原因是什么?        内存溢出是由于没被引用的对象(垃圾)过多造成JVM没有及时回收,造成的内存溢出.如果出现这种现象可行代码排查: 一)是否App中的类中和引用变量过多使用了 ...

  8. IOS开发之深拷贝与浅拷贝(mutableCopy与Copy)详解

    copy与retain的区别: copy是创建一个新对象,retain是创建一个指针,引用对象计数加1.Copy属性表示两个对象内容相同,新的对象retain为1 ,与旧有对象的引用计数无关,旧有对象 ...

  9. 如何开启解决android studio的模拟器的问题

    来自:http://jingyan.baidu.com/article/03b2f78c0a19e75ea237ae24.html 有的时候因为电脑系统或者是安装的一些问题我们可能需要对症下药的解决模 ...

  10. 在JTextField中监听回车键,并执行相应按钮

    在jbInit() 中加入jTextField1的按键监听,代码如下:    jTextField1.addKeyListener(new KeyAdapter(){       public voi ...