表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 250px;
height: 70px;
border-collapse: collapse;
}
thead{
height: 30px;
background-color: purple;
border: 3px solid purple;
font-size: 15px;
}
table,td{
border: 3px solid pink;
font-size: 10px;
text-align: center;
}
</style>
</head>
<body>
<table align="center">
<thead>
<tr>
<th>Product ID</th>
<th>Stage</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>N15</td>
<td>1</td>
<td>22-09-18</td>
</tr>
<tr>
<td>B722</td>
<td>1</td>
<td>22-04-27</td>
</tr>
<tr>
<td>A99</td>
<td>3</td>
<td>22-09-19</td>
</tr>
</tbody>
</table>
</body>
</html>
浮动练习
<style>
.box{
width: 1200px;
height: 460px;
background-color: pink;
margin: auto;
}
.left{
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right{
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<!-- 浮动会脱标 -->
<!-- 如果多个盒子设置了浮动 他们会按照属性值一行内显示并且顶端对齐 -->
<!-- 浮动元素经常和标准流父级元素搭配使用 -->
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
<style>
*{
margin: 0;/* 清除外边距 */
padding: 0;/* 清除内边距 */
}
li{
list-style: none;
}
.box{
width: 1226px;
height: 285px;
background-color: rgba(216, 213, 214, 0.8);
margin: 0 auto;/* 块级元素水平居中 */
margin-top: 20px;
}
.box li{
width: 296px;
height: 285px;
background-color:rgb(109, 162, 206,0.6);
float: left;
margin-right: 14px;
text-align: center;
/* padding-top: 100px; */
font-size: 40px;
line-height: 285px;
}
.box .last{
margin-right:0 ;/* 注意浮动元素是否超出父类宽度 */
}
</style>
<body>
<ul class="box">
<li>介绍</li>
<li>入门</li>
<li>下载</li>
<li class="last">帮助</li>
</ul>
</body>