用ul、li标识建立css横指导航菜单示例

日期:2020-08-23 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

建立CSS款式文字导航栏条的最简易处理方式或许便是把全部的连接都放在1写作本里,这类方式看起来很有效也很直观。但难题在于把全部的连接都放在1写作本里就很难操纵连接之间和前后左右的空白。因此,以便防止全部的连接都挤在1起,你最终一般都迫不得已插进1些物品或非换行的空白标识符做为隔开,让这些文本分离出来起来,不至于混在1起。

如今大家一切正常的做法是运用ul、li标识把连接做为无编码序列表(unordered list)来标志。再运用CSS款式对其开展操纵,按大家料想的方式在器皿中显示信息出来。对导航栏条应用无编码序列表好像是不符直观体会的,由于大家习惯性于把无编码序列表做为1个竖着推起来的目录新项目,每一个前面都放着1个目录预设标识。这好像不符导航栏条水平方位的习惯性。但做为单独目录新项目结合的目录逻辑性构造可以可用于导航栏条里的连接;而CSS的标准让你可以强制性替代目录新项目缺省的主要表现方式,以清除它们并分配目录项在器皿内按水平方位排序,而并不是从上而下的标准。如今让大家看来看案例,依据无编码序列表建立CSS款式和XHTML标识的横指导航菜单。

CSS编码

拷贝编码
编码以下:

<div id="nav">
<ul>
<li><a href="https://www.jb51.net/">HomePage</a></li>
<li><a href="https://www.jb51.net/">Div+CSS实例教程</a></li>
<li><a href="https://www.jb51.net/">CSS合理布局案例</a></li>
<li><a href="https://www.jb51.net/">CSS2.0实例教程 </a></li>
<li><a href="https://www.jb51.net/">CSS线上手册</a></li>
<li><a href="https://www.jb51.net/">Web规范</a></li>
<li><a href="https://www.jb51.net/">XHTML实例教程</a></li>
</ul>
</div>

大家再看看有关这段CSS编码:
CSS编码

拷贝编码
编码以下:

#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
whitewhite-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}

大家看来看上面的编码的详细HTML,拷贝出来放到1个HTML网页页面中,大伙儿能够看到实际效果:

XML/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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>www.jb51.net</title>
<style type="text/css">
<!--
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="https://www.jb51.net/">HomePage</a></li>
<li><a href="https://www.jb51.net/">Div+CSS实例教程</a></li>
<li><a href="https://www.jb51.net/">CSS合理布局案例</a></li>
<li><a href="https://www.jb51.net/">CSS2.0实例教程 </a></li>
<li><a href="https://www.jb51.net/">CSS线上手册</a></li>
<li><a href="https://www.jb51.net/">Web规范</a></li>
<li><a href="https://www.jb51.net/">XHTML实例教程</a></li>
</ul>
</div>
</body>
</html>

下面大家来分析上面的编码:

xhtml编码最先界定了1个器皿div id="nav"。这个器皿用来置放这个无编码序列表横指导航菜单的內容,但也是有人觉得这个器皿是过剩的,立即界定ul id="nav"便可以了。大家不提议你这样做,要了解大家的站点是可拓展的,大家要为未来的拓展留有充足的余地,假如大家的导航栏款式设计方案的更为繁杂,唯一的ul是不可以考虑必须的。大家界定这样的器皿也更合乎大家撰写编码的习惯性。

#nav界定了对话框的宽高及情况色调。#nav ul包括有margin和padding申明,字体样式及色调申明。line-height: 30px;是是非非常关键的界定,假如撤销掉行高的界定,大家的连接文本竖直垂直居中便可能遭受危害。white-space: nowrap;也许大伙儿其实不能了解有甚么功效,它界定了强制性在同1行内显示信息全部文字,直至文字完毕或遭受br目标。

#nav li中的list-style-type: none;除去了目录项所应用的预设标识。使其更象是纯文字,而沒有目录标识。display: inline;申明则可以让目录新项目在网页页面上从左向右波动,而不容易让每一个新项目显示信息在独立的行里而从上至下的排序。这两项申明是大家完成无编码序列表横指导航菜单的重要。
#nav li a和#nav li a:hover界定了连接的款式。在其中的內容就不作深层次了,唯1要讲的便是:padding: 7px 10px;它是用来操纵连接文本之间的空白间距的,你能够试着更改标值试一试。