来一发网站导航菜单的支解线和程度居中

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
网页制造POLUOLUO文章简介：实践上，从《网站重构》一书入手下手在国际盛行以后，Zeldman提出的语义化标志就已在必定水平下流传开来.
写这篇碌奈末路拢涤衫醋杂JoruxNotebook的《甚么是Semantics?》文章。
实践上，从《网站重构》一书入手下手在国际盛行以后，Zeldman提出的语义化标志就已在必定水平下流传开来。在丢弃table结构页面以后人人俄然发明，本来这还不敷，随便地利用<p>大概<div>来举行结构实践上和table结构一样的糟。
Jorux的例子（以下）：
我是老迈|我是欠好意义说|老三|老四在这里|老幺
Jorux指出，在这类极其广泛的导航款式中（一般是用于网站底部的信息导航，100个网站里有90个接纳如许的形式），我们应当利用无序列表，而不是上面这类:

1. 1:<p>

复制代码

1. 2:<ahref=”home.html”>首页</a>|

复制代码

1. 3:<ahref=”about.html”>关于</a>|

复制代码

1. 4:<ahref=”blog.html”>博客</a>|

复制代码

1. 5:<ahref=”message.html”>留言</a>|

复制代码

1. 6:<ahref=”album.html”>相册</a>

复制代码

1. 7:</p>

复制代码

乃至是利用了<ul>，可是仍然将润色线条作为内容元素的写法也是龟笑鳖无尾：

1. 1:<ul>

复制代码

1. 2:<li><ahref=”home.html”>首页</a></li>

复制代码

1. 3:<li>|</li>

复制代码

1. 2:<ahref=”home.html”>首页</a>|0

复制代码

1. 2:<ahref=”home.html”>首页</a>|1

复制代码

1. 2:<ahref=”home.html”>首页</a>|2

复制代码

1. 2:<ahref=”home.html”>首页</a>|3

复制代码

1. 2:<ahref=”home.html”>首页</a>|4

复制代码

1. 2:<ahref=”home.html”>首页</a>|5

复制代码

1. 2:<ahref=”home.html”>首页</a>|6

复制代码

1. 2:<ahref=”home.html”>首页</a>|7

复制代码

1. [/code]遗憾的是，内容与款式分别web尺度化建立的促进路途老是充斥了林林总总的拦阻。即便是新浪和淘宝在它们的页面底部也存在着上述的情形。
2. 先来看新浪的截图：
4. 代码（大略了内容）：
5. [code]2:<ahref=”home.html”>首页</a>|9

复制代码

1. 3:<ahref=”about.html”>关于</a>|0

复制代码

1. 3:<ahref=”about.html”>关于</a>|1

复制代码

1. 3:<ahref=”about.html”>关于</a>|2

复制代码

1. 3:<ahref=”about.html”>关于</a>|3

复制代码

1. 3:<ahref=”about.html”>关于</a>|4

复制代码

1. 3:<ahref=”about.html”>关于</a>|5

复制代码

为何要这么做，有过网页制造履历的伴侣也许会懂得。网站底部的导航一般都是以对照复杂的文本情势呈现，居中，再附加一些润色——年夜部分都是“|”和“·”大概“—”。html部分接纳新浪的做法，节俭了编写CSS的工夫，最主要的是让统统程度居中显现将长短常复杂的事变。只必要将<div>的text-align设置为center就高枕无忧。
这里必要会商的是，究竟利用甚么标志才算是语义化？
我们没有教科书，任何一本某某威望指南不会写着：你应当利用<ul>和<li>，而不是<div>和<p>来制造导航菜单。也就是说，我以为假如思索到实践项目标操纵，利用前者或后者都不是一个严峻到会呈现违反XHTML原则的成绩。
我们来看淘宝的底部：

在我看到，假如依照zeldman的思绪，应当如许往写：

1. 3:<ahref=”about.html”>关于</a>|6

复制代码

1. 3:<ahref=”about.html”>关于</a>|7

复制代码

1. 3:<ahref=”about.html”>关于</a>|8

复制代码

1. 3:<ahref=”about.html”>关于</a>|9

复制代码

1. 4:<ahref=”blog.html”>博客</a>|0

复制代码

1. 4:<ahref=”blog.html”>博客</a>|1

复制代码

1. 4:<ahref=”blog.html”>博客</a>|2

复制代码

1. 4:<ahref=”blog.html”>博客</a>|3

复制代码

1. 4:<ahref=”blog.html”>博客</a>|4

复制代码

1. 4:<ahref=”blog.html”>博客</a>|5

复制代码

但实践上，淘宝的代码是如许：

1. 4:<ahref=”blog.html”>博客</a>|6

复制代码

1. 4:<ahref=”blog.html”>博客</a>|7

复制代码

1. 4:<ahref=”blog.html”>博客</a>|8

复制代码

1. 4:<ahref=”blog.html”>博客</a>|9

复制代码

1. 5:<ahref=”message.html”>留言</a>|0

复制代码

1. 5:<ahref=”message.html”>留言</a>|1

复制代码

1. 5:<ahref=”message.html”>留言</a>|2

复制代码

1. 5:<ahref=”message.html”>留言</a>|3

复制代码

1. 5:<ahref=”message.html”>留言</a>|4

复制代码

为何一个云云倡始尺度化的UED小组所编写的淘宝代码中也有和Jorux说法相违反，不严厉依照语义化标志来操纵呢？
由于，如许的程度居中和增加“|”不会那末烦人。
烦人的支解线

