xg网页设计6-1.ppt

1、第六章 列表和导航,list-style-image,list-style-image 属性使用图像来替换列表项的标记。 如果想将列表符换成图像，则：ulli list-style-type:none; list-style-image: url(pic/arrow1.gif); ,使用背景图片实现,ul li font-size:1.1em; font-family: aharoni； padding:0px 0px 10px 20px; list-style-type:none; background:url(pic/arrow1.gif) no-repeat left top; ,可能是

2、什么效果？,background:url(pic/arrow1.gif) no-repeat left bottom;,修正：,padding:10px 0px 10px 20px; background:url(pic/arrow1.gif) no-repeat left center;,修正箭头位置,padding:10px 0px 10px 20px; background:url(pic/arrow1.gif) no-repeat left 40%;,超链接的样式：,li atext-decoration:none; ul li a:linkcolor:black; ul li a:h

3、overcolor:blue;,List-style-position,该属性用于声明列表标志相对于列表项内容的位置。 外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。 内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。,List-style-type, ul.circle list-style-type:circle ul.square list-style-type:square ,有序列表的序号类型, ol.lower-roman list-style-type:lower-roman ol.upper-al

4、pha list-style-type:upper-alpha ol list-style-type:; ,用色彩实现立体效果的导航条,ul margin:0; padding:0; list-style-type: none; width:8em; border:1px solid #486B02; background-color:#80D400; ,ul li font-family: aharoni; padding:10px 0px 10px 30px; background:url(pic/arrow4.gif) no-repeat 4% 40%; border-top:1px s

5、olid #E4FFD3; border-bottom:1px solid #486B02; ,通过修改边框颜色悬停时按钮被按下效果,ul a:hovercolor:#E4FFD3; ul li:hover border-top:1px solid #486B02; border-bottom:1px solid #E4FFD3; 要造成点击超链接时出现按钮被按下的效果 ul li:active 有的浏览器可能不显示效果。,交换顶部和底部边框颜色造成按钮效果,ul margin:0; padding:0; width:8em; list-style-type: none; border:1px

6、 solid #486B02; background-color:#80D400; ul li font-size:1.1em; font-family: aharoni; padding:10px 0px 10px 30px; background:url(pic/arrow4.gif) no-repeat 4% 40%; border-top:1px solid #E4FFD3; border-bottom:1px solid #486B02; li atext-decoration:none; ul a:linkcolor:#2B3F00; ul a:hovercolor:#E4FFD3

7、; ul li:hover border-top:1px solid #486B02; border-bottom:1px solid #E4FFD3;,突出显示导航栏里与当前页面对应的选项,元素结构：假设当前页面是home Home About News ,当前页面对应列表项的默认效果,#home .nav li.home border-top:1px solid #486B02; border-bottom:1px solid #E4FFD3; 如果将上述规则加到下面这个选择器中会怎样？ #home .nav .home a color:#fff; cursor:default; /*光标

8、经过该链接时不会改变为手形，避免诱使用户点击*/,模板实例,Html结构, Solutions Support Chat Blog ,body color: #5F7A77; font:13px/19px Arial,Helvetica,sans-serif; margin:0; padding: 0;, ul list-style-type: none; #headerPan ul.leftmenu width:87px; #headerPan ul.leftmenu li width:87px; height:22px; border-bottom:1px dashed #AECCCA;,

9、#headerPan ul.leftmenu li a background:url(pic/bullet-normal.gif) no-repeat scroll 0 7px #FFFFFF; color:#305E5C; display:block; height:22px; line-height:22px; padding:0 0 0 15px; text-decoration:none; width:72px; ,#headerPan ul.leftmenu li a:hover background:url(pic/bullet-hover.gif) no-repeat scrol

10、l 0 7px #FFFFFF; color:#305E5C; line-height:22px; padding:0 0 0 15px; text-decoration:none; ,#headerPan ul.leftmenu li.Solutions background: url(pic/bullet-hover.gif) no-repeat scroll 0 7px #FFFFFF; color: #305E5C; display: block; height: 22px; line-height: 22px; padding: 0 0 0 15px; text-decoration

11、: none; width: 72px; ,简单的水平导航条,列表项的水平排列方法： 1. 将列表项的display属性设置为inline。 2. 使用浮动属性 float:left;,Html结构, Prev 1 2 3 4 5 Next , body font-family: Myriad Pro,Frutiger,Lucida Grande,Lucida Sans,Lucida Sans Unicode,Verdana,sans-serif; font-size: 1.4em; margin-top: 4em; ,ol.pagination list-style-type: none;

12、margin: 0; padding: 0; ol.pagination li float: left; margin-right: 0.6em; ,ol.pagination a, ol.pagination li.selected border: 1px solid #CCCCCC; display: block; padding: 0.2em 0.5em; text-decoration: none; ,ol.pagination arel=prev, ol.pagination arel=next border: none; ol.pagination arel=prev:before

13、 content: 00AB; padding-right: 0.5em; ol.pagination arel=next:after content: 00BB; padding-left: 0.5em; ,图形化导航条, Home About News ,ul.nav background: url(pic/mainNavBg.gif) repeat-x scroll 0 0 #FAA819; list-style: none outside none; margin: 0; overflow: hidden; padding: 0; text-transform: uppercase;

14、width: 30em; /*list-style-image | list-style-position | list-style-type */,ul.nav li float: left; white-space: nowrap; ul.nav a background: url(pic/divider.gif) repeat-y scroll left top transparent; color: #FFFFFF; display: block; line-height: 2.1em; padding: 0 2.6em; /*调整列表项的宽度*/ text-decoration: n

15、one;,ul.nav a:hover, ul.nav a:focus color: #333333; 实例分析练习,#footermainPan background:url(images/footerbg.gif) repeat-x scroll 0 0 #D3F0F0; clear:both; color:#2F5958; font:13px/20px Trebuchet MS,Arial,Helvetica,sans-serif; height:103px; margin:0 auto; padding:36px 0 0; position:relative;,#footerPan u

16、l height:20px; margin:0 auto; position:relative; width:608px; #footerPan li float:left; ,#footerPan ul li a background:none repeat scroll 0 0 #EBF8F7; color:#2F5958; font-size:13px; padding:0 10px; text-decoration:none; #footerPan ul li a:hover text-decoration:underline; ,#footerPanhtml display:block; height:24px; width:70px; position:absolute; left:549px; top:35px; ,#footerPanhtml a background:url(images/html-normal.gif) no-repeat scroll 0 0 #D3F0F0; color:#FFFFFF; display