CSS+DIV设计实例01

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,CSS+DIV,设计实例,例,1,背景图菜单,（,backgroundimage_list.HTML,）,第一步,CSS CODE,#menu ,position:absolute,;,left:10px;,top:30px;,width:189px;,height:150px;,z-index:1; ,HTML CODE,首页,图书,/,杂志,音乐,影视,百货,第二步,CSS CODE,同上,ul,list-style-,type:none,;,HTML CODE,同上,第三步,CSS CODE,同上,ul,list-style-,type:none,;,padding:0;,margin:0;,HTML CODE,同上,第四步,CSS CODE,同上,ul,list-style-,type:none,;,padding:0;,margin:0; ,li,background-,image:url(images/collapse.gif,); ,HTML CODE,同上,第五步,CSS CODE,同上,ul,list-style-,type:none,;,padding:0;,margin:0; ,li,background-,image:url(images/collapse.gif,);,background-,repeat:no,-repeat;,HTML CODE,同上,第六步,CSS CODE,同上,ul,list-style-,type:none,;,padding:0;,margin:0; ,li,background-,image:url(images/collapse.gif,);,background-,repeat:no,-repeat;,padding-left:1.3em;,HTML CODE,同上,第七步,CSS CODE,同上,ul,list-style-,type:none,;,padding:0;,margin:0; ,li,background-,image:url(images/collapse.gif,);,background-,repeat:no,-repeat;,padding-left:1.3em;,background-position:0.4em;,HTML CODE,同上,完成（,backgroundimage_list.HTML,）,例,2,竖排导航栏,（,line_list.html,）,第一步,HTML CODE,首页,图书,/,杂志,音乐,影视,百货,第二步,CSS CODE,ul,list-style-,type:none,;,HTML CODE,同上,第三步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0;,HTML CODE,同上,第四步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0; ,a ,color:#FFF,;,HTML CODE,同上,第五步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0; ,a ,color:#FFF,;,background-color:#036;,HTML CODE,同上,第六步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0; ,a ,color:#FFF,;,background-color:#036;,width:9em;,HTML CODE,同上,第七步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0; ,a ,color:#FFF,;,background-color:#036;,width:9em;,padding:0.2em 0.8em;,（注释：上右）,text-,decoration:none,;,HTML CODE,同上,第八步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin:0; ,a ,color:#FFF,;,background-color:#036;,width:9em;,padding:0.2em 0.8em;,text-,decoration:none,; ,a:hoverbackground-color:#369;,color:#FFF,;,HTML CODE,同上,第九步,CSS CODE,ul,list-style-,type:none,;,padding:0;,margin-left:0; ,a ,color:#FFF,;,background-color:#036;,width:9em;,padding:0.2em 0.8em;,text-,decoration:none,; ,a:hoverbackground-color:#369;,color:#FFF,;,limargin: 0 0 0.2em 0;,（注释：上右下左）,HTML CODE,同上,完成（,line_list.html,）,