1：制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作一张商品信息表,内容自定,要求用到行与列的合并</title>
<style>
table{
border: 1px solid black;
box-sizing: border-box;
width: 600px;
margin: 20px auto;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
line-height: 50px;
text-align: center;
padding: 5px;
}
table caption{
margin-bottom: 10px;
}
table thead>tr:first-of-type{
background:linear-gradient(greenyellow,yellow);
}
tbody tr:nth-of-type(odd){
background:linear-gradient(orangered,lightgoldenrodyellow);
}
tbody tr:nth-of-type(5)>td:first-of-type{
background:linear-gradient(lavender,aqua);
}
tbody tr:nth-of-type(5)>td:nth-of-type(2){
color: white;
background:linear-gradient(lavender,aqua);
}
tbody tr:nth-of-type(6)>td:nth-child(1){
background:linear-gradient(lightgray,fuchsia);
color: white;
}
</style>
</head>
<body>
<table>
<caption>京东双十一促销</caption>
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>数量</th>
<th>促销价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>iphone11</td>
<td>100</td>
<td>5599</td>
</tr>
<tr>
<td>2</td>
<td>华为note30</td>
<td>100</td>
<td>3599</td>
</tr>
<tr>
<td>3</td>
<td>vivo223</td>
<td>100</td>
<td>2599</td>
</tr>
<tr>
<td>4</td>
<td>oppo213</td>
<td>100</td>
<td>1599</td>
</tr>
<tr>
<td rowspan="2">系统</td>
<td>IOS</td>
<td>100</td>
<td>559900</td>
</tr>
<tr>
<td>ANDROID</td>
<td>300</td>
<td>779700</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td>400</td>
<td>1339600</td>
</tr>
</tbody>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2：使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用<div><span><p><ul>...等标签来制作一张课程表</title>
<style>
.table{
display: table;
margin: auto;
box-sizing: border-box;
width: 500px;
}
.caption{
display: table-caption;
text-align: center;
margin-bottom: 10px;
}
.thead{
display: table-header-group;
font-size: 1.2rem;
color: lightcoral;
background: linear-gradient(lightcyan,yellow);
}
.tfoot{
display: table-footer-group;
}
.tbody{
display: table-row-group;
}
ul{
display: table-row;
}
ul>li{
display: table-cell;
border: 1px solid black;
padding: 10px;
}
.tfoot ul:first-of-type{
background: linear-gradient(lightgrey,crimson);
color: white;
}
</style>
</head>
<body>
<div class="table">
<span class="caption">课程表</span>
<div class="thead">
<ul>
<li>序号</li>
<li>课程</li>
<li>描述</li>
</ul>
</div>
<div class="tbody">
<ul>
<li>1</li>
<li>前端</li>
<li>HTML+css</li>
</ul>
<ul>
<li>2</li>
<li>后端</li>
<li>PHP+mysql</li>
</ul>
<ul>
<li>3</li>
<li>框架</li>
<li>laravel</li>
</ul>
</div>
<div class="tfoot">
<ul>
<li>备注</li>
<li>努力学习</li>
<li>才能步入知识殿堂</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3：使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用绝对定位,实现用户登录框在页面中始终居中显示 </title>
<style>
body{
height: 2000px;
}
.login{
width: 300px;
margin:0px auto;
}
.form{
position: fixed;
top:100px;
}
</style>
</head>
<body>
<div class="login">
<div class="form">
<p>
<label for="name">账号：</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name="pwd" id="pwd">
</p>
<p>
<input type="submit" value="登录">
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4：模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路</title>
<style>
header,footer{
height: 100px;
background-color: lightgray;
}
main{
border: 2px solid red;
box-sizing: border-box;
padding-left: 200px;
padding-right: 200px;
overflow: auto;
}
main>article{
box-sizing: border-box;
min-height: 500px;
width: 100%;
background-color: lawngreen;
}
main>aside{
width: 200px;
box-sizing: border-box;
min-height: 500px;
}
main > aside:first-of-type {
background-color: red;
}
main > aside:last-of-type {
background-color: lightcyan;
}
main>article,
main > aside:first-of-type,
main > aside:last-of-type{
float: left;
}
aside:first-of-type{
margin-left:-100%;
position: relative;
left:-200px;
}
aside:last-of-type{
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<header>
头部
</header>
<main>
<article>
内容
</article>
<aside>
左侧
</aside>
<aside>
右侧
</aside>
</main>
<footer>
底部
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
思路：是将主体内容部分固定，利用左右边内边距来为左右区域留出位置。
步骤1：写出主体内容区，并给左右边距设置padding值。2：利用相对定位进行位移。达到圣杯布局效果
