利用CSS制作竖直排列菜单

作为一个成功的网站,导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格,因此很多设计者都会投入很多时间和精力来制作各式各样的导航条,从而体现网站的整体构架。
在传统方式下,制作导航菜单是很麻烦的工作。需要使用表格,设置复杂的属性,还需要使用JavaScript实现相应鼠标指针经过或点击动作。如果用CSS来制作导航菜单,实现起来就非常简单了。实例的最终效果如下图所示。

操作方法

  • 01

    首先建立HTML相关结构,将菜单的各个项用项目列表<ul>表示,同时设置页面的背景颜色,代码如下。 <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </div>

  • 02

    然后开始设置CSS样式,首先把页面的背景色设置为浅色,代码如下。 body{ background-color:#dee0ff; } 此时页面的效果只是最普通的项目列表。

  • 03

    设置整个<div>块的宽度为固定150像素,并设置文字的字体。设置项目列表<ul>的属性,将项目符号设置为不显示。 #navigation { width:150px; font-family:Arial; font-size:14px; text-align:right } #navigation ul { list-style-type:none;                /* 不显示项目符号 */ margin:0px; padding:0px; } 通过以上设置后,项目列表使显示为普通的超链接列表。

  • 04

    为<li>标记添加下边线,以分割各个超链接,并且对超链接<a>标记进行整体设置,如下所示。 #navigation li { border-bottom:1px solid #9F9FED;    /* 添加下划线 */ } #navigation li a{ display:block; height:1em; padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #151571;        /* 左边的粗边 */ border-right:1px solid #151571;        /* 右侧阴影 */ } 以上代码中需要特别说明的是“display:block;”语句,通过该语句,超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。

  • 05

    最后设置超链接的样式,以实现动态菜单的效果,代码如下。 #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#FFFFFF; } #navigation li a:hover{                    /* 鼠标经过时 */ background-color:#002099;            /* 改变背景色 */ color:#ffff00;                        /* 改变文字颜色 */ border-left:12px solid yellow; } 代码的具体含义都在注释中一一说明了,这里不再重复。此时导航菜单便制作完成了,最终的效果如效果图所示,在IE与Firefox两种浏览器中的显示效果是一致的。​

(0)

相关推荐

  • div+css制作导航下拉菜单

    div+css制作导航下拉菜单 操作方法 01 首先看如下代码: 02 预览效果: 03 新增如下代码: 04 预览效果如下: 05 发现样式乱了,这是因为新增的li继承了原本的 Float:left ...

  • Premiere CC 2018怎么制作竖直滚动字幕?

    看影视剧中有垂直滚动的字幕,想要制作一个垂直滚动的字幕,该怎么制作呢?下面我们就来看看使用premiere直走垂直滚动字幕的教程,请看下文详细介绍. 1.点击文件菜单栏,然后选择新建,然后选择项目,在 ...

  • Excel怎么利用数据有效性制作多级下拉菜单?

    Excel中经常用到多级下拉菜单,而下拉菜单的制作需要使用到excel的定义名称+数据有效性+indirect函数,本文旨在介绍如何制作多级下拉菜单.以下为excel实用技巧的系列链接. 1.认识下拉 ...

  • 如何利用html制作网页水平导航菜单?

    我们在利用html进行网站制作时,网站头部的水平导航菜单通常是必不可少的,许多初识html的小伙伴对于如何创建水平菜单可能有些疑惑,诸如:如何设置CSS样式达到自己想要的效果.接下来,我就为大家简单介 ...

  • 利用CSS制作隔行变色的表格

    当网页中的表格的行和列都很多,并且数据量很大的时候,为避免单元格采用相同的背景色会使浏览者感到凌乱,发生看错行的情况,为表格设置隔行变色的效果,使得奇数行和偶数行的背景颜色不一样.实例的最终效果如下图 ...

  • Word2013怎么把文字改成竖的排列

    一般说来,Word 2013中的文字是以水平方式输入排版的.在中文排版时,有时需要采用竖直方式,如输入古诗词时.在Word 2013中能够很容易地将水平排列的段落文字设置为竖直排列的文字,下面以将一首 ...

  • CSS技巧分享:如何用css制作横排二级下拉菜单

    看到网站的导航按钮很炫酷不会怎么办?本片教程介绍如何使用css制作网站导航横排二级下拉菜单 操作方法 01 打开Notepad++,先输入个页面框架 <!DOCTYPE html> < ...

  • PPT竖直文本框如何从左到右排列默认是从右到左排列的?

    默认状态下,在竖直文本框中输入文字,是从右到左排列的(与古文的写法相同): 那么,该如何使其从左往右排列呢(您要是愿意复制粘贴一遍..)简易操作(选中文本框,右键设置形状格式,选择文本选项,文字方向选 ...

  • 如何使用HTML和CSS制作下拉菜单

    下拉菜单可以在页面上分级显示不同类别的项目.如果用户将鼠标悬停在菜单项上,菜单项下会显示子菜单项目. 我们仅使用HTML和CSS代码就可以制作这样的菜单. 学习这篇指南后,你就能在示例上稍作修改,制作 ...