应用CSS做出1个嵌套循环导航栏.

日期：2021-01-20 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

在之前做网站导航栏时,常常依靠于图象,报表,和javascript.而这些都比较严重的危害了网站的可浏览性和可以使用性.假如在1个欠缺适用javascript的客户,那末你的网站导航栏将无算一切正常的显示信息.例如说1个客户把访问器的javascript关掉掉,或在1个只能读纯文本的手持机器设备--它们将无算从你的网站读到全部的数据信息.假如你的委拖人不重视这层面,那末告知他复杂的菜单会阻拦检索模块的排名.(木木:像禅意花苑便是1个非常好的CSS网站.)

应用CSS能够建立1个更有吸引住力的导航栏,由于CSS沒有和文字混和在1起,因此保证了导航栏的可浏览性和使那些手持机器设备还可以读取.在这个实例教程里大家将看到1个根据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⑻" />
<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;
}


剖析:

先建立1个无编码序列表的导航栏条,并做好导航栏连接.


拷贝编码
编码以下:

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


随后用1个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>

在访问器中显示信息默认设置的款式.

接下来大家要做的第1件事是给这个div界定宽度.
===================
#navigation {
width: 200px;
}
=====================
给目录加上款式,去掉默认设置的圆点和消除填充.
========================
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

========================
在访问器中显示信息:


给li标识加上1个下划线
==========================

#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是加上了上下边框,而且使目标块状,这样做的实际效果使连接看起来像1个按扭.这类实际效果看起来好像给导航栏加上1个照片似的.

应用CSS建立1个沒有图象和javascript的导航栏.

导航栏作用经常具备旋转的实际效果:例如说1个访问者把电脑鼠标放在按扭上,按扭就会显示信息出另外一张照片,来突显实际效果.要完成这个实际效果,则要两张图象和javascript.

处理计划方案:

应用CSS来建立上面的那个实际效果比用图象来建立要简易的多.在CSS要实际旋转这个实际效果用到 hover伪类挑选器.
大家给上面的例证加个旋转的实际效果:

=============================
#navigation li a:hover {
 background-color: #711515;
 color: #FFFFFF;
}


=============================
实际效果如图:

大家能够看到应用CSS来完成这个实际效果是是非非常简易的.在这个事例里我只是改下旋转的情况的色调.你能够在旋转时更改边框,和文本的色调.

在当代的访问器中,例如说IE7,你能够给任何目标加上:hover伪类挑选器.可是在IE6下列版本号却不可以这样应用.

在旧式的版本号中只充许锚文字能够点一下,因而客户只能点一下到文本,而并不是情况.

大家怎样处理这个难题,这里有1个网络黑客的方式:扩张连接的宽度.

===============
* html #navigation li a {
 width: 100%;
}


=============================
怎样应用CSS建立1个副导航栏

到现阶段为止事例所建的是1个水平的导航栏,但有时大家必须在水平下加上1个副导航栏.大家给事例再提升嵌套循环并加上其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⑻" />
<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;
}


============================
实际效果如图:

剖析:
嵌套循环目录是1个很好的方法来叙述导航栏系统软件.在这个事例大家用了第1个目录来表明主菜单,而子菜单则包括在主菜单的下面.这样如沒有CSS款式,构造也是是非非常的清楚.


在主菜单<li>目标包括1个目录:
============================

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


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

在html中假如沒有加上CSS的话,那末嵌套循环目录将再次主菜单的CSS款式,靠左侧波动,因此要加上个空白,与主菜单有1定的间距.

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

#navigation ul ul { 
 margin-left: 12px; 
}


=======================
接下来大家再给嵌套循环里的<li><a>目标加上款式.

========================
#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; 
}

上一篇：CSS中几种访问器对不一样版本号的适用与区别写 返回下一篇：没有了