精通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的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
随机推荐
- LAN、WAN、WLAN、WiFi之间的区别
感觉这几个概念让人傻傻分不清,下面以最常见的路由器来解释这几个概念. LAN 1 LAN,全称Local Area Network,中文名叫做局域网. 顾名思义,LAN是指在某一区域内由多台计算机 ...
- iOS 定位简单使用
一.配置 导入库CoreLocation. 2.info.plist配置key NSLocationWhenInUseUsageDescription和NSLocationAlwaysUsageDes ...
- 阿里云服务器Centos 7安装PHP
网上各种别人写的博客 我自己配置了一下php 开始安装的是压缩包 结果php -version 无显示 然后查找各种资料 请教了很多人 需要的环境一一配置了,但是虽然出现了安装成功,但是还是无法查看版 ...
- linux上安装fastdfs+nginx+ngin-module实践并解决多个异常篇
为什么选择Nginx Nginx 是一个很牛的高性能Web和反向代理服务器, 它具有有很多非常优越的特性: 在高连接并发的情况下,Nginx是Apache服务器不错的替代品:Nginx在美国是做虚拟主 ...
- Java网络爬虫Hello world实现——Httpclient爬取百度首页
1.创建Maven项目 2.Httpclient Maven地址 <dependency> <groupId>org.apache.httpcomponents</gro ...
- Pickle模块数据对象持久化操作
Pickle模块的作用是持久化(序列化)的储存数据.因此我先解释下:什么是序列化与反序列化.什么是对象序列化和对象反序列化.通俗地讲,它们的定义如下:序列化: 把一个对象保存到一个文件或数据库字段中去 ...
- Spring错误之org.springframework.beans.factory.BeanNotOfRequiredTypeException: Bean named 'bookService' is expected to be of type 'pw.fengya.tx.BookService' but was actually of type 'com.sun.proxy.$Proxy1
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'cas ...
- springMVC源码分析--ViewNameMethodReturnValueHandler返回值处理器（三）
之前两篇博客springMVC源码分析--HandlerMethodReturnValueHandler返回值解析器(一)和springMVC源码分析--HandlerMethodReturnValu ...
- 微信小程序基础之在微信上显示和体验小程序？
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
- Bootstrap3 排版-内联文本元素
标记文本 突出显示的文本由于其相关性在另一个上下文中,使用<mark>标记. You can use the mark tag to highlight text. You can use ...