最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
div+css 列表菜单实例教程
时间:2008-10-21 编辑:简简单单 来源:一聚教程网
见过这些名单的CSS菜单?花式决策吗?当然你!好吧,这是一个方便的教程如果你想创造一个快速的CSS菜单,并能够控制其外观。
第1步
在您的HTML网页,建立一个专区,并建立一个无序列表中区,像这样:
正如您所看到的代码,我联系我们所有的清单项目通用的HTML网页。当您使用上述代码在您的网站,您可能会想要将它连结到特定网页在您的网站上。又通知我们已经考虑到的ID名单称为导航。我会重新编号的名字很快,所以不要过于担心,现在。不管怎么说,让我们继续进行步骤2 。
第2步
在头一节之间,您的
- <style type="text/css">
- .menustyling{
- width:300px;
- margin:0px;
- padding:0px;
- background-color:#fff;
- }
- style>
-
你的代码粘贴看起来奇怪当你一眼,但是,当你看详细,这是很简单。首先,我指定的属性,宽度,边,填充和背景颜色。对于每一个这些属性,我指派它们的价值。宣告一种风格-呼吁。 m enustyling-只是部分的造型的H T ML对象。您需要调用它,你这样做利用的ID名字连同标记专区:
你能现场之间的差别你上面贴你已经贴?他们都具有相同的名字-m enustyling。但是,请注意,第二个版本的menustyling包含了UL标记的标题。这意味着,任何UL认证的内容放在了将menustyling伞的样式具体的。 menustyling UL认证类别。
你应该现在已经是一个简单的清单中所显示的图片如下:
我们开始做一些基本的修改,我们的菜单上的前一页。我们将拿起从那里我们离开此页面上。
第4步
好吧,现在回到风格标记,复制并粘贴以下级以上的“ /样式”标记:
nav li a{
- background-color:#A4DFF1;
- display:block;
- width:196px;
- line-height:20px;
- height:20px;
- margin:0px;
- font-family: Arial, Helvetica, sans-serif;
- font-size:8pt;
- font-weight:bold;
- padding-left:3px;
- padding-top:7px;
- color:#000000;
首先,请注意,所有上述风格的资料载下的#导航保护伞。这一简单的事实一点,让我解释每一行:
#导航立了一个(
这意味着这一效应将改变清单项目(丽) ,其中载有联系(一)在菜单中会出现。
-------------------------------------------------- ------------------------------
背景颜色: # A4DFF1 ;
此行是相当不言自明。背景颜色的所有超文本链接清单项目设置为一种天蓝色。
-------------------------------------------------- ------------------------------
显示:块;
这意味着要素,在这种情况下,清单项目,将显示为一个块级元素与断行之前和之后的元素。
-------------------------------------------------- ------------------------------
这是相当不言自明也。这些三线指定宽度,高度,和利润率的因素。
- font-family: Arial, Helvetica, sans-serif;
- font-size:8pt;
- font-weight:bold;
- color:#000000;
-
上述线路指定的字体为您的链接列表的文本。总体来说,没有什么棘手的解释在这里。
-------------------------------------------------- ------------------------------
文字修饰:无;
默认情况下,所有的联系的重要性。这行代码将删除强调从文本在您的清单中菜单。
-------------------------------------------------- ------------------------------
填充左: 3px ;
填充顶端: 7px ;
这仅仅是一些填充位置的字体有点远离离开,并在垂直中心的项目。
当您预览您的清单,您应该看到的努力,您的劳动所显示的画面:就像早先图片,请点击这里查看上面的例子中生活。
第5步
现在,虽然仍然在风格的标记,粘贴以下类别:- #nav li a:hover {
- color:#FFFFFF;
- background-color:#77B8CC;
- }
-
这将使清单项目一徘徊的风格。换句话说,当用户移动鼠标光标的链接,外观上空盘旋,将菜单项的基础上改变你指定在上述代码。就我们而言,唯一的变化你会看到对应的颜色和背景颜色的清单项目。
和你做你现在有一个工作列表中的CSS菜单。
提示:要获得更多的从这个你可以改变颜色的清单项目的图片,例如如果我换的背景颜色线#导航丽答:悬停级以下行:background-image: url(buttons_over.jpg);
-
上一个: css+div 图片排列布局
相关文章
- CSS实例教程:用列表ul制作CSS横向菜单的基础知识 01-11
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码