精通CSS+DIV网页样式与布局--制作实用菜单

在上篇博文中，小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素，今天小编继续将来介绍CSS的相关基础知识，这篇博文，小编主要简单的总结一下在CSS中如何制作网页中的菜单，这部分的内容包括：项目列表、无需表格的菜单、菜单的横竖装换，看下面一张思维导图：

首先，我们看项目列表，列表的符号，我们来看例子代码和运行效果：

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>项目列表</title>
<style>
<!--
body{
	background-color:#c1daff;
}
ul{
	font-size:0.9em;
	color:#00458c;
	list-style-type:circle;		/* 项目编号 */
}
-->
</style>
   </head>
<body>
<p>水上运动</p>
<ul>
	<li>freestyle 自由泳</li>
	<li>backstroke 仰泳</li>
	<li>breaststroke 蛙泳</li>
	<li>butterfly 蝶泳</li>
	<li>individual medley 个人混合泳</li>
	<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html></span></span>

运行效果如下：

分析一下上面的代码，正文部分很简单，ul无符号的项目列表，和一群li标记，在CSS代码中，单独对ul进行了标记，最主要的是：list-style-type:circle。这句话表示项目列表符号采用空心圆进行表示。就出现了如上图片所显示的运行效果。当然我们还可以设置不同显示方式，大家自己来试试；尽管ul显示的是无符号列表，但是在CSS中一样能设置列表符号。我们的CSS不但可以制作列表的符号，我们接下来试试图片符号，例子代码和运行效果如下所示；

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>图片符号</title>
<style>
<!--
body{
	background-color:#c1daff;
}
ul{
	font-family:Arial;
	font-size:13px;
	color:#00458c;
	list-style-image:url(icon1.jpg);	/* 图片符号 */
}
-->
</style>
   </head>
<body>
<p>自行车</p>
<ul>
	<li>Road cycling 公路自行车赛</li>
	<li>Track cycling 场地自行车赛</li>
	<li>sprint  追逐赛</li>
	<li>time trial 计时赛</li>
	<li>points race  计分赛</li>
	<li>pursuit  争先赛</li>
	<li>Mountain bike 山地自行车赛</li>
</ul>
</body>
</html></span></span></span>

运行效果如下所示：

通过对比两张运行效果图，我们看到这个跟上面咱们说的列表符号就不一样了，这里采用了图片做符号。我们看一下这个代码：代码里边的list-style-image后面跟了一个图片的链接。对于通常的html的设计者来说，最开始所制作的菜单，往往都得使用表格，将一个一个的超链接放进表格的单元格中，而当引入了ul和li项目符号之后，制作菜单通常使用的方法是使用ul和li标记，我们看一下是如何实现的nie，例子代码和运行效果如下所示：

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>无需表格的菜单</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
-->
</style>
   </head>
<body>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">My Blog</a></li>
		<li><a href="#">Friends</a></li>
		<li><a href="#">Next Station</a></li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html></span></span>

运行效果如下所示：

我们在做网页的时候，有时候还需要横向的菜单来显示，而在CSS可以很轻松的进行横竖菜单的转换。我们先来看看例子代码和运行效果：

<span style="font-size:18px;"><span style="font-size:18px;"><html>
<head>
<title>菜单的横竖转换</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	font-family:Arial;
}
#navigation ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation li {
	float:left;							/* 水平显示各个项目 */
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:3px 6px 3px 6px;
	text-decoration:none;
	border:1px solid #711515;
	margin:2px;
}
#navigation li a:link, #navigation li a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}
-->
</style>
   </head>
<body>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">My Blog</a></li>
		<li><a href="#">Friends</a></li>
		<li><a href="#">Next Station</a></li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html></span></span>

运行效果如下所示：

分析一下，上面的代码，首先这个body部分跟咱们刚才那个例子完全相同，所不同的仅仅是CSS的设置，便可以轻松的实现菜单的横竖转换，这就有利于我们在后期的维护中，如果我们需要把菜单从竖向转换成横向或者又横向转换成竖向，将十分的方便，这里就li属性float:left，而a属性还是一样设置边框等等。通常在网页的设计中，经常的采用了ul，li来设置菜单，这很便于我们后期的维护。

