仓酷云

标题: 学习下CSS网页结构进门教程9：用CSS计划网站导航——横导游航 [打印本页]

作者: 仓酷云 时间: 2015-1-16 10:39
标题: 学习下CSS网页结构进门教程9：用CSS计划网站导航——横导游航
ie中母div被设置成特定高度之后，假如里面的子div高度（有float的话就以清除float的div的最底为总高度）超过了母div设置的高度,ie会自动把母div撑大，但是ff却不能，ff中母div的高度会依然，里面的子层会溢出到外面来。兼容方法：不要设置母层高度

本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
网站导航是网站中最主要的元素，是网站供应给用户的最间接最便利的会见网站内容的工具。网站导航从情势上次要由横导游航、纵导游航、下拉及多级菜单导航等三种情势。
横导游航　作为流派网站的计划而言，主导航一样平常接纳横导游航。因为流派网站下方笔墨较多，且每一个频道均有一同的款式辨别，因而在顶部流动一个地区计划一致作风且不占用过量空间的导航是最幻想的选择，国际年夜部分流派均接纳这类情势。
纵导游航　今朝在流派网站的计划中已不再盛行，纵导游航更偏向于表达产物分类。
下拉导航　次要用于功效庞大的网站。在有些网站上也罕见的。

总的来讲导航的中心方针是计划一个烦琐快速的操纵出口，匡助用户疾速抵达网站中的响应内容，计划上应该依据网站范例及内容的需求计划公道的导航情势。这里我们将利用css对经常使用的三种导航情势举行计划，看看css是怎样完成这些款式的。

横导游航

利用css结构的情势制造导航与table结构有很年夜的区分，网站除页面结构以外，最主要的就是导航部分，在这一步应当先制造出一个复杂明快的导航体系，然后一步一步的完成具有计划效果的终极导航。在这里我们先构思出了顶部的低级计划款式，导航为一种横导游航情势。在入手下手css的导航制造之前，先让我们回忆一下传统的表格局结构的导航制造。假如表格局结构完成如图所示的导航情势，必要计划一个表格table。导航今朝共有7个栏目构成，必要计划一个1行7列的表格，并在每个单位<td></td>标签中拔出导航笔墨，然后　让每一个单位格的文本居中,能够看一下完成代码：

<tablewidth="100%"border="0"cellpadding="0"cellspacing="0">
<tr>
<tdalign="center"><ahref="http://:www.ckuyun.com/index.asp">主页</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/Sort/List_4.html">DIV+CSS教程</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/Sort/List_5.html">经常使用代码</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/Sort/List_6.html">水晶图标</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/Sort/List_7.html">幻灯图片</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/Sort/List_10.html">软件下载</a></td>
<tdalign="center"><ahref="http://:www.ckuyun.com/css2/">CSS2.0有用手册</a></td>
</tr>
</table>
</body>

经由过程代码能够看到，设定了表格的宽高，并把边框边距设为0以便于埋没表格线，然后让第个单位格的文本对齐体例为居中，就完成了复杂导航，这里的要点在于计划了一个与导航情势相似的数据表，将导航装进每格数据中。再来看一下怎样用css来计划一样的导航体系。
DIV+CSS结构的中心是完成了体现和内容的分别，先来熟悉一下内容部分的代码编写体例：

<ulid="nav">
<li><ahref="http://:www.ckuyun.com/">主页</a></li>
<li><ahref="http://:www.ckuyun.com/">DIV+CSS教程</a></li>
<li><ahref="http://:www.ckuyun.com">经常使用代码</a></li>
<li><ahref="http://:www.ckuyun.com/">水晶图标</a></li>
<li><ahref="http://:www.ckuyun.com/">幻灯图片</a></li>
<li><ahref="http://:www.ckuyun.com/">软件下载</a></li>
<li><ahref="http://:www.ckuyun.com/css2/">CSS2.0有用手册</a></li>
</ul>

这段代码利用了一个新的元素ul，在导航之前，先扼要懂得一下ul元素。ul是css罢了中利用得很普遍的一种元素次要用来形貌列表型内容，每个<ul></ul>暗示个中的内容为一个列表块，块中的每条列表数据用<li></li>来形貌，能够看一下不加任何款式的ul的完成显现效果。

如图所示，作为一种列表型内容，ul默许款式就加上了圆点状序号，并且默许为从上至下分列。为何我们的导航体系要利用ul元素？实践上导航也是种列表，能够了解为导航列表，每个列表数据就是导航中的一个导航频道，一样也能够利用二层嵌套的div来完成一个导航的代码布局，但相对ul列表来讲，div显得过于庞大，ul的利用仍是应该重点放在块状型地区，而关于复杂的只要笔墨的导航来讲，ul就更加轻便天真。
在代码中我们也为ul界说了一个id叫nav，接上去为这个ul及其上面的工具编写代码让它完成必要的导航效果。

