CSS列表样式和表格样式

最新推荐文章于 2024-07-18 14:45:27 发布

Chien d'amis

最新推荐文章于 2024-07-18 14:45:27 发布

阅读量1.2k

点赞数 4

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/u012310622/article/details/107194418

版权

JavaWeb 专栏收录该内容

9 篇文章 16 订阅

订阅专栏

CSS列表样式和表格样式

在这里插入图片描述样例跳转：样例二 <—点这跳转

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>样式</title>
</head>
<body>
<style type="text/css">
h1{
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
ul.square {list-style-type: square}
#customers{
border-collapse: collapse;
border:1px solid #C0C0C0;
text-align: center;
width:270px;
height: 30px;
}
thead{
color:white;
background:blue;
}
table tr:nth-child(even){
background: red;
color:white;
}
table,td,th{
border:1px solid #C0C0C0;
font-size:15px;
font-style: normal;
font-family:"Times New Roman",Georgia,Serif,serif
}
</style>
<div>
<h1>第1段文字</h1>
<h2>第2段文字</h2>
<h3>第3段文字</h3>
</div>
<div>
列表显示
<ul class="square">
<li>HTML--网页结构</li>
<li>CSS--网页样式</li>
<li>JS--网页交互</li>
</ul>
</div>
<div>
<table id="customers">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<th>内容11</th>
<th>内容12</th>
<th>内容13</th>
</tr>
<tr>
<th>内容21</th>
<th>内容22</th>
<th>内容23</th>
</tr>
<tr>
<th>内容31</th>
<th>内容32</th>
<th>内容33</th>
</tr>
<tr>
<th>内容41</th>
<th>内容42</th>
<th>内容43</th>
</tr>
</tbody>

</table>
</div>
</body>
</html>