一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

div+css 列表菜单实例教程

时间:2008-10-21 编辑:简简单单 来源:一聚教程网

见过这些名单的CSS菜单?花式决策吗?当然你!好吧,这是一个方便的教程如果你想创造一个快速的CSS菜单,并能够控制其外观。

第1步
在您的HTML网页,建立一个专区,并建立一个无序列表中区,像这样:

<div>
<ul id="nav">
<li><a href="home.htm">Homea>li>
<li><a href="about.htm">About Usa>li>
<li><a href="products.htm">Productsa>li>
<li><a href="services.htm">Servicesa>li>
<li><a href="contact.htm">Contact Usa>li>
ul>
div>
 

正如您所看到的代码,我联系我们所有的清单项目通用的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 ;
此行是相当不言自明。背景颜色的所有超文本链接清单项目设置为一种天蓝色。


-------------------------------------------------- ------------------------------

显示:块;
这意味着要素,在这种情况下,清单项目,将显示为一个块级元素与断行之前和之后的元素。


-------------------------------------------------- ------------------------------

width:196px;
height:20px;
margin:0px;

这是相当不言自明也。这些三线指定宽度,高度,和利润率的因素。

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);

热门栏目