【CSS学习笔记五】列表和表格

最新推荐文章于 2022-08-03 15:42:22 发布

思索与猫

最新推荐文章于 2022-08-03 15:42:22 发布

阅读量194

点赞数 1

分类专栏： CSS学习文章标签： CSS 列表表格

本文链接：https://blog.csdn.net/qq_28997735/article/details/98406103

版权

CSS学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.列表

使用CSS，主要是可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

使用list-style-type属性指定列表项标记的类型

参考值：

disc：默认，实心圆
circle：空心圆
square：实心方块
decimal：数字
upper-roman：大写罗马数字(I, II, III, IV, V等)
lower-roman：小写罗马数字(i, ii, iii, iv, v等)
upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E等)
lower-alpha：小写英文字母The marker is upper-alpha (a, b, c, d, e等)

图像作为列表项标记

使用list-style-image属性指定列表项标记的图像
语法：

ul
{
    list-style-image: url('图片路径');
}

简写

使用list-style属性
按照

list-style-type
list-style-position (属性指示如何相对于对象的内容绘制列表项标记,参考值有：inside outside)
list-style-image

的顺序填写

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			ul.sai{list-style:square url('sai.jpg');}
			ul.circle{list-style:circle;}
			ol.upper-roman{list-style:upper-roman inside;}
			ol.upper-alpha{list-style:upper-alpha outside;}
		</style>
		<meta charset = "utf-8"/>
		<title>列表</title>
	</head>
	<body>
		<ul class = "sai">
			<li>可乐</li>
			<li>雪碧</li>
			<li>芬达</li>
		</ul>
		<ul class = "circle">
			<li>可乐</li>
			<li>雪碧</li>
			<li>芬达</li>
		</ul>
		<ol class = "upper-alpha">
			<li>可乐</li>
			<li>雪碧</li>
			<li>芬达</li>
		</ol>
		<ol class = "upper-roman">
			<li>可乐</li>
			<li>雪碧</li>
			<li>芬达</li>
		</ol>
	</body>
</html>

结果：
在这里插入图片描述

二.表格

1.表格边框

指定CSS表格边框，使用border属性。
宽度和高度也是由width和height设置
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table,th,td
{
	border:5px solid red;
	border-collapse:collapse;
	height:50px;
	width:20%;
}

2.文字对齐

与文本设置一样
text-align属性设置水平对齐方式
同理，
背景background属性设置，
填充padding
字体颜色color

table
{
	color:blue;
	text-align:center;
}
td
{
	padding:15px;
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			table,th,td
			{
				border:5px solid red;
				border-collapse:collapse;
				background:yellow;
				width:20%;
				height:50px;
				text-align:center;
			}
			th
			{
				color:blue;
			}
			td
			{
				padding:15px;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>表格</title>
	</head>
	<body>
		<table>
			<tr>
				<th>主食</th><th>饮料</th>
			</tr>
			<tr>
				<td>汉堡</td><td>可乐</td>
			</tr>
			<tr>
				<td>薯条</td><td>芬达</td>
			</tr>
		</table>
	</body>
</html>

结果：
在这里插入图片描述

思索与猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS学习笔记五】列表和表格

一.列表使用CSS，主要是可以列出进一步的样式，并可用图像作列表项标记。不同的列表项标记使用list-style-type属性指定列表项标记的类型参考值：disc：默认，实心圆circle：空心圆square：实心方块decimal：数字upper-roman：大写罗马数字(I, II, III, IV, V等)lower-roman：小写罗马数字(i, ii, iii, i...
复制链接

扫一扫

专栏目录