一、制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息表</title>
<style type="text/css">
table{
border: 1px solid #888;
box-sizing: border-box;
box-shadow: 1px 1px 1px #888;
border-collapse: collapse;
width: 700px;
margin: 0 auto;
text-align: center;
}
th,td{
border: 1px solid #888;;
padding: 10px 15px;
}
thead{
background:linear-gradient(#bebaba,#dedada);
color: #444444;
font-size: 1.2rem;
}
tbody tr td:first-child{
background:#dedada;
font-size: 1.2rem;
}
tfoot{
background: antiquewhite;
}
tfoot tr td:last-child{
color: crimson;
text-shadow: 1px 1px 1px #333;
}
</style>
</head>
<body>
<article>
<table>
<caption><h2>商品信息表</h2></caption>
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>运行内存</th>
<th>颜色</th>
<th>库存</th>
<th>售价</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">华为HUAWEI Mate 30 5G</td>
<td>8+128</td>
<td>亮黑色</td>
<td>1365</td>
<td>4999.00</td>
</tr>
<tr>
<td>2</td>
<td>8+256</td>
<td>星河银</td>
<td>3658</td>
<td>5499.00</td>
</tr>
<tr>
<td>3</td>
<td>华为HUAWEI Mate 20X 4G</td>
<td rowspan="3">8+128</td>
<td>宝石蓝</td>
<td>1365</td>
<td>4599.00</td>
</tr>
<tr>
<td>4</td>
<td>华为HUAWEI Mate 20X 5G</td>
<td>宝石蓝</td>
<td>1233</td>
<td>5999.00</td>
</tr>
<tr>
<td>5</td>
<td>华为HUAWEI P30 5G</td>
<td>天空之境</td>
<td>1365</td>
<td>3998.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>备注</td>
<td colspan="5">1.支持7天无理由退货。2.此商品不可使用全品类券。</td>
</tr>
</tfoot>
</table>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果：
二、使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
<style type="text/css">
.table{
display: table;
border: 1px solid #263238;
box-sizing: border-box;
border-collapse: collapse;
width: 800px;
margin: 0 auto;
text-align: center;
box-shadow: 1px 1px 1px #444444;
}
.caption{
display: table-caption;
text-align: center;
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
.thead{
display: table-header-group;
background:#444;
font-size: 1.2rem;
color: #f4f0f0;
}
.tbody{
display: table-row-group;
}
section ul{
display: table-row;
}
section li{
display: table-cell;
border: 1px solid #555555;
padding: 10px 15px;
}
section ul li:first-of-type{
background:#8c8989;
font-size: 1.2rem;
color: #f4f0f0;
}
.tfoot{
display: table-footer-group;
}
</style>
</head>
<body>
<article class="table">
<section class="caption">课程表</section>
<section class="thead">
<ul>
<li>时间</li>
<li>课时</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>8:20-8:40</li>
<li>早读</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
</ul>
<ul>
<li>9:10-9:45</li>
<li>第一节</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
</ul>
<ul>
<li>9:55-10:30</li>
<li>第二节</li>
<li>数学</li>
<li>语文</li>
<li>语文</li>
<li>语文</li>
<li>数学</li>
</ul>
<ul>
<li>10:45-11:20</li>
<li>第三节</li>
<li>体育</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>体育</li>
</ul>
<ul>
<li>14:40-15:15</li>
<li>第四节</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
</ul>
<ul>
<li>15:30-16:05</li>
<li>第五节</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
</ul>
<ul>
<li>16:35-17:10</li>
<li>第六节</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
<li>数学</li>
<li>语文</li>
</ul>
</section>
<section class="tfoot">
<ul>
<li>备注</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图
三、使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用绝对定位使登录框居中</title>
<style type="text/css">
body{
margin:0;
padding: 0;
background: #444;
}
article{
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
}
section{
background-color: #fff;
padding: 50px;
width: 200px;
position: relative;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -150px;
border-radius: 20px;
opacity: 0.5;
}
</style>
</head>
<body>
<article>
<section>
<form action="login.php">
<p>
<label for="username">账号:</label>
<input type="username" name="username" id="username" value="请输入用户名">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<input type="checkbox" name="hobby[]" value="remember" id="remember"><label for="remember">记住密码</label>
</p>
<p>
<button>返回首页</button>
<button>登录</button>
</p>
</form>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果
四、模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
第一步：为三个元素的父元素加上padding属性，预留位置
第二步：由于预留位置后会产生空白，所以使用position: relative;属性来移动左右两栏，这样就不会遮挡了。
不过这样布局有一个问题就是：有一个最小宽度，当页面小于最小宽度时布局就会乱掉。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
header,footer{
height: 80px;
background: #bebaba;
}
main{
border: 2px solid red;
box-sizing:border-box;
/*左右边栏预留区域*/
padding-left: 200px;
padding-right: 200px;
/*转BFC*/
overflow: hidden;
}
main > article{
box-sizing: border-box;
width: 100%;
min-height: 600px;
background: #46c596;
}
main > aside{
box-sizing: border-box;
width: 200px;
min-height: 600px;
}
main > aside:first-of-type{
background: #513ff3;
margin-left: -100%;
position: relative;
left: -200px;
}
main > aside:last-of-type{
background: #8c8989;
margin-left: -200px;
position: relative;
right: -200px;
}
main > article,
main > aside:first-of-type,
main > aside:last-of-type{
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>主体内容区</article>
<aside>左边栏</aside>
<aside>右边栏</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果
五、不使用<table>...写表格时,如何实现行与列合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
main{
width: 900px;
height: 400px;
margin: 0 auto;
}
article{
width: 800px;
height: 400px;
float: left;
}
.caption{
width: 100%;
height: 40px;
line-height: 40px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
section ul{
width: 100%;
overflow: hidden;
}
section ul li{
list-style: none;
height: 40px;
line-height: 40px;
border-top: 1px solid #444;
border-left: 1px solid #444;
border-collapse: collapse;
padding: 5px 10px ;
text-align: center;
}
section ul li:first-child{
background: #2f89c5;
width:80px;
float: left;
}
section ul li:nth-child(2){
background: #a78fc5;
width:300px;
float: left;
}
section ul li:nth-child(3){
background: #c5a247;
width: 165px;
float: left;
}
section ul li:last-child{
background: #46c596;
width: 170px;
float: left;
border-right: 1px solid #444;
}
.thead{
width:900px;
}
.tfoot{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #444;
border-collapse: collapse;
background: #bebaba;
box-sizing: border-box ;
}
.tfoot span{
width:100px;
float: left;
border-right: 1px solid #444;
}
.aside{
width: 100px;
float: right;
}
aside ul li{
list-style: none;
height: 40px;
line-height: 40px;
border-top: 1px solid #444;
border-left: 1px solid #444;
border-collapse: collapse;
padding: 5px 10px ;
text-align: center;
}
</style>
</head>
<body>
<style type="text/css">
.table {
width:500px;
border:1px solid #263238;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
box-shadow: 1px 1px 1px #263238;
}
.table1{
width:500px;
height:30px;
text-align: center;
vertical-align: middle;
background-color: #CCCCCC;
float: left;
border-bottom:1px solid #263238;
}
.table2{
width:248px;
height:30px;
border-bottom: 1px solid #263238;
border-right: 1px solid #263238;
float: left;
background-color: #FFFFCC;
text-align: center;
}
.table3{
width:248px;
height:30px;
border-bottom: 1px solid #263238;
float: left;
background-color: #FFFFCC;
text-align: center;
}
.box{
width: 600px;
margin: 0 auto;
text-align: center;
}
.box1{
height:119px;
width: 180px;
background: #2f89c5;
float: left;
border: 1px solid #444;
line-height: 119px;
}
.box2{
height: 120px;
width: 418px;
background: #9D9D9D;
float: right;
}
.box3{
border-bottom: 1px solid #444;
height: 39px;
line-height:39px;
border-right: 1px solid #444;;
}
.box3:first-child{
border-top: 1px solid #444;
}
</style>
<!--div合并行-->
<div class="table">
<div class="table1">第一行合并成一个单元格</div>
<div class="box">
<div class="table2">左边单元格</div>
<div class="table3">右边单元格</div>
<div class="table2">左边单元格</div>
<div class="table3">右边单元格</div>
</div>
<div class="table1">最后一行合并成一个单元格</div>
</div>
<hr>
<!--div合并列-->
<div class="box">
<div class="box1">左边合并单元格</div>
<div class="box2">
<div class="box3">右边单元格</div>
<div class="box3">右边单元格</div>
<div class="box3">右边单元格</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果
六、将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
header,footer{
height: 80px;
background: #bebaba;
}
main{
border: 2px solid red;
box-sizing:border-box;
/*左右边栏预留区域*/
padding-left: 200px;
padding-right: 200px;
/*转BFC*/
overflow: hidden;
}
main > article{
box-sizing: border-box;
width: 100%;
min-height: 600px;
background: #46c596;
}
main > aside{
box-sizing: border-box;
width: 200px;
min-height: 600px;
}
main > aside:first-of-type{
background: #513ff3;
margin-left: -100%;
position: relative;
left: -200px;
}
main > aside:last-of-type{
background: #8c8989;
margin-left: -200px;
position: relative;
right: -200px;
}
main > article,
main > aside:first-of-type,
main > aside:last-of-type{
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>主体内容区</article>
<aside>左边栏</aside>
<aside>右边栏</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、与圣杯类似的"双飞翼"布局如何实现,并实例演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header,footer{
height: 80px;
background: #bebaba;
}
main{
overflow: hidden;
width: 100%;
}
.content{
margin: 0 200px 0 200px;
min-height: 600px;
background: #2f89c5;
}
.left{
min-height: 600px;
width: 200px;
background: #46c596;
position: absolute;
top:80px;
}
.right{
min-height: 600px;
width: 200px;
background: #a78fc5;
float: right;
position: absolute;
top:80px;
right: 0;
}
</style>
</head>
<body>
<!--双飞翼布局则是中间栏不变，将内容部分为两边腾开位置-->
<header>双飞翼布局</header>
<main>
<article>
<section class="main">
<div class="content">内容主体区</div>
</section>
<aside class="left">
左边栏
</aside>
<aside class="right">
右边栏
</aside>
</article>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
