|
给li标签添加一个下划线
==========================
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
==============================
给链接添加样式:
===============================
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
=============================
在上面可以看到这个CSS是添加了阁下边框,而且使工具块状,这样做的结果使链接看起来像一个按扭.这种结果看起来像是给导航添加一个图片似的.
行使CSS建设一个没有图像和javascript的导航.
导航成果经常具有翻转的结果:好比说一个赏识者把鼠标放在按扭上,按扭就会表现出另一张图片,来突出结果.要实现这个结果,则要两张图像和javascript.
办理方案:
行使CSS来建设上面的谁人结果比用图像来建设要简朴的多.在CSS要实际翻转这个结果用到 hover伪类选择器.
我们给上面的事例加个翻转的结果:
=============================
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
=============================
结果如图:
我们可以看到行使CSS来实现这个结果长短常简朴的.在这个例子里我只是改下翻转的配景的颜色.你可以在翻转时改变边框,和笔墨的颜色.
在当代的赏识器中,好比说IE7,你可以给任何工具添加:hover伪类选择器.可是在IE6以下版本却不能这样行使.
在老式的版本中只充许锚文本可以点击,因此用户只能点击到笔墨,而不是配景.
我们怎样办理这个题目,这里有一个黑客的要领:扩大链接的宽度.
===============
* html #navigation li a {
width: 100%;
}
=============================
怎样行使CSS建设一个副导航
到今朝为止例子所建的是一个程度的导航,但偶然我们必要在程度下添加一个副导航.我们给例子再增进嵌套并添加其CSS样式.
============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
============================
结果如图:
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
