css 列表，表格

最新推荐文章于 2024-07-22 09:42:47 发布

betterIatethanne

最新推荐文章于 2024-07-22 09:42:47 发布

阅读量65

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/betterIatethanne/article/details/130067219

版权

/* 设置列表标志的类型。none去除样式*/
           /* list-style-type:none; */
           /* list-style-image:url(img/9.jpg); */
           /* 规定列表中列表项目标记的位置： */
           /* list-style-position:inside; */
           /* 三个的合集 */

整体示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	<style>
		ul{
			/* 设置列表标志的类型。none去除样式*/
			/* list-style-type:none; */
			/* list-style-image:url(img/9.jpg); */
			/* 规定列表中列表项目标记的位置： */
			/* list-style-position:inside; */
			/* 三个的合集 */
		list-style: none url(img/9.jpg) inside;
		}
	</style>
	</head>
	<body>
		<ul>
			<li>《春日》<sub>宋.朱熹</sub></li>
			<li>胜日寻芳泗水滨</li>
			<li>无边光景一时新</li>
			<li>等闲识得东风面</li>
			<li>万紫千红总是春</li>
		</ul>
	</body>
</html>

table 表格

{
               /* 边框合并 */
               border-collapse: separate;
               /* 边框间距：如果要设置间距时，边框不能合并*/
               border-spacing: 10px 20px;
               /* 表格的标题：top/bottom */
               caption-side: top;
               /* 设置是否显示表格中的空单元格。 */
               empty-cells: show;
           }

{
               /* 设置显示单元，行和列的算法。 */
               table-layout:fixed;
           }
整体：表格的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格样式</title>
		<style>
			table{
				height: 300px;
				width:600px;
			}
			table,td{
				border: 1px solid black;
			}
			table{
				/* 边框合并 */
				border-collapse: separate;
				/* 边框间距 ：如果要设置间距时，边框不能合并*/
				border-spacing: 10px 20px;
				/* 表格的标题：top/bottom */
				caption-side: top;
				/* 设置是否显示表格中的空单元格。 */
				empty-cells: show;
			}
			td{
				width: 100px;
			}
			.tr1{
				/* 设置显示单元，行和列的算法。 */
				table-layout:fixed;
			}
			
		</style>
	</head>
	<body>
		<table>
			<caption>这是表格的标题</caption>
			<tr>
				<td>练字</td>
				<td>绘画</td>
				<td>弹琴</td>
				<td>听歌</td>
			</tr>
			<tr class="tr1">
				<td>11111111111111</td>
				<td>11</td>
				<td>222</td>
				<td>3333</td>
			</tr>
			<tr class="tr2">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>小红</td>
				<td>小玲</td>
				<td>小刚</td>
			</tr>
		</table>
	</body>
</html>

betterIatethanne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 列表，表格

* 边框间距：如果要设置间距时，边框不能合并*//* 表格的标题：top/bottom *//* 设置是否显示表格中的空单元格。/* 设置显示单元，行和列的算法。/* 规定列表中列表项目标记的位置： *//* 边框合并 *//* 设置列表标志的类型。none去除样式*//* 三个的合集 */
复制链接

扫一扫