学习下第四天纵导游航菜单及二级弹出菜单淘宝网,资源下载,web标准,工具栏,知识点

活着的死人 发表于 2015-1-16 10:34:17

学习下第四天纵导游航菜单及二级弹出菜单

DIV+CSS是目前互联网网页制作最热门的方法，但对于完全手写代码，许多网页设计师都望而止步。

[*]
[*]
明天我们入手下手进修《十天学会web尺度(div+css)》的纵导游航菜单及二级弹出菜单，包括以下内容和常识点：

[*]纵向列表
[*]标签的默许款式
[*]css派生选择器
[*]css选择器的分组
[*]纵向二级列表
[*]绝对定位和相对定位
1、纵向列表

纵向列表或称为纵导游航，在网站的产物列表中使用对照普遍，如淘宝网左边的淘宝服务，明天我们就进修一下纵导游航的制造
先新建一个页面，然后拔出一个ID为menu的div，然后在计划视图当选中笔墨，点击工具栏的ul图标，即会主动拔出ul和li，然后修正笔墨内容为你必要的内容。

<divid="menu">
<ul>
<li>首页</li>
<li>网页版式结构</li>
<li>div+css教程</li>
<li>div+css实例</li>
<li>经常使用代码</li>
<li>站长杂谈</li>
<li>手艺文档</li>
<li>资本下载</li>
<li>图片素材</li>
</ul>
</div>

从预览的效果上看，周围都有很年夜的清闲，并且每行前边另有个点，这是由于标签的默许款式酿成的，上面我们必要创立款式表把标签的默许款式给扫除失落

天生的css代码以下：
<styletype="text/css">
#menuul{list-style:none;margin:0px;padding:0px;}
</style>
上面我们界说一下全局的字体，字号，行距等，点击css款式面板上的新建按钮，在弹出的窗口当选择器范例选择标签，称号选择body，然后在css编纂器中设置以下图所示属性

body全局款式界说后，上面我们给#menu界说一个灰色的1px边框及宽度，然后把li界说下背景致和下边框及内边距等

接上去界说li的背景致为浅灰色及下边框和内边距

这些属性设置完后，一个复杂的纵向列表菜单初具模子了。由于导航菜单，必要链接到别的页面，下边把这些导航加上链接，然后在界说a的形态和鼠标划过形态。
要增加链接，先选择要增加链接的笔墨，然后在属性页面链接上输出要链接的页面址，我这里输出个#，是个假造链接，不指向任何页面。

创立a的款式后，上面我们增添个交互效果，当鼠标划过链接笔墨时，让笔墨色彩酿成白色，这时候就必要用到a:hover这个伪类了

这里的a:hover属于伪类，鄙人一章节时会具体解说，大概参看http://www.ckuyun.com/div_css/882.shtml，这里只需晓得这个写法是界说鼠标划过期的款式就能够了

源代码以下：
<!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=gb2312"/><styletype="text/css">body{font-family:Verdana;font-size:12px;line-height:1.5;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{width:100px;border:1pxsolid#CCC;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;}</style></head><body><divid="menu"><ul><li><ahref="@#">首页</a></li><li><ahref="#">网页版式结构</a></li><li><ahref="#">div+css教程</a></li><li><ahref="#">div+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></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转

2、标签的默许款式

年夜多半标签都有本人的默许款式，好比第二天课程中碰到的body默许外边距，别的本例中ul前的圆点及左边的内边距，另h1-h6字体巨细各不不异，em默许为斜体，strong暗示粗体。正由于有这些默许款式，一个计划公道的页面，即便没有加载款式，也能让用户很简单浏览。但此时这些默许款式对我们没用，以是必要扫除失落，为了便利，倡议用标签重界说体例，如许能够很复杂地把全局的款式给一致起来。别的页面中的图片增加链接后会默许增加个边框，ul默许情形下会在列表前增加圆点，这些都是必要往失落的。
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{margin:0px;padding:0px;font-size:12px;font-weight:normal;}
ul{list-style:none;}
img{border-style:none;}

这里选择器范例选择复合内容，我用的是dw最新cs5版本，比之前章节用的cs3版本中更公道了，把ID和伪类分隔了。然后在选择器称号中输出我们经常使用的带默许款式的标签，两头以英文逗号分开

上面对img标签举行重界说，扫除图片有链接时默许的边框

下边设置全局ul标签默许的圆点为无

如许就很复杂把经常使用标签的默许款式给扫除失落了，假如必要边距的话再从头界说，也制止了各个扫瞄器对标签默许款式剖析差别形成页面显现纷歧样的成绩。有关标签的默许款式更具体的解说，请参看http://www.ckuyun.com/div_css/881.shtml
3、css派生选择器

CSS初学者不晓得利用子选择器是影响他们效力的缘故原由之一。派生选择器能够匡助你勤俭大批的class界说。我上边的例子中使用了些派生选择器以下的css代码
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;}
#menuul和#menuulli即为派生选择器，假如我们把前边的#menu往失落，那末将是对ul标签重界说，重界说的属性将使用到全局，而前边加上#menu后，将是界说ID为menu元素内ul的款式，设置它的款式只对#menu下的ul失效，不合错误它以后的ul失效，这个有点像编程中的部分变量，而间接界说ul则相称于全局变量。#menuulli是界说ID为menu元素内ul下的li，派生选择器可使我们不必再给每一个li界说一个款式名来界说款式，只需利用派生选择器，从它的父元素处选择便可，如许能年夜年夜进步效力。
4、css选择器的分组

