网页设计CSS属性2.ppt

12.7.2 调整列表位置—list-style-position 基本语法 list-style-position:outside|inside 调整列表位置list-style-position属性用来设置列表符号的缩进，包含两个属性值，一个为向内缩进，一个为不向内缩进。 语法说明 ? outside表示列表符号不向内缩进，是列表的默认属性值。 ? inside表示列表符号向内缩进。 12.7.2 调整列表位置—list-style-position 实例代码 html head title设置列表位置/title style type=text/css !-- h2{font-family:黑体;font-size:18pt} .p1{list-style-type:square;list-style-position:inside} .p2{list-style-position:outside} -- /style /head body center h2博文视点精品书目/h2 /center 12.7.2 调整列表位置—list-style-position 接上页 hr ul class=p1 li《代码大全（第2版）》是著名IT畅销书作者Steve McConnell十二年前经典著作的全新演绎。 li《解析极限编程》 li《交互设计之路》 /ul hr ul class=p2 li《代码大全（第2版）》是著名IT畅销书作者Steve McConnell十二年前经典著作的全新演绎。 li《解析极限编程》 li《交互设计之路》 /ul /body /html 12.7.2 调整列表位置—list-style-position 网页效果 12.7.2 调整列表位置—list-style-position 效果说明 从网页效果可以看出，第一段文字的列表符号和文字是对齐排列的，也就是说列表符号是向内缩进的。而第二段文字的列表符号是在文字外排列的，也就是说列表符号是没有向内缩进的。 12.7.2 调整列表位置—list-style-position 12.7.3 设计列表样式—list-style-type 在HTML中使用ol、ul标记来表示所建立的列表为有序列表或者无序列表。而利用CSS样式来定义列表，则可以使列表样式设置的更加丰富、美观，如列表符号不仅可以使用原点、方块和有序数字，还可用图像作为列表符号。 基本语法 list-style-type:属性值 列表样式就是指列表项目的符号类型，主要使用list-style-type属性来设置。 12.7.3 设计列表样式—list-style-type 语法说明 12.7.3 设计列表样式—list-style-type 实例代码 html head title设置列表样式/title style type=text/css !-- h2{font-family:黑体;font-size:16pt} .p1{list-style-type:square} .p2{list-style-type:upper-roman} -- /style /head body center h2设置列表样式/h2 /center hr 12.7.3 设计列表样式—list-style-type 接上页 博文视点精品书目 ul class=p1 li代码大全（第2版） li解析极限编程 li交互设计之路 li程序员修炼之道 li软件业的生存之道 /ul ol class=p2 li代码大全（第2版） li解析极限编程 li交互设计之路 li程序员修炼之道 li软件业的生存之道 /ol /body /html 12.7.3 设计列表样式—list-style-type 网页效果 12.7.3 设计列表样式—list-style-type 12.4.3 设置边框颜色——border-color 设置边框的颜色，同样可以选择设置单条边框的颜色，或是统一设置四条边框的颜色。所以可以选用的边框颜色属性也有五个，分别是上边框颜色属性border-top-color，下边框颜色属性border-bottom-color，左边框颜色属性border-left-color，右边框颜色属性border-right-color和边框颜色属性b