小编寄语：该篇博文，小编继续介绍了CSS的相关基础知识，主要简单的总结一下在CSS中如何制作网页中的菜单，这部分的内容包括：项目列表、无需表格的菜单、菜单的横竖装换，然后依次举了一个小小的例子，结合例子的代码进行讲解，有不同意见的小伙伴欢迎讨论交流，B/S学习，未完待续......

精通CSS+DIV网页样式与布局--制作实用菜单的更多相关文章

系列文章--精通CSS.DIV网页样式与布局学习
精通CSS.DIV网页样式与布局(八)——滤镜的使用精通CSS.DIV网页样式与布局(七)——制作实用菜单精通CSS.DIV网页样式与布局(六)——页面和浏览器元素精通CSS.DIV网页样式与布 ...
精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的照片拍摄人员,我们都可以通过 ...
精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
精通CSS+DIV网页样式与布局--滤镜的使用
在上篇博客中,小编主要简单的介绍了使用CSS,如何制作实用菜单,今天我们继续来总结有关CSS的基础知识,今天小编主要简单的来介绍一下CSS中关于滤镜的使用,首先,小编先来简单的介绍一下滤镜,我们这次来 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
精通CSS+DIV网页样式与布局--页面和浏览器元素
在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...
精通CSS+DIV网页样式与布局--设置表单和表格
表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...
精通CSS+DIV网页样式与布局--CSS段落效果
在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...
精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

随机推荐

如何导入python中的模块
作为一名新手Python程序员,你首先需要学习的内容之一就是如何导入模块或包.但是我注意到,那些许多年来不时使用Python的人并不是都知道Python的导入机制其实非常灵活.在本文中,我们将探讨以下 ...
安装yum源和gcc编译器遇到的问题
这两天我试着在VMware虚拟机里安装gcc,遇到了不少问题 1. 安装yum源我搭建的是光盘yum源(有两种方法搭建yum源,另外一种是网络yum源,但至今没弄懂我的网络yum源为什么不成功) ...
Python中dict的功能介绍
Dict的功能介绍 1. 字典的两种函数(方法) 1. 字典的内置函数包含关系格式:x.__contains__(key)等同于key in x 例如:dic = {'ab':23,'cd':34 ...
HttpServletRequest获取URL？后面的内容
获取URL?后面的内容如https://i.cnblogs.com/EditPosts.aspx?opt=1 String para = request.getQueryString(): para ...
java-反射深度剖析
Java反射是Java语言一个很重要的特征,简单剖析下反射的定义.原理.使用.性能及应用场景. (一)定义程序运行时,允许改动程序结构或变量类型,这种语言称为动态语言.java不属于动态语言,但提供 ...
初始化mysql数据库——Activiti BPM
package com.initialize; import org.activiti.engine.ProcessEngine; import org.activiti.engine.Process ...
ES6(Decorator(修饰器）)
Decorator(修饰器) 1.基本概念函数用来修改类的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改类的行为(扩展类的功能)3.Decorato ...
Go 语言多维数组
Go 语言支持多维数组,以下为常用的多维数组声明方式: var variable_name [SIZE1][SIZE2]...[SIZEN] variable_type 以下实例声明了三维的整型数组: ...
Ubuntu 16.04: How to resolve libqt5x11extras5 (>= 5.1.0) but it is not going to be installed
Issue: When you install Virtualbox 5.1 on Ubuntu 16.04, you may encounter following error: root@XIAY ...
Redis之（一）初识Redis
1.Redis概述我们知道,内存是电脑主板上的存储部件,用于存储当前正在使用的数据和程序,CPU可以与内存直接沟通,所以访问速速非常高:而外存数据必须加载到内存以后程序才能使用.如果把CPU当做一个 ...

精通CSS+DIV网页样式与布局--制作实用菜单

精通CSS+DIV网页样式与布局--制作实用菜单的更多相关文章

随机推荐

热门专题