你能够对选择器举行分组，如许，被分组的选择器就能够分享不异的声明。用逗号将必要分组的选择器分隔。鄙人面的例子中，我们对一切的题目元素举行了分组。一切的题目元素都是绿色的，p段落、div分区、span都是20像素字体。
h1,h2,h3,h4,h5,h6{
color:green;
}
p,div,span{
font-size:20px;
}
5、纵向二级列表

二级菜单即指当鼠标放到一级菜单上后，会弹出响应的二级菜单，移往鼠标后主动消散，我们接着上边的例子举行修正，代码以下：
<divid="menu">
<ul>
<li><ahref="@#">首页</a></li>
<li><ahref="#">网页版式结构</a>
<ul>
<li><ahref="#">自顺应宽度</a></li>
<li><ahref="#">流动宽度</a></li>
</ul>
</li>
<li><ahref="#">div+css教程</a>
<ul>
<li><ahref="#">老手进门</a></li>
<li><ahref="#">视频教程</a></li>
<li><ahref="#">罕见成绩</a></li>
</ul>
</li>
<li><ahref="#">div+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>
接上去修正css款式表，先修正#menuulli，给其增添一个position:relative;属性

然后界说ID为menu下ul下里内的ul款式以下：

界说display:none后，默许形态下将埋没

界说#menuulliul的position:absolute;left:100px;top:0px;，那末它将以相对它父元素li的上为0，左为100的地位显现。最初我们设置当鼠标划事后显现上级菜单的款式

#menuulli:hoverul这个款式对照难了解，它的意义是界说ID为menu下ul下li，当鼠标划过期ul的款式，这里设置为display:block，指的是鼠标划过期显现这块内容，这也完成我们明天想要的效果。个中的:hover和前边说的链接一样，同属于伪类，但有一点注重，今朝IE6只撑持a的伪类，别的标签的伪类不撑持，以是要想在IE6下也显现准确，必要借助js来完成，我们界说一个类.current（本人定名，需和JS中不异）的属性为display:block;然后当鼠标划事后，用JS给以后li增加上这个款式上，依据css的优先级：指定的高于承继的准绳，就完成了IE6下的准确显现。以是必要加上JS和款式#menuulli.currentul{display:block;}。
#menuulli.currentul{display:block;}<!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=gb2312"/><scripttype="text/javascript"><!;node.onmou搜索引擎优化ver=function(){this.className+="current";}node.onmou搜索引擎优化ut=function(){this.className=this.className.replace("current","");}}}}window.onload=startList;//--><!]]></script><styletype="text/css">body{font-family:Verdana;font-size:12px;line-height:1.5;}img{border-style:none;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{width:100px;border:1pxsolid#CCC;border-bottom:none;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{background:#eee;padding:0px8px;height:26px;line-height:26px;border-bottom:1pxsolid#CCC;position:relative;}#menuulliul{display:none;position:absolute;left:100px;top:0px;width:100px;border:1pxsolid#ccc;border-bottom:none;}#menuulli.currentul{display:block;}#menuulli:hoverul{display:block;}</style></head><body><divid="menu"><ul><li><ahref="#">首页</a></li><li><ahref="#">网页版式结构</a><ul><li><ahref="#">自顺应宽度</a></li><li><ahref="#">流动宽度</a></li></ul></li><li><ahref="#">div+css教程</a><ul><li><ahref="#">老手进门</a></li><li><ahref="#">视频教程</a></li><li><ahref="#">罕见成绩</a></li></ul></li><li><ahref="#">div+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></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转

终极显现效果以下：

上节课解说块级元素和内联元素时提到display，明天用到了display:block;和display:none;值为none时暗示将这个元素埋没，为block时暗示将它的埋没形态改成显现形态具体先容请参考css手册
6、绝对定位和相对定位

[*]定位标签：position
[*]包括属性：relative（绝对）absolute（相对）
1.position:relative;假如对一个元素举行绝对定位，起首它将呈现在它地点的地位上。然后经由过程设置垂直或程度地位，让这个元素"相对"它的原始出发点举行挪动。（再一点，绝对定位时，不管是不是举行挪动，元素仍旧占有本来的空间。因而，挪动元素会招致它掩盖其他框）
2.position:absolute;暗示相对定位，地位将根据扫瞄器左上角入手下手盘算。相对定位使元素离开文档流，因而不占有空间。一般文档流中元素的结构就像相对定位的元素不存在时一样。（由于相对定位的框与文档流有关，以是它们能够掩盖页面上的其他元素并能够经由过程z-index来把持它层级序次。z-index的值越高，它显现的越在下层。）
3.父容器利用绝对定位，子元素利用相对定位后，如许子元素的地位不再相对扫瞄器左上角，而是相对父容器左上角
4.绝对定位和相对定位必要共同top、right、bottom、left利用来定位详细地位，这四个属性只要在该元素利用定位后才失效，别的情形下有效。别的这四个属性同时只能利用相邻的两个，不克不及即便用上又利用下，或即便用左，又利用右
更具体关于绝对定位和相对定位的先容请参考http://www.ckuyun.com/div_css/899.shtml
本节解说的常识点较多也较主要，但愿人人仔细进修，仔细下手做一遍，加深印象。
切入正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来，并不是说一个页面里没有TABLE，而是在什么地方使用TABLE，你要认识到TABLE是表格，是存放数据用的，而不是用来布局的。

飘飘悠悠 发表于 2015-1-16 20:00:02