<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css_4_list.css"/>
<style>
/* ul{
list-style-type:none;
padding: 0rem;
margin: 0px;
}
ul li{
background-image:url(./11.png);
background-repeat: no-repeat;
background-position: 0rem 0.3125rem;
padding-left: 1.975rem;
} */
table{
/* 合并边 */
/* border-collapse: collapse; */
width: 100%;
}
table,th,td{
border: 0.0625rem solid gold;
/* 文本水平对齐:居中 */
text-align: center;
}
th{
height: 3.125rem;
color: white;
background-color: #66CFAE;
border:0.15rem solid #4d9e85;
}
td{
height: 2.125rem;
/* 垂直对齐:底部 */
vertical-align: bottom;
/* 盒子模型:content,padding,border,margin */
padding: 0.9375rem;
border: 0.1875rem solid #86b6f9;
}
caption{caption-side: bottom;}
#user
{
font-family: "trebuchet ms",arial,helvetica;
width: 100%;
border-collapse: collapse;
}
#user td,#user th
{
font-size: 1em;
border: 1px solid #85a81f;
padding: 3px 7px 2px 7px;
/* vertical-align: middle; */
}
#user th
{
background-color: #98c133;
font-size: 1.1em;
text-align: left;
padding-top: 0.3125rem;
padding-bottom: 0.25rem;
color: #FFFFFF;
}
#user tr.alt td
{
color: #000000;
background-color: #EAF2D3;
}
</style>
</head>
<body>
<ul>
<li>coffee</li>
<li>Tea</li>
<li>Coco Cola</li>
</ul>
<p>删除默认样式</p>
<ul class="demo">
<li>coffee</li>
<li>Tea</li>
<li>Coco Cola</li>
</ul>
<table>
<caption>Table 1.1 Customers</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<table id="user">
<tr>
<th>name</th>
<th>country</th>
<th>age</th>
</tr>
<tr>
<td>Ana</td>
<td>US</td>
<td>13</td>
</tr>
<tr class="alt">
<td>Cino</td>
<td>UK</td>
<td>15</td>
</tr>
</table>
</body>
</html>
上面内容都是在.html文件的哦,以下内容属于.css文件的
ul.demo{
list-style-type: none;
margin: 0;
padding: 0;
}
不行不行,饿死了,要下班回去找吃的了,饿~
喜欢的点赞关注哦