来看看：CSS网页制造教程:制造网页导航条
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。网页制造poluoluo文章简介：CSS网页制造教程:制造网页导航条.
相干链接
PS导航计划、网页计划教程
CSS标签重置
关于XHTML+CSS结构起着一个主要的决意性感化，它是进步页面扫瞄器兼容性的第一步。
那末甚么是标签重置呢？
望文生义，就是对HTML中的一切标签属性重置，由于每一个扫瞄器都有一个本人默许的CSS文件，对HTML中的一切的标签举行界说，以便没有界说CSS的页面可以一般显现在页面，页面在加载的时分假如没有找到自带的CSS文件，扫瞄器就用事前为您筹办好的CSS款式，可是这个关于页面结构，没有甚么用，以是我们必要将它们从头设置，不外标签有那末多，属性那末多，怎样设置？！这都是个成绩！
哈哈，不要发急，成绩很简单办理，实在在我们结构页面的时分，将最简单影响页面结构的是HTML标签中的表里边距，只需我们将最经常使用的标签的表里边距设为零就OK了~好比一个页面顶用到上面div,p,ul,li四个标签那末我们的重置代码就要这么写
body,div,p,ul,li{margin:0;padding:0;}由于body标签分歧的扫瞄器界说的内边距是纷歧样的，以是在下面代码中到场body。
假如前面我用到form,h1,h2标签的话，我就再增加上往就OK了
body,div,p,ul,li,form,h1,h2{margin:0;padding:0;}
用到几个标签就写几个！
有些人很喜好用*{margin:0;padding:0;},实在KwooJan不倡议这么用，由于HTML标签太多了，HTML4.01参考手册中就多达89个，我们平常经常使用的也就那末几个，以是没有需要将一切标签重置，如许反而使页面加载速率变慢！出格是关于年夜站点，更不倡始！
不外呢，假如页面出了成绩，用这个能够查验一下，是否是有标签没有重置而招致的结构错位哟~！
<P>
网页制造poluoluo文章简介：CSS网页制造教程:制造网页导航条.
几个css元素的复杂注释divuldldtoldiv，这个很罕见，块级元素，div只管罕用，和table一样，嵌套越少越好。
ol有序列表
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
体现为：
1……
2……
3……
ul无序列表，体现为li后面是年夜圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
良多人简单疏忽dldtdd的用法
dl内容块
dt内容块的题目
dd内容
能够这么写：
<dl>
<dt>题目</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt和dd中能够再到场olulli和p
了解这些今后，在利用div结构的时分，会便利良多，w3c供应了良多元素帮助结构。
<P>
网页制造poluoluo文章简介：CSS网页制造教程:制造网页导航条.
注：只需本节又看不懂的，就检察本节课程的课程关头词大概往看前三节教程！
课程入手下手：
前三节课，我们晓得了甚么是“内容块状元素和内联元素”，和XHTML+CSS结构的中心观点“盒子模子”，同时又进修了一下页面结构中两种办法中的一种办法“浮动”，此次我们就使用这三个观点，来制造一款，典范的导航条，别看它其貌不扬，但是网上一切的导航条都能够再它的基本上修正而来哟~，凶猛吧~！实在实际都是一样的，只需你能了解并学会这节课的内容，今后再坚苦的导航条你都能够很应对，EASY！！！
OK！我们要做的导航条的效果以下：
鼠标挪动上往背景变黑，而且字体色彩酿成红色
实在做这款导航条很简单的，你只必要动动鼠标敲敲键盘，随着KwooJan做就是了，呵呵
【第一步】我们要先做一个容器（请求：ID为“nav”，宽度为960px，高度为：35px，位于页面程度正中，与扫瞄器顶部的间隔是30px；),这个容器就是放我们的导航的哟~代码以下：
HTML代码：
<divid="nav"></div>
CSS代码：
#nav{
width:960px;
height:35px;
background:#CCC;/*为了便于检察地区局限巨细，故而加个背景致*/
margin:0auto;/*程度居中*/
margin-top:30px;/*顶部30px*/
}另有一点必要提示的是，为了页面在扫瞄器的兼容性，不要健忘在CSS文件顶部到场标签重置代码哟~
代码：
body,div{padding:0;margin:0;}这里就未几说了，不分明的就看，课程顶部的课程关头词
怎样，作出来了没有，效果是否是一个灰色条，位于页面的正两头，而且一切扫瞄器效果一样呢~呵呵
(假如没有做出来证实你没有仔细看教程哟~用这类立场看教程会学欠好的，自己我把全部XHTML+CSS的实际都紧缩到教程里了，大概说教程的“常识点浓度”很高，偶然必要你一字不漏的往品我说的话，不要字斟句酌的往看哟~只需你把我写的教程逐字逐句的研讨透了，KwooJan包管你今后只需做出个页面就很Easy的兼容各类扫瞄器，而且代码相对的精简！CSS文件加载速率年夜年夜提拔哟~)
【第二步】
盒子做好了，我们就要往内里放导航条中的内容了“CSS进修学前筹办进门教程进步教程结构教程出色使用”，假如我们把这内容(今朝有6个)，当做羽觞的话，假如间接放到盒子内里的话，一定会乱，而且还会七颠八倒，一点按次都没有，可是我们平常会用一个隔板将每一个羽觞离隔，如许就是羽觞很有序的放进盒子，而且牢稳并且防震，便利利用！如今我们把这个隔板叫做“有序列表”起个英文名字叫：ul,内里的每一个单位格我们也给起个英文名字叫“li”，人人想一想内里的这个ul是否是和盒子内里的空间一样年夜，小了，羽觞放不出来，年夜了杯子就会不稳，以是我们界说UL的时分巨细必定也要和表面的盒子一样年夜哟~,以是呢，我们的代码就晓得怎样写了吧
HTML代码
<divid="nav">
<ul>
<li>CSS进修</li>
<li>学前筹办</li>
<li>进门教程</li>
<li>进步教程</li>
<li>结构教程</li>
<li>出色使用</li>
</ul>
</div>
CSS代码：
#navul{
width:960px;
height:35px;
}效果作出来了没有，上面是在IE6和FF中显现效果(其他扫瞄器效果人人本人测试，总结纪律)：
效果纷歧样吧，不妨，IE6中盒子被撑年夜，FF中却没有，可是我们的“羽觞”却出来了，另有我们不但愿我们的羽觞纵向分列，而是横向分列，怎样办呢？给人人一分钟工夫想~~~
想出来了没有？甚么没有？
不妨，我带着人人想一想，由于<li>标签也是块状元素，以是他也有块状元素的“强横”，不同意其他元素和本人处于统一行，统共六个<li>,以是他们六个就像台阶似的纵向分列起来了，我提醒到这里，人人应当晓得怎样做才干让这些“羽觞”横向分列了吧！^_^
对喽~用浮动Float！但是让谁浮动呢，固然是<li>标签喽~代码以下：
#navulli{float:left;}效果是否是和上面的一样呢
人人会发明固然“羽觞”横向分列了，但IE6和FF中的效果仍是纷歧样的
1）盒子(#nav)高度纷歧样
2)在FF中“羽觞”后面有个年夜黑圆点，而IE6中却没有！
办理下面这两个成绩，也很简单，以下
1）做到这里标签ul和li有无举行重置？只需我们在页面中新写一个标签，就要举行重置，做法是，将ul、li标签到场重置代码中“body,div,ul,li{padding:0;margin:0;}”
2）“羽觞”后面的年夜黑圆点，是FF给li标签订义的默许款式，我们只必要将li的默许款式往失落就是了，在li标签的CSS属性中到场“list-style:none;”就OK了
如今在看看，两种扫瞄器的显现效果是否是和下图一样了呢~
假如你做到这里的效果和我说的纷歧样，不妨，我把做到今朝第二步的代码收回来，你对着下面说的再看看，相对能够学会
【第三步】
第二步的效果还不是我们想要的，一切的“羽觞”都没有坚持“车距”，前面的笔墨全体贴着后面的笔墨。
好~！我们如今就将他们分隔！设置<li>标签的宽度为100像素：
CSS代码：
#navulli{
width:100px;
float:left;
list-style:none;
}为了便于察看我们临时将<li>标签的背景设置成白色(设置背景致，是页面结构中一个很主要的办法，便于检察块状元素地区局限)
CSS代码：
#navulli{
width:100px;
float:left;
list-style:none;
background:#900;
}
效果以下：
瞧瞧，发明成绩了吧，我们的<li>标签的高度并没有和我们的盒子的高度一样，这就是为何在结构页面的时分，常常会设置一下背景致，就是这个事理，否则的话，你是发下不了埋没的成绩，可是常常这些埋没的成绩就会招致页面扫瞄器的兼容性年夜年夜下降哟~
如今暂不把<li>标签的背景致往失落，当我们把它调成我们必要的效果的时分再往失落！
持续，我们把li的高度设置成盒子的高度35像素，代码本人写，怎样，高度一样了吧，可是笔墨却位于顶端，怎样将它设置成居中呢，对喽~设置行距(假如你不会，倡议你看看这篇文章《两种办法完成垂直居中》)，在<li>的CSS代码中再到场上面这句代码：
line-height:35px;效果是否是和下图一样呢
好垂直居中办理了，轮到程度居中了，这个就简单了吧，间接在<li>的CSS代码中再到场上面这句代码：
text-align:center;怎样，效果有点意义了吧~到这里我再发一次代码，包管人人每一个步骤都学会！
好~！做到这里，人人有无想过一个成绩，由于我们的<li>标签是设置了宽度为100像素，已限制了它的宽度，假如笔墨多了它不会主动伸缩的自顺应的，那这时候候我们就必要往失落其宽度，这时候候<li>的宽度就会减少至笔墨的宽度，也就是说，假如我们再增加一些笔墨(把我们的羽觞换成一个年夜个的)，这个<li>也会随着变年夜，人人往失落宽度后尝尝，是否是这个模样，如许我们的导航条就对照天真了，不会对“羽觞”的巨细投鼠忌器了！
固然这个宽度自顺应办理了，可是给笔墨的空间太少，视觉上感到不恬逸，那末我们就帮它扩展一下空间，可是又要包管宽度自顺应，办理办法很简单，加上摆布内边距就ok了，这里设置边距为10px，在<li>标签加高低面代码，特地把背景色彩往失落
padding:010px;
效果是否是如许
不管你的“杯子”是增年夜仍是减少，<li>不仅宽度会随之增年夜减少，可是杯子和杯子之间的间隔永久稳定！怎样有点意义吧~！
网页制造poluoluo文章简介：CSS网页制造教程:制造网页导航条.
我们将导航条做成了上面的效果
可是此时的导航条还没有链接，还不克不及点击，这节课我们就要做一个完全的导航条
【第四步】
我们必要将下面的导航条做以下几个修正
1）给下面的导航加上链接；
2）链接笔墨巨细修正为12px;
3）而且划定链接款式，鼠标移上往和拿开的效果
修正办法以下
1）导航加链接，HTML代码以下：
<divid="nav">
<ul>
<li><ahref="#">CSS进修</a></li>
<li><ahref="#">学前筹办</a></li>
<li><ahref="#">进门教程下载</a></li>
<li><ahref="#">进步教程</a></li>
<li><ahref="#">结构基本教程</a></li>
<li><ahref="#">出色使用</a></li>
</ul>
</div>
2)笔墨巨细12像素，CSS代码以下
a{font-size:12px;}
3）鼠标挪动下面和拿开效果
#navullia{color:#333;text-decoration:none;}
#navullia:hover{color:#fff;text-decoration:underline;}
效果是否是和上面一样，鼠标移上往酿成红色的有下划线的链接
到这里，基础上一个导航条就出来了~不外为了能让人人再进步一个条理，KwooJan就帮人人对下面的导航条举行一下修正，算是举一反三！
我但愿鼠标移上往后，链接的背景酿成玄色的，上面是我的步骤
起首把链接a加上一个背景，以便利看出来链接a的地区
#navullia{color:#333;text-decoration:none;background:#0FF;}
怎样，晓得a的地区了吧
如今我要将a的高度设定为35px和盒子一样高度，如许我在把方才的亮蓝色背景就能够完整掩盖上面盒子的灰色了
因而我拔出上面白色的代码：
#navullia{height:35px;color:#333;text-decoration:none;background:#0FF;}
但是不论我怎样革新扫瞄器，高度都没有任何变更，这是为何呢？！
缘故原由就在于a属于内联元素，内联元素是没法设置宽度和高度的，width和height只是针对块状元素，说道这里，办理举措就出来了，只需我们把内联元素a转化成块状元素就能够了，我们用“display:block;”将内联元素转化成块状元素。人人先不要加这段代码，闭上眼想一想界面会酿成甚么模样？
#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;}
实践效果：
IE6和FF显现效果竟然天差地别，IE6中为何一切链接纵向分列了呢？实在这个也很复杂，IE以为a既然转化成块状元素，就具有块状元素的特征---强横，它是不同意其他元素和它统一行，再加上也没有对a的宽度举行设定，以是才招致IE6中这么显现，不外FF中为何不如许呢，和我们设想的一样，那是由于FireFox以为a即便为块状元素，也应当遭到表面<li>元素的影响，以是云云实际，事实以谁尺度，由于人人都以为FF是尺度扫瞄器，以是人人能够以FF为尺度，不外KwooJan以为，不必管谁尺度不尺度，那都是绝对的，我以为IE尺度，FF就不尺度了呢，我不肯意在这个成绩上华侈精神，我更喜好将精神用在思索怎样进步页面的扫瞄器兼容性！
看到这里我想人人应当晓得怎样让页面在IE6中显现的和FF中一样，很复杂，只必要在a的CSS代码中到场“float:left;”
#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;float:left;}
成绩水到渠成，这仍是用到前三节的课程内容，假如你想不起来怎样办理，申明后面的课，出格是第二节的课，你没有真正了解！怎样做，你应当晓得....归去再品品往
可是如许你不觉着，每一个毗连的右边和右侧是否是太挤了，紧贴着a地区的左边和右边，应当怎样做？仍是很复杂，只必要再加上一句话“padding:010px;”
#navullia{display:block;height:35px;color:#333;text-decoration:none;background:#0FF;float:left;padding:010px;}
如今再看看，是否是上面的效果
如许看看是否是不挤了吧，哈哈，看着恬逸了吧，可是这离我们的想要的效果只要一步了，由于如今看到的毗连效果是，鼠标移上往和拿开背景都是蓝色的，我们如今只必要将，a链接中的背景往失落，移到a:hover的CSS代码中，而且色彩酿成“#000”就ok了~
#navullia{display:block;height:35px;color:#333;text-decoration:none;float:left;padding:010px;}
#navullia:hover{color:#fff;text-decoration:underline;background:#000;}
怎样，和上面的效果一样么？
效果很多多少了吧，这下是我们想要的效果了吧~
固然！人人还能够把背景不设置成玄色，用个图片也能够！如今人人分明，为何一入手下手我说这款导航栏能够演化出不计其数的分歧特征的导航栏了吧~万变不离其宗！
第四课的思绪就是如许的，假如吃透了这节课，那末今后甚么模样的导航都很容易作出来，假如你在和js很好的分离起来用~你就能够很自傲的向老板提出加薪了！！！^_^
下节节课我将给人人用浮动办法结构一个页面，敬请等候！
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
页:
[1]