2021-05-05

最新推荐文章于 2022-03-11 15:51:27 发布

xiexinxia

最新推荐文章于 2022-03-11 15:51:27 发布

阅读量96

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/xieixnxia/article/details/116428576

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

表格样式

表格标题位置(caption-side)

caption-side有两个取值：top（标题在顶部）

bottom（标题在底部）

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		table,th,td{border:1px solid silver;}
		table{caption-side: bottom;}
	</style>
</head>
<body>
	<table>
		<caption>标题</caption>
		<thead>
			<tr>
				<th>表头单元格</th>
				<th>表头单元格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

表格边框合并(border-collapse)

caption-side有两个取值：separate（边框分开，有空隙）

collapse（边框合并，无空隙）

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		table,th,td{border:1px solid silver;}
		table{border-collapse: collapse;}
	</style>
</head>
<body>
	<table>
		<caption>标题</caption>
		<thead>
			<tr>
				<th>表头单元格</th>
				<th>表头单元格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

表格边框间距(border-spacing)

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		table,th,td{border:1px solid silver;}
		table{border-spacing: 10px;}
	</style>
</head>
<body>
	<table>
		<caption>标题</caption>
		<thead>
			<tr>
				<th>表头单元格</th>
				<th>表头单元格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>单元格</td>
				<td>单元格</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

图片样式

图片大小

width:像素值；

height·:像素值

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		img{
			width: 60px;
			height: 100px;
		}
	</style>
</head>
<body>
	<img src="img/花.png">
</body>
</html>

图片边框

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		img{
			width: 60px;
			height: 100px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<img src="img/花.png">
</body>
</html>

图片对齐

水平对齐text-align

text-align属性取值
属性值	说明
left	左对齐（默认）
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		div{
			width: 800px;
			height: 200px;
			border:1px solid silver;
		}
		#div1{text-align: left;}
		#div2{text-align: center;}
		#div3{text-align: right;}
		img{
			width: 150px
			height:60px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<img src="img/花.png">
	</div>
	<div id="div2">
		<img src="img/花.png">
	</div>
	<div id="div3">
		<img src="img/花.png">
	</div>
	
</body>
</html>

垂直对齐vertical-align

文本与图片对齐

vertical-align属性取值
属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		#img1{vertical-align: top;}
		#img2{vertical-align: middle;}
		#img3{vertical-align: baseline;}
		#img4{vertical-align: bottom;}
		img{
			width: 40px;
			height:40px;
		}
	</style>
</head>
<body>
	花<img id="img1" src="img/花.png">花（top）<hr>
	花<img id="img2" src="img/花.png">花（middle）<hr>
	花<img id="img3" src="img/花.png">花（baseline）<hr>
	花<img id="img4" src="img/花.png">花（bottom）<hr>
	
</body>
</html>

文字环绕(float)

float:left; 元素向左浮动

float:right; 元素向右浮动

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
	<style type="text/css">
		div{width: 500px;height: 500px;}
		img{float: left;}
	</style>
</head>
<body>
	<div>
		<img src="img/lotus.jpg">
		<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
	</div>
</body>
</html>

xiexinxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-05-05

表格样式表格标题位置(caption-side)caption-side有两个取值：top（标题在顶部） bottom（标题在底部）<!DOCTYPE html><html><head> <title>白鹿为霜</title> <style type="text/css"> table,th,td{border:1px solid...
复制链接

扫一扫