<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>list-style-type属性</title>
<style type = "text/css">
ol,ul{list-style-type:none;}
</style>
</head>
<body>
<h1>有序列表</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h1>无序列表</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
list-style-type属性
list-style-type 属性设置列表项标记的类型。
默认值: disc
继承性: yes
版本: CSS1
JavaScript 语法:
object.style.listStyleType="square"
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>list-style-image</title>
<style type = "text/css">
ul{list-style-image:url(img/1.jpg);}
</style>
</head>
<body>
<h1>无序列表</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
list-style-image
定义和用法
list-style-image 属性使用图像来替换列表项的标记。
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
请始终规定一个 "list-style-type" 属性以防图像不可用。
默认值:none
继承性:yes
版本:CSS1
JavaScript 语法:
object.style.listStyleImage="url('/images/blueball.gif')"
URL图像的路径。
none默认。无图形被显示。
inherit规定应该从父元素继承 list-style-image 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>caption-side</title>
<style type = "text/css">
table,th,td{border:3px solid silver;}
table{caption-side:bottom;}
</style>
</head>
<body>
<table>
<caption>前端</caption>
<thead>
<tr>
<th>html</th>
<th>css</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>css</td>
<td>html</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>HTML5</td>
<td>CSS3.0</td>
</tr>
</tfoot>
</table>
</body>
</html>
caption-side
caption-side 属性设置表格标题的位置。
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。
默认值: top
继承性: yes
版本: CSS2
JavaScript 语法:
object.style.captionSide="bottom"
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset = 'UTF-8'/>
<title>border-collapse</title>
<style type = "text/css">
table,th,td{botder:3px solid silver;}
table{border-collapse:collapse;}
</style>
</head>
<body>
<table>
<caption>前端</caption>
<thead>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML5</td>
<td>CSS3.0</td>
</tr>
<tr>
<td>C语言</td>
<td>JAVA语言</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Go语言</td>
<td>HTML</td>
</tr>
</tfoot>
</table>
</body>
</html>
border-collapse
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
默认值: separate
继承性: yes
版本: CSS2
JavaScript 语法:
object.style.borderCollapse="collapse"
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。