CSS表格和列表

最新推荐文章于 2023-02-02 11:03:14 发布

fxy流年无悔

最新推荐文章于 2023-02-02 11:03:14 发布

阅读量431

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/a716121/article/details/52137013

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS表格和列表</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1">
<caption>人员档案</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三,是一个好青年</td>
		<td class="sex">男</td>
		<td></td>
	</tr>
	<tr>
		<td>李四</td>
		<td>女</td>
		<td>35</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>男</td>
		<td>36</td>
	</tr>
</table>
<ul>
	<li>张三,是一个好青年</li>
	<li>李四<b>2</b></li>
	<li>王五</li>
</ul>
<div><span>我是HTML5</span></div>
<em>内容简介：</em><textarea rows="10" cols="20"></textarea>
</body>
</html>

style.css:

@charset "utf-8";
table{
	width:400px;
	height: 300px;
	text-align: center;
/*	border-collapse: separate;
	border-collapse: collapse;*/
	/*border-spacing: 10px;*/
/*	caption-side: bottom;*/

    /*empty-cells: hide;*/
    /*table-layout: fixed;*/
    border: 1px solid red;

}
table tr th,table tr td{
	border:1px solid red ;
}
ul{
/*	list-style-type: square;
	width: 120px;
	list-style-position: inside;
	list-style-image: url(1.PNG);*/
	list-style: square inside url(1.PNG)
}
.sex{
	/*vertical-align: bottom;*/

}
b{
	vertical-align: super;
}
div{
	width: 300px;
	height: 300px;
	background: silver;
	text-align: center;
}
div span{
	background: green;
	vertical-align: -100px;
	vertical-align: -100%;

}
em{
	vertical-align: 140px;
}

ppt

表格：:

列表：

其他功能：

fxy流年无悔

关注

0
点赞
踩
1

收藏

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

index.html: CSS表格和列表人员档案姓名性别年龄张三,是一个好青年男李四女 35 王五男 36 张三,是一个好青年李四2 王五我是HTML5内容简介：style.css:@charset "utf-8";table{ width:
复制链接

扫一扫

专栏目录