纸质卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.card{
width:250px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0,0),0 6px 20px 0 rgba(0,0,0,0.3);
border:3px solid gold ;
margin:30px 40px;
}
div.header{
background-color: darkgreen;
color:white;
padding:10px;
font-size: 40px;
}
div.container{
padding:10px;
}
</style>
</head>
<body>
<div class="card">
<div class="header">
<h1>9</h1>
</div>
<div class="container">
<p>June 9,2021</p>
</div>
</div>
</body>
</html>
随便练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#square{
width:400px;
height:400px;
background-color:green;
}
#circle{
width:200px;
height: 200px;
border-radius:50%;
background-color:white;
margin:100px;
display: inline-block;
}
</style>
</head>
<body>
<div id="square">
<div id="circle"></div>
</div>
</body>
</html>
页面布局
疯了,代码不小心删了
响应式表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table th{
width:140px;
border-collapse: collapse;
}
table,th,tr,td{
border:1px solid #000000;
text-align: center;
border-spacing: 0px;
}
/* 屏幕宽度和表格宽度不一致,加上滑动出现的效果 */
@media screen and (max-width:500px){
.table-container{
overflow-x: scroll;
}
table {
width:800px;
}
}
</style>
</head>
<body>
<div class="table-container">
<table>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>月薪</th>
<th>大学学校</th>
<th>最高学历</th>
<th>是否入党</th>
<th>健康码</th>
<th>是否需要核酸检测</th>
<th>最近活动轨迹</th>
<tr>
<td>王小二</td>
<td>12</td>
<td>放牛</td>
<td>5元</td>
<td>暂时没有</td>
<td>小学</td>
<td>少先队员</td>
<td>黄码</td>
<td>需要</td>
<td>家-学校-家-放牛</td>
</tr>
<tr>
<td>李小明</td>
<td>15</td>
<td>跟小樱一起念书</td>
<td>4000元</td>
<td>暂时没有</td>
<td>初中</td>
<td>团员</td>
<td>绿码</td>
<td>不需要</td>
<td>家-学校-家 其他地方等</td>
</tr>
<tr>
<td>张三</td>
<