精通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的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- JS区分中英文字符的两种方法: 正则和charCodeAt()方法
1.正则regExpForm.onblur=function(){ entryVal=this.value; entryLen=entryVal.length; cnChar=entryVal.mat ...
- Xcode8 添加PCH文件
转自默默desire 1.) 打开你的Xcode工程. 在Supporting Files目录下,选择 File > New > File > iOS > Other > ...
- 《深入理解mybatis原理》 MyBatis的架构设计以及实例分析
作者博客:http://blog.csdn.net/u010349169/article/category/2309433 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简 ...
- 第一次作业：基于Linux操作系统深入源码进程模型分析
1.Linux操作系统的简易介绍 Linux系统一般有4个主要部分:内核.shell.文件系统和应用程序.内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使 ...
- Python3 教程
Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下兼容. 查 ...
- python复杂网络库networkx：绘图draw
http://blog.csdn.net/pipisorry/article/details/54291831 networkx使用matplotlib绘制函数 draw(G[, pos, ax, h ...
- Django中过期@cache_page中缓存的views数据
django的缓存系统中,cache_page 这个装饰器非常好用,只要添加一个装饰器就可以缓存views的响应内容,但是django没有提供过期这个views缓存数据的功能. @cache_page ...
- Zookeeper核心工作机制（zookeeper特性、zookeeper数据结构、节点类型）
10.1 zookeeper特性 1.Zookeeper:一个leader,多个follower组成的集群. 2.全局数据一致:每个server保存一份相同的数据副本,client无论连接到哪个ser ...
- Python 性能剖分工具
Python 性能剖分工具 眼看着项目即将完成,却被测试人员告知没有通过性能测试,这种情况在开发中屡见不鲜.接下来的工作就是加班加点地找出性能瓶颈,然后进行优化,再进行性能测试,如此这般周而复始直到通 ...
- RunLoop总结：RunLoop的应用场景（四）
今天要介绍的RunLoop使用场景很有意思,在做长期项目,需要跟踪解决用户问题非常有用. 使用RunLoop 监测主线程的卡顿,并将卡顿时的线程堆栈信息保存下来,下次上传到服务器. 参考资料 关于今天 ...