精通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学习,未完待续......

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。