css能力:行使CSS做出一个嵌套导航.

发布时间：2018-08-28 10:17:52 所属栏目：创业来源：站长网

导读：除非你的网站只有一页,否则你必然会用的导航的.究竟上,导航在网页计划中是最重要部门之一.你要用许多时刻去思量怎样让赏识者更轻易会见你的网站. 在早年做网站导航时,每每依靠于图像,表格,和javascript.而这些都严峻的影响了网站的可会见性和可行使性.假如

副问题[/!--empirenews.page--]

除非你的网站只有一页,否则你必然会用的导航的.究竟上,导航在网页计划中是最重要部门之一.你要用许多时刻去思量怎样让赏识者更轻易会见你的网站.

在早年做网站导航时,每每依靠于图像,表格,和javascript.而这些都严峻的影响了网站的可会见性和可行使性.假如在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的表现.好比说一个用户把赏识器的javascript封锁掉,可能在一个只能读纯笔墨的手持装备--它们将无算从你的网站读到全部的数据.假如你的委拖人不注重这方面,那么汇报他繁杂的菜单会阻止搜刮引擎的排名.(木木:像禅意花圃就是一个不错的CSS网站.)

行使CSS可以建设一个更有吸引力的导航,由于CSS没有和文本殽杂在一路,以是确保了导航的可会见性和使那些手持装备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加速网页加载的时刻,这样基于图像的导航将徐徐的被裁减掉.

导航的布局

导航的本质是让赏识者更好的会见你的网站,以是要成立故意义的语义.使CSS和语义相切合,为了往后利便维护.留意要停止现有赏识器的不兼容.

办理方案

下面是导航的HTML和CSS的代码,结果如图.

css能力:行使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>

==============================
在赏识器中表现默认的样式.

css能力:行使CSS做出一个嵌套导航.

接下来我们要做的第一件事是给这个div界说宽度.

===================
#navigation {
width: 200px;
}

=====================

给列表添加样式,去掉默认的圆点和破除添补.

========================
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

========================
在赏识器中表现:

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/5

尾页

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如