|
副问题[/!--empirenews.page--]
除非你的网站只有一页,否则你必然会用的导航的.究竟上,导航在网页计划中是最重要部门之一.你要用许多时刻去思量怎样让赏识者更轻易会见你的网站.
在早年做网站导航时,每每依靠于图像,表格,和javascript.而这些都严峻的影响了网站的可会见性和可行使性.假如在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的表现.好比说一个用户把赏识器的javascript封锁掉,可能在一个只能读纯笔墨的手持装备--它们将无算从你的网站读到全部的数据.假如你的委拖人不注重这方面,那么汇报他繁杂的菜单会阻止搜刮引擎的排名.(木木:像禅意花圃就是一个不错的CSS网站.)
行使CSS可以建设一个更有吸引力的导航,由于CSS没有和文本殽杂在一路,以是确保了导航的可会见性和使那些手持装备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加速网页加载的时刻,这样基于图像的导航将徐徐的被裁减掉.
导航的布局
导航的本质是让赏识者更好的会见你的网站,以是要成立故意义的语义.使CSS和语义相切合,为了往后利便维护.留意要停止现有赏识器的不兼容.
办理方案
下面是导航的HTML和CSS的代码,结果如图.
这是建设导航的HTML代码
=========================
<!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="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></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>
============================
行使CSS给上面代码添加结果
=====================
#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;
}
======================
说明:
先建设一个无序列表的导航条,并做好导航链接.
========================
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
========================
然后用一个div把这个无序列表包括起来.
===========================
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
==============================
在赏识器中表现默认的样式.
接下来我们要做的第一件事是给这个div界说宽度.
===================
#navigation {
width: 200px;
}
=====================
给列表添加样式,去掉默认的圆点和破除添补.
========================
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
========================
在赏识器中表现:
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