不要小视这个“|”，到场这么一个小小的润色线条，看似复杂，实践上仍是对照头痛的。
起首我们晓得，这个竖线是支解线，是把一个个链接从视觉上分隔的一种手腕，有多种体例往完成这一个效果：
1、间接拔出“|”实体，但这和用空的table来撑开空缺一样，是不切合内容和款式分别原则。
2、利用border-right来给每个链接加上一个1px宽的边框。弱点是这个边框线条的高度界说起来对照厌恶，作为行内元素的a，没法使用到高低内边距来把持高度，委曲利用行高line-height只会让你在实践使用中毛病百出。
3、利用background来给每个链接加上一个竖线的图片背景，这类体例在视觉效果上使用天真，但弱点是会多制造一张图片（只管你能够CSSSprites大概你以为一条竖线的图片巨细能够疏忽不计），一样高度没法界说。
4、利用:after如许的伪类元素，如a:after{content:"|";}。能够再增加font-size来稍稍把持高度。只管如许的一种做法被一些css玩家所推许，究竟懂得的人少，使它看上往对照的深邃和庞大。实践上它的弱点也最多。起首，:after在版本8以下的IE中统统免谈，这就意味着年夜部分扫瞄者没法看到如许的效果。其次，看上往这一条“|”是由css来把持的款式，实践上它在html中实践天生了内容，实质上和间接在<a>以后拔出一个“|”没有区分。
综上所述，我们理应丢弃第一种做法，接纳2、3、4中的一种来显现这个支解线效果。但是接二连三的成绩是，不论你用了哪一种办法，你都要思索怎样往除最初一个“|”支解线。让导航看上是如许：
我是老迈|我是欠好意义说|老三|老四在这里|老幺
而不是如许：
我是老迈|我是欠好意义说|老三|老四在这里|老幺|
经常使用的做法是给div中的最初一个a，大概ul中的最初一个li（大概都是第一个a和li，这取决与你css中的摆布地位）增加一个id大概class，比方：

1. 5:<ahref=”message.html”>留言</a>|5

复制代码

1. 5:<ahref=”message.html”>留言</a>|6

复制代码

1. 5:<ahref=”message.html”>留言</a>|7

复制代码

1. 5:<ahref=”message.html”>留言</a>|8

复制代码

1. 5:<ahref=”message.html”>留言</a>|9

复制代码

[/code]然后在css增加对这个.last的独自界说，往除它的边框大概背景大概:after天生的content内容。
云云的烦琐，是否是已入手下手头年夜了？
程度居中

从支解线的成绩，我们往下会商导航的程度居中成绩。
淘宝的另外一个底部导航接纳了不让人头年夜的选择：

在这个例子中，HTMl以下：

1. 6:<ahref=”album.html”>相册</a>0

复制代码

1. 6:<ahref=”album.html”>相册</a>1

复制代码

1. 6:<ahref=”album.html”>相册</a>2

复制代码

1. 6:<ahref=”album.html”>相册</a>3

复制代码

1. 6:<ahref=”album.html”>相册</a>4

复制代码

1. 6:<ahref=”album.html”>相册</a>5

复制代码

1. 6:<ahref=”album.html”>相册</a>6

复制代码

1. 6:<ahref=”album.html”>相册</a>7

复制代码

1. 6:<ahref=”album.html”>相册</a>8

复制代码

1. 6:<ahref=”album.html”>相册</a>9

复制代码

这里的接纳了尺度的写法，没有支解线，没有分外的id或class，没有下面会商的烦人的各类成绩。
但是这类写法意味着，假如将li的display设置block，text-align:center没法轻松的将这个导航程度安排在页面的正中，除非你给ul界说了一个宽度，在下面的代码中淘宝也切实其实是如许往做的。
假如，导航菜单中的项目数目不克不及够断定，全体的宽度必将也要成为变量——一个未知宽度。不休地往修正这个width，以确保margin:0auto;可让这个导航程度居中无疑将让你的事情变得噜苏和坚苦。
未知宽度的程度居中

最复杂的办法，就是让每个li元素不要以block的情势float:left，以inline的体例让它们一字排开，给ul一个text-align:center就能够弄定这统统。
我做了如许一个例子，demo1。为了图费事，我没有做图，接纳背景图片的体例显现支解线，而是利用了:after天生content的办法。
在css中的最初，我增加如许两行：

1. 7:</p>0

复制代码

1. 7:</p>1

复制代码

如许，在不撑持:after的扫瞄器中，导航以最朴实的体例展示，在IE8和FF如许的扫瞄器中，支解线将显现出来，最初一个li的支解线将被删除。
下面的办法，在年夜部分工夫仍是对照好用的，但假如必要给导航菜单增加更多的效果把持，比方给每个li增加一个按钮似的背景，我们就必需让li成为块级元素。这个时分，text-align:center就有效了。
幸亏StuNicholls给出了一个办理计划——CenteringFloatLeftMenus。
我做了另外一个例子，demo2。
在如许的基本之上，不管你或删或增导航菜单的项目数目，不管你是想给它增加复杂背景致，仍是增加庞大的圆角框，你都能够沉着应对了。

更好的控制页面布局。不用多说。

AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。

学Dreamweaver技术的过程其实是一个增加信心的过程。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

仓酷云

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.