前端入门学习笔记二十一

最新推荐文章于 2024-09-04 23:24:54 发布

物恰冰可乐

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量94

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/m0_65384293/article/details/128121484

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!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 属性的值。