把第一段款式编写给了ul下的li工具，我们但愿列表中的每个一列表项不再遵行其默许的从上至下的分列，因而给#navli指定了float:left;的属性，好像div的float:left;一样，也是经由过程浮动定位的道理使得本身向左浮动，从而使下一个工具贴紧该工具的右侧，终极一切的li都具有了向左浮动的特征，从而情势了横向的分列情势。
导航的关头在于a链接工具的款式把持，在这里利用#navlia{}给li下的每个a链接工具编写了款式：
display:block是这里的重点，它使得a链接工具的显现体例由一段文本改成一个块状工具，和div的特征不异，div默许形态下是一个块状工具，a链接工具默许形态下是一个一般文本——内联工具，如许就没有举措使得a链接工具可以像一个方块状按钮一样往运作，利用display:block以后，a链接工具将可以像div和别的元素一样成为一个块状工具（block），就能够利用css外边距、内边距等属性给a链接标签加上一系列的款式了。
经由过程display:block的使用，我们让a标签元素有了宽度width:97px，高度height:22px，并在每个a之间利用margin-left:2px;情势了左边的外边距为2px。
display属性是css中对工具显现形式操纵的一个属性，次要用于改动工具的显现体例。在css中，一切工具都有本人默许的显现体例，如a与span等工具，它们默许为一种行间内联工具，显现时它们不会影响别的任何工具的显现，如当使用span以后，span以后的内容会主动排在span的右侧，像一段文本一样，而div这类工具的默许显现为块状工具，它们默许形态下便占有了一行的空间，并像一个方块一样显现在页面中，经由过程display:block，将a也酿成了块状工具。别的，display另有浩瀚利用体例将在今后慢慢懂得到。
<style>#navli{float:left;}#navlia{color:#000000;text-decoration:none;padding-top:4px;display:block;width:120px;height:22px;text-align:center;background-color:#ececec;margin-left:2px;}</style><ulid="nav"><li><ahref="/index.asp">主页</a></li><li><ahref="/Sort/List_4.html">DIV+CSS教程</a></li><li><ahref="/Sort/List_5.html">经常使用代码</a></li><li><ahref="/Sort/List_6.html">水晶图标</a></li><li><ahref="/Sort/List_7.html">幻灯图片</a></li><li><ahref="/Sort/List_10.html">软件下载</a></li><li><ahref="/css2/">CSS2.0有用手册</a></li></ul>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
预览一下效果，已像个导航的容貌了，不外鼠标移上往没有任何呼应，如许关于用户体验来讲长短常不友爱的，因而必要经由过程一些带有交互呼应的操纵来提醒用户工具是能够点击的：

#navlia:hover{background-color:#bbbbbb;color:#ffffff;}

此次预览效果，用鼠标移上一个频道，呼应呈现了，如许我们的导航已变得友爱多了。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><style>#nav{width:860px;margin:0auto;background:#ccc}#navli{float:left;}#navlia{color:#000000;text-decoration:none;padding-top:4px;display:block;width:120px;height:22px;text-align:center;background-color:#ececec;margin-left:2px;}#navlia:hover{background-color:#bbbbbb;color:#ffffff;}</style></head><body><ulid="nav"><li><ahref="/index.asp">主页</a></li><li><ahref="/Sort/List_4.html">DIV+CSS教程</a></li><li><ahref="/Sort/List_5.html">经常使用代码</a></li><li><ahref="/Sort/List_6.html">水晶图标</a></li><li><ahref="/Sort/List_7.html">幻灯图片</a></li><li><ahref="/Sort/List_10.html">软件下载</a></li><li><ahref="/css2/">CSS2.0有用手册</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
注：很多伴侣不晓得怎样居中，以是特地改成居中的情势，供人人参考2009-10-2716:39:30
低级导航模块完成，无妨对照一下利用表格局结构和css罢了在这方面的好坏，你会发明，css的上风是不言而喻的。
注：从本节入手下手不再写出详细具体的制造步骤，假如你对个中的部分不分明，能够在本节留言；对css把握不纯熟的伴侣，倡议再复习前几节，平常多用dreamweaver做一些实例，渐渐会慢慢把握的。

接下来我们模仿这个盒子做个简单的模型将以下内容拷贝至记事本中，后缀名改为html即可。

作者: 不帅 时间: 2015-1-18 07:45
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 只想知道 时间: 2015-1-26 20:09
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 因胸联盟 时间: 2015-2-4 21:16
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 精灵巫婆 时间: 2015-2-10 12:57
可以使用 CSS 检查工具进行设计。

作者: 蒙在股里 时间: 2015-3-10 19:55
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 第二个灵魂 时间: 2015-3-17 10:33
可以使用 CSS 检查工具进行设计。

作者: 兰色精灵 时间: 2015-3-24 08:13
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

欢迎光临仓酷云 (http://ckuyun.com/)