代码学习群简易教程（34）

css页内插入样式 —导航菜单的制作方法 本节继续讲解css页面插入样式的应用方法。具体内容为“导航菜单的制作方法”。 一、一级菜单： 代码举例： <FONT style="FONT-SIZE: 5px">☆</FONT> <STYLE type=text/css> .test ul{list-style:none;} .test li{float:left;width:100px;background:#ccc;margin-left:3px;line-height:30px;} .test a{display:block;text-align:center;height:40px;} .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline;} .test a:hover{color:#0006ff; font-weight:bold;text-decoration:none;background:url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif) #0f0 no-repeat 0px 10px;} </STYLE> <DIV class=test> <UL> <LI><A href="http://www.360doc.com/userhome/11587149" target=_blank>巩华兰儿</A> </LI> <LI><A href="http://www.360doc.com/userhome/4127803" target=_blank>春天没来</A> </LI> <LI><A href="http://www.360doc.com/userhome/5739036" target=_blank>外婆首页</A> </LI> <LI><A href="http://www.360doc.com/userhome/10432839" target=_blank>莲友1972</A> </LI> <LI><A href="http://www.360doc.com/userhome/9213609" target=_blank>我是麦瑞</A> </LI> <LI><A href="http://www.360doc.com/userhome/18080052" target=_blank>快乐女侠</A> </LI></UL></DIV> 代码解析： <FONT style="FONT-SIZE: 5px">☆</FONT> 上面的红色代码是我添加的一个内容。其目的是为了使下面设置的css样式有效。此内容可以替换，替换为任意的文字或者字母均可。 <STYLE type=text/css>为：<样式标签 类型＝文本/css> .test ul{list-style:none;}为：测试 无序列表{设置所有的列表属性：默认值；} .test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;} 为： 测试 列表项目{浮动：左；宽度：100px；背景：灰色；左外边距：3px;行高：30px；} .test a{display:block;text-align:center;height:40px;} 为： 测试 链接{生成框的类型：行内框；对齐方式；居中对齐；高：30px；} .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} 测试 未访问的链接{文字颜色：灰色；背景：背景图片地址（arrow_off.gif） 灰色 背景图片平铺 5px 12px；添加到文本的修饰：默认值；} .test a:visited{color:#666;text-decoration:underline;} 为： 测试 已访问的链接{颜色：灰色；添加到文本的修饰：下划线；} .test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif) #0006ff no-repeat 0px 10px;} 测试链接：当有鼠标悬停在链接上{颜色：白色；文字粗细：粗体；添加到文本的修饰：默认值；背景：红色 背景平铺 5px 12px；} </STYLE>：样式尾标签。 <DIV class=test>：<块区标签 元素的类名＝测试> <UL>：无序列表标签 <LI><A href="http://www.360doc.com/userhome/11587149">巩华兰儿</A> </LI> <列表项目标签><链接标签 链接地址＝“具体地址”>巩华兰儿<链接尾标签><列表项目尾标签> …… </DIV>：<块区尾标签> 样式表代码顺序： 一、css样式首标签。 二、2—6测试部分：给网页（这里是指“导航菜单”）添加css样式的具体内容。大括号前面的代码，是css选择器的名称。大括号里面的内容，是css选择器的声明。 css选择器的名称，是指要给这篇导航菜单添加的css样式的名称；css选择器的声明，是指要给这篇导航菜单添加的css样式的具体内容。 2—6中css选择器的声明，是可以修改的。 三、css样式尾标签。 四、块区首标签。块区首标签中的属值：test，一定要与2—6中css选择器的名称中的test相同。 五、无序列表标签。 六、列表项目。列表项目可以有若干个。每一个列表项目中链接一个网址。网址可以是网站的地址，也可以是文章或者图片的地址。 当列表项目超过6个的时候，就会换行。效果如下： 代码举例： <FONT style="FONT-SIZE: 5px">☆</FONT> <STYLE type=text/css> .test ul{list-style:none;} .test li{float:left;width:100px;background:#ccc;margin-left:3px;line-height:30px;} .test a{display:block;text-align:center;height:40px;} .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline;} .test a:hover{color:#0006ff; font-weight:bold;text-decoration:none;background:url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif) #0f0 no-repeat 0px 10px;} </STYLE> <DIV class=test> <UL> <LI><A href="http://www.360doc.com/userhome/11587149" target=_blank>巩华兰儿</A> </LI> <LI><A href="http://www.360doc.com/userhome/4127803" target=_blank>春天没来</A> </LI> <LI><A href="http://www.360doc.com/userhome/5739036" target=_blank>外婆首页</A> </LI> <LI><A href="http://www.360doc.com/userhome/10432839" target=_blank>莲友1972</A> </LI> <LI><A href="http://www.360doc.com/userhome/9213609" target=_blank>我是麦瑞</A> </LI> <LI><A href="http://www.360doc.com/userhome/18080052" target=_blank>快乐女侠</A> </LI> <LI><A href="http://www.360doc.com/userhome/6860204" target=_blank>以勒。。</A> </LI> <LI><A href="http://www.360doc.com/userhome/9496045" target=_blank>渔樵旧草庐</A> </LI> <LI><A href="http://www.360doc.com/userhome/7536829" target=_blank>銀花</A> </LI> <LI><A href="http://www.360doc.com/userhome/7564225" target=_blank>静听心声</A> </LI> <LI><A href="http://www.360doc.com/userhome/5004831" target=_blank>娴情雅致</A> </LI> <LI><A href="http://www.360doc.com/userhome/10813888" target=_blank>梅竹苑</A> </LI></UL></DIV> 也可以添加一套块区标签，控制增加的列表项目。效果如下： 代码举例： <FONT style="FONT-SIZE: 5px">☆</FONT> <STYLE type=text/css> .test ul{list-style:none;} .test li{float:left;width:100px;background:#ccc;margin-left:3px;line-height:30px;} .test a{display:block;text-align:center;height:40px;} .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline;} .test a:hover{color:#0006ff; font-weight:bold;text-decoration:none;background:url(http://image20.360doc.com/DownloadImg/2010/12/1920/7793984_52.gif) #0f0 no-repeat 0px 10px;} </STYLE> <DIV class=test> <UL> <LI><A href="http://www.360doc.com/userhome/11587149" target=_blank>巩华兰儿</A> </LI> <LI><A href="http://www.360doc.com/userhome/4127803" target=_blank>春天没来</A> </LI> <LI><A href="http://www.360doc.com/userhome/5739036" target=_blank>外婆首页</A> </LI> <LI><A href="http://www.360doc.com/userhome/10432839" target=_blank>莲友1972</A> </LI> <LI><A href="http://www.360doc.com/userhome/9213609" target=_blank>我是麦瑞</A> </LI> <LI><A href="http://www.360doc.com/userhome/18080052" target=_blank>快乐女侠</A> </LI></UL></DIV><BR><BR> <DIV class=test> <UL> <LI><A href="http://www.360doc.com/userhome/6860204" target=_blank>以勒。。</A> </LI> <LI><A href="http://www.360doc.com/userhome/9496045" target=_blank>渔樵旧草庐</A> </LI> <LI><A href="http://www.360doc.com/userhome/7536829" target=_blank>銀花</A> </LI> <LI><A href="http://www.360doc.com/userhome/7564225" target=_blank>静听心声</A> </LI> <LI><A href="http://www.360doc.com/userhome/5004831" target=_blank>娴情雅致</A> </LI> <LI><A href="http://www.360doc.com/userhome/10813888" target=_blank>梅竹苑</A> </LI></UL></DIV> 还可以给你的导航菜单添加一些装饰。效果见： http://www.360doc.com/content/14/0902/18/4127803_406575178.shtml http://www.360doc.com/content/14/0902/21/4127803_406612132.shtml 二、下拉菜单： 1、横向下拉菜单： 代码举例： <DIV align=center> <TABLE style="POSITION: relative; BORDER-BOTTOM-COLOR: rgb(0,200,0); BORDER-TOP-COLOR: rgb(0,200,0); WIDTH: 150px; HEIGHT: 140px; BORDER-RIGHT-COLOR: rgb(0,200,0); BORDER-LEFT-COLOR: rgb(0,200,0); TOP: 0px; LEFT: 0px" id=table1 border=0> <TBODY> <TR> <TD><EMBED height=420 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=680 src=http://diy.poco.cn/livephoto/main.swf?data=/mod/446/174171446/20130910/5431230280148905201309101655 allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"> <DIV style="POSITION: absolute; TOP: 50px; LEFT: 170px" class=divBorderStyle height="57" width="630"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 33pt; FONT-WEIGHT: normal" color=#00ff00><B>横向下拉菜单</B></FONT></DIV> <DIV style="POSITION: absolute; TOP: 130px; LEFT: 250px" class=divBorderStyle height="57" width="369"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 25pt; FONT-WEIGHT: normal" color=#00ff00><B>——导航菜单</B></FONT></DIV></TD></TR></TBODY></TABLE></DIV> <META content=zh-CN http-equiv=Content-Language> <STYLE type=text/css> <!-- * {margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:18px; } #nav { height: 30px; width: 580px; list-style-type: none; padding-left:100px; line-height:30px;overflow:hidden;background:#999; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#EEE; text-decoration:none; } #nav a:visited { color:#EEE;text-decoration:none; } #nav a:hover { color:#00F;text-decoration:none;font-weight:bold;background:#CCC; } #nav li { float: left; width: 80px; } #nav li ul { line-height: 30px; list-style-type: none; text-align:left; left: -700px; width: 420px; //注意,这里一定要设置宽度; position: absolute; background:#CCC; } #nav li ul li{ float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float } #nav li ul a{ display: block; width: 65px;text-align:left;padding-left:15px; } #nav li ul a:link { color:#eee; text-decoration:none; } #nav li ul a:visited { color:#eee;text-decoration:none; } #nav li ul a:hover { color:#eee;text-decoration:none;font-weight:normal;background:#C00; } #nav li:hover ul { left:25%; } #nav li.sfhover ul { left:25%; } #content { clear: left; } --> </STYLE> <UL id=nav> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单一</A> <UL> <LI><A href="http://www.360doc.com/content/14/0302/13/4127803_357058234.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/14/0301/08/4127803_356640150.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/13/0608/07/4127803_291411217.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/12/0922/21/4127803_237624968.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/12/0717/11/4127803_224695296.shtml" target=_blank>菜单一</A> </LI></UL></LI> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单二</A> <UL> <LI><A href="http://www.360doc.com/content/13/0131/06/4127803_263351250.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0914/08/4127803_236019042.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0810/14/4127803_229402678.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0610/17/4127803_217271991.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0605/04/4127803_216060988.shtml" target=_blank>菜单二</A> </LI></UL></LI> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单三</A> <UL> <LI><A href="http://www.360doc.com/content/14/0413/09/4127803_368461276.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/14/0201/14/4127803_349172943.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/14/0108/20/4127803_343673019.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/13/0825/17/4127803_309816084.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/13/0723/10/4127803_301909225.shtml" target=_blank>菜单三</A> </LI></UL></LI> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单四</A> <UL> <LI><A href="http://www.360doc.com/content/14/0829/17/4127803_405637165.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/14/0614/19/4127803_386607218.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/14/0611/16/4127803_385733311.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/13/1113/06/4127803_328788897.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/13/0917/13/4127803_315151444.shtml" target=_blank>菜单四</A> </LI></UL></LI> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单五</A> <UL> <LI><A href="http://www.360doc.com/content/14/0803/07/4127803_399052132.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0721/21/4127803_396132033.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0721/21/4127803_396127687.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0608/12/4127803_384782637.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0608/12/4127803_384782478.shtml" target=_blank>菜单五</A> </LI></UL></LI> <LI title=一级菜单><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单六</A> <UL> <LI><A href="http://www.360doc.com/content/11/0912/07/4127803_147601768.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/13/1204/06/4127803_334307030.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/13/0406/20/4127803_276534541.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/12/0203/10/4127803_183824611.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/12/0216/17/4127803_187138581.shtml" target=_blank>菜单六</A> </LI></UL></LI></UL><BR> <DIV><FONT style="FONT-SIZE: 24px" color=#ff0000><STRONG>说明：</STRONG></FONT><BR><FONT style="FONT-SIZE: 20px">一级菜单的地址是文件夹的地址，二级菜单的地址是文章的地址。</FONT></DIV> <DIV align=right><FONT style="FONT-SIZE: 29px" color=#ff0000><STRONG>“春天没来”编撰</STRONG></FONT></DIV> <DIV align=right><FONT style="FONT-SIZE: 24px" color=#ff0000>2014年9月5日于北京</FONT></DIV> 上面的代码中，在列表项目标签中有“一级菜单”标题的是一级菜单，其余的是下拉菜单（即：二级菜单）。 下拉菜单的代码注释，请你参阅我撰写的这篇文章： http://www.360doc.com/showWeb/0/0/406965992.aspx 2、竖向下拉菜单： 代码举例： <DIV align=center> <TABLE style="POSITION: relative; BORDER-BOTTOM-COLOR: rgb(0,200,0); BORDER-TOP-COLOR: rgb(0,200,0); WIDTH: 150px; HEIGHT: 140px; BORDER-RIGHT-COLOR: rgb(0,200,0); BORDER-LEFT-COLOR: rgb(0,200,0); TOP: 0px; LEFT: 0px" id=table1 border=0> <TBODY> <TR> <TD><EMBED height=420 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=680 src=http://diy.poco.cn/livephoto/main.swf?data=/mod/446/174171446/20130910/5431230280148905201309101655 allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"> <DIV style="POSITION: absolute; TOP: 50px; LEFT: 170px" class=divBorderStyle width="630" height="57"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 33pt; FONT-WEIGHT: normal" color=#00ff00><B>竖向下拉菜单</B></FONT></DIV> <DIV style="POSITION: absolute; TOP: 130px; LEFT: 250px" class=divBorderStyle width="369" height="57"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 25pt; FONT-WEIGHT: normal" color=#00ff00><B>——导航菜单</B></FONT></DIV></TD></TR></TBODY></TABLE></DIV> <META content=zh-CN http-equiv=Content-Language> <STYLE type=text/css> <!-- * {margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:18px; } #nav { height: 30px; width: 580px; list-style-type: none; padding-left:100px; line-height:30px;overflow:hidden;background:#999; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#EEE; text-decoration:none; } #nav a:visited { color:#EEE;text-decoration:none; } #nav a:hover { color:#00F;text-decoration:none;font-weight:bold;background:#CCC; } #nav li { float: left; width: 80px; } #nav li ul { line-height: 30px; list-style-type: none; text-align:left; left: -700px; width: 80px; //注意,这里一定要设置宽度; position: absolute; background:#CCC; } #nav li ul li{ float: left;width: 480px; //float就是子菜单横向的关键,可以继承父菜单而省略float } #nav li ul a{ display: block; width: 65px;text-align:left;padding-left:15px; } #nav li ul a:link { color:#F1F1F1; text-decoration:none; } #nav li ul a:visited { color:#F1F1F1;text-decoration:none; } #nav li ul a:hover { color:#FFF;text-decoration:none;font-weight:normal;background:#C00; } #nav li:hover ul { left:25%; } #nav li.sfhover ul { left:25%; } #content { clear: left; } --> </STYLE> <UL id=nav> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单一</A> <UL> <LI><A href="http://www.360doc.com/content/14/0302/13/4127803_357058234.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/14/0301/08/4127803_356640150.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/13/0608/07/4127803_291411217.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/12/0922/21/4127803_237624968.shtml" target=_blank>菜单一</A> </LI> <LI><A href="http://www.360doc.com/content/12/0717/11/4127803_224695296.shtml" target=_blank>菜单一</A> </LI></UL></LI> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单二</A> <UL> <LI><A href="http://www.360doc.com/content/13/0131/06/4127803_263351250.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0914/08/4127803_236019042.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0810/14/4127803_229402678.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0610/17/4127803_217271991.shtml" target=_blank>菜单二</A> </LI> <LI><A href="http://www.360doc.com/content/12/0605/04/4127803_216060988.shtml" target=_blank>菜单二</A> </LI></UL></LI> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单三</A> <UL> <LI><A href="http://www.360doc.com/content/14/0413/09/4127803_368461276.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/14/0201/14/4127803_349172943.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/14/0108/20/4127803_343673019.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/13/0825/17/4127803_309816084.shtml" target=_blank>菜单三</A> </LI> <LI><A href="http://www.360doc.com/content/13/0723/10/4127803_301909225.shtml" target=_blank>菜单三</A> </LI></UL></LI> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单四</A> <UL> <LI><A href="http://www.360doc.com/content/14/0829/17/4127803_405637165.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/14/0614/19/4127803_386607218.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/14/0611/16/4127803_385733311.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/13/1113/06/4127803_328788897.shtml" target=_blank>菜单四</A> </LI> <LI><A href="http://www.360doc.com/content/13/0917/13/4127803_315151444.shtml" target=_blank>菜单四</A> </LI></UL></LI> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单五</A> <UL> <LI><A href="http://www.360doc.com/content/14/0803/07/4127803_399052132.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0721/21/4127803_396132033.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0721/21/4127803_396127687.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0608/12/4127803_384782637.shtml" target=_blank>菜单五</A> </LI> <LI><A href="http://www.360doc.com/content/14/0608/12/4127803_384782478.shtml" target=_blank>菜单五</A> </LI></UL></LI> <LI><A href="http://www.360doc.com/myfiles.aspx?app=1&cid=126#">菜单六</A> <UL> <LI><A href="http://www.360doc.com/content/11/0912/07/4127803_147601768.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/13/1204/06/4127803_334307030.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/13/0406/20/4127803_276534541.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/12/0203/10/4127803_183824611.shtml" target=_blank>菜单六</A> </LI> <LI><A href="http://www.360doc.com/content/12/0216/17/4127803_187138581.shtml" target=_blank>菜单六</A> </LI></UL></LI></UL><BR> <DIV><FONT style="FONT-SIZE: 24px" color=#ff0000><STRONG>说明：</STRONG></FONT><BR><FONT style="FONT-SIZE: 20px">一级菜单的地址是文件夹的地址，二级菜单的地址是文章的地址。</FONT></DIV> <DIV align=right><FONT style="FONT-SIZE: 29px" color=#ff0000><STRONG>“春天没来”编撰</STRONG></FONT></DIV> <DIV align=right><FONT style="FONT-SIZE: 24px" color=#ff0000>2014年9月5日于北京</FONT></DIV> 请注意： 1、在下拉菜单中，一级菜单的地址必须是文件夹的地址，二级菜单的地址必须是这个文件夹中文章的地址。 2、在无序列表#nav li ul {……width: 80px;……}的css样式中，宽度加大则为横向下拉菜单；宽度缩小则为横向下拉菜单。 作业： 一、本节内容的重点在于认识与设置导航菜单的css样式，特别是下拉菜单的css样式比较复杂。本题的要求，认真阅读与领会上面讲解的为导航菜单设置的css样式。认识样式中的各种选择器与声明，体会它们各自的作用。 二、试着制作一篇一级导航菜单。 三、试着制作一篇下拉导航菜单。 “春天没来”编撰 2014年9月7日于北京