精通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的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- Linux下如何进入中文目录
给Linux安装图形用户界面之后,会在工作目录中生成图片, 文档, 下载........等中文目录,以前不知道如何进入这些目录,感觉也没有必要,今天在火狐上下载了一个软件,默认在下载这个目录当中,实在 ...
- win10下python环境变量设置
我用的是python_2.7.3.msi,从官网下载之后,一路按照默认进行安装. 安装之后配置环境变量的步骤如下: 1,点“我的电脑”,右键选“属性” 2,选择“高级系统设置”--->选“环境变 ...
- jmeter正则表达式书写
在测试过程中,经常会有以下几种场景,如A接口的返回值,用于B接口中,而且A登陆的账户,每次登陆,这个sid值还是变化的.那么在实际工作中,如何才能A接口中提取参数到B接口中?接下来我们就可以用正则表达 ...
- 深入以太坊智能合约 ABI
开发 DApp 时要调用在区块链上的以太坊智能合约,就需要智能合约的 ABI.本文希望更多了解 ABI,如为什么需要 ABI?如何解读 Ethereum 的智能合约 ABI?以及如何取得合约的 ABI ...
- 多线程join（加入）
package cn.itcast.thread;/* join方法. 加入 */ //老妈class Mon extends Thread{ public void run() { System.o ...
- nginx 网络模型,cpu亲和等优点
nginx优点1.IO多路复用epollIO多路复用:多个描述符的I/O操作都能在一个线程内并发交替地顺序完成,这里的"复用" 指的是复用同一个线程epollIO多路复用的实现方式 ...
- jspacker压缩及解压缩研究(js eval)
起因: 在研究爬虫的时候发现很多网站都出现了同一种方式的js混淆,并且名字都是pde.js,怀疑是使用了同一款混淆工具,所以研究一下. 这款工具叫JS Packer,并不是专门的混淆工具,而是一款js ...
- VSCode 插件推荐
vscode-icons 用于项目中文件类型显示对应的图标,提高文件定位的效率. vscode-tslint 用于 TS 的规范检测 Path Intellisense 用于提示导入文件时候的路 ...
- jQuery 遍历 – 后代
后代是子.孙.曾孙等等. 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代. 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() f ...
- strut2接收参数的三种方式
strut2接收参数有三种方式(普通属性\领域对象\模型驱动),分别对三种进行一个总结: 一.普通属性 Jsp代码 <body> <h1>普通属性</h1> < ...