1. 制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息表</title>
<style>
table{
width: 700px;
margin: auto;
border: 1px solid #444444;
border-collapse: collapse;
}
table > caption{
font-size: 1.3rem;
font-weight: bold;
padding-bottom: 10px;
}
th, td{
border: 1px solid #444444;
padding: 10px;
text-align: center;
}
thead > tr:first-of-type{
background: linear-gradient(green,white);
}
tbody > tr:nth-of-type(odd){
background-color: #eaeaea;
}
tfoot >tr >td:first-of-type{
background: linear-gradient(lightcoral,white);
}
tfoot >tr >td:last-of-type{
background: linear-gradient(to right,chocolate,white);
}
</style>
</head>
<body>
<table>
<caption>商品信息表</caption>
<thead>
<tr>
<th>商品编码</th>
<th>商品名称</th>
<th>基本单位</th>
<th>进价</th>
<th>售价</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>可口可乐</td>
<td rowspan="2">听</td>
<td rowspan="2">1.60</td>
<td rowspan="2">2.00</td>
</tr>
<tr>
<td>002</td>
<td>百事可乐</td>
</tr>
<tr>
<td>003</td>
<td>雪碧</td>
<td rowspan="3">瓶</td>
<td>2.00</td>
<td>2.50</td>
</tr>
<tr>
<td>004</td>
<td>七喜</td>
<td rowspan="2">3.00</td>
<td rowspan="2">4.00</td>
</tr>
<tr>
<td>005</td>
<td>美年达</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合计：</td>
<td>8.50</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第九期课程安排</title>
<style>
.table{
display: table;
border-collapse: collapse;
box-shadow: 1px 1px 1px #eaeaea;
border: 1px solid black;
width: 700px;
margin: auto;
}
.caption{
display: table-caption;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
.thead{
display: table-header-group;
}
.thead > div > span{
text-align: center;
font-weight: bold;
font-size: 1.2rem;
background: linear-gradient(green,white);
color: white;
text-shadow: 1px 1px 0 #444;
}
.tbody{
display: table-row-group;
}
.tbody > div > span:first-of-type{
text-align: center;
}
section > div, ul{
display: table-row;
}
section > div > span, section > ul > li{
display: table-cell;
border: 1px solid #444444;
padding: 10px;
}
.tfoot{
display: table-footer-group;
background-color: #eaeaea;
}
</style>
</head>
<body>
<article class="table">
<p class="caption">第九期课程安排</p>
<!-- 表头-->
<section class="thead">
<div>
<span>序号</span>
<span>课程</span>
<span>描述</span>
</div>
</section>
<!-- 表格主体-->
<section class="tbody">
<div>
<span>1</span>
<span>前端开发基础</span>
<span>HTML5常用标签，CSS3样式控制与页面布局</span>
</div>
<div>
<span>2</span>
<span>PHP开发基础</span>
<span>PHP语法，类与对象，常用开发技术与案例</span>
</div>
<div>
<span>3</span>
<span>大型CMS开发实战</span>
<span>Laravel开发基础，Laravel开发CMS全程精讲</span>
</div>
</section>
<!-- 表格底部-->
<section class="tfoot">
<ul>
<li>备注：</li>
<li>全程直播教学</li>
<li>每晚20:00 - 22:00（节假日除外）</li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
* {
padding: 0;
margin: 0;
}
.main{
border: 1px solid black;
background-color: #eaeaea;
width: 250px;
height: 130px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="main">
<form action="login.php" method="post">
<p>
<label for="username">账号：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</p>
<button>提交</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
圣杯布局实现左右宽度固定，中间自适应。在网页中主内容必须第一个加载。其父元素的高度始终是由三栏中高度最高的元素。设置主体的边框为左右二侧的宽度来显示二侧的内容，还必须解决浮动元素对父元素坍塌的问题。然后主体区的元素都需要浮动。设置内容区的宽度为100%。给左侧元素设置margin-left:-100%，右侧元素设置margin-left:-200px,让左右二侧元素和内容区元素能并排显示。最后给左右二侧设置相对定位移入到预留的位置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
/*设置头部和底部样式*/
header, footer{
height: 60px;
background-color: #eaeaea;
text-align: center;
line-height: 60px;
}
/*设置主体区*/
main{
/*设置参考线*/
border: 1px solid red;
/*设置左边框来显示左侧内容*/
padding-left: 200px;
/*设置右边框来显示左侧内容*/
padding-right: 200px;
/*消除内边距和边框的影响*/
box-sizing: border-box;
/*转为BFC,解决浮动元素对父元素坍塌问题*/
overflow: hidden;
}
/*主体区所有元素浮动*/
main *{
float: left;
}
/*设置内容区*/
main > article{
/*内容区沾满主体，能够自适应*/
width: 100%;
background-color: lawngreen;
min-height: 600px;
}
/*设置左右侧通用样式*/
main > aside {
width: 200px;
min-height: 600px;
}
/*设置左侧*/
main > aside:first-of-type{
background-color: lightcoral;
/*通过负边距移动到主体的左边*/
margin-left: -100%;
/*通过相对定位移入到预留的位置*/
position: relative;
left: -200px;
}
/*设置右侧*/
main > aside:last-of-type{
background-color: lightslategray;
/*通过负边距移动到主体的右边*/
margin-left: -200px;
/*通过相对定义移入到预留的位置*/
position: relative;
left: 200px;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.不使用<table>...写表格时,如何实现行与列合并
一脸懵逼，实在想不到方法，只能用障眼法了。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第九期课程安排</title>
<style>
.table{
display: table;
border-collapse: collapse;
box-shadow: 1px 1px 1px #eaeaea;
border: 1px solid black;
width: 700px;
margin: auto;
}
.caption{
display: table-caption;
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
.thead{
display: table-header-group;
}
.thead > div > span{
text-align: center;
font-weight: bold;
font-size: 1.2rem;
background: linear-gradient(green,white);
color: white;
text-shadow: 1px 1px 0 #444;
}
.tbody{
display: table-row-group;
}
.tbody > div > span:first-of-type{
text-align: center;
}
section > div, ul{
display: table-row;
}
section > div > span, section > ul > li{
display: table-cell;
border: 1px solid #444444;
padding: 10px;
}
.tfoot{
display: table-footer-group;
background-color: #eaeaea;
}
.tfoot > ul > li:first-of-type{
color: red;
border-right: none;
}
.tfoot > ul > li:nth-of-type(2){
border-left: none;
}
.tfoot > ul >li > span{
/*脱离文档流，缺点不能自适应*/
position: absolute;
}
</style>
</head>
<body>
<article class="table">
<p class="caption">第九期课程安排</p>
<!-- 表头-->
<section class="thead">
<div>
<span>序号</span>
<span>课程</span>
<span>描述</span>
</div>
</section>
<!-- 表格主体-->
<section class="tbody">
<div>
<span>1</span>
<span>前端开发基础</span>
<span>HTML5常用标签，CSS3样式控制与页面布局</span>
</div>
<div>
<span>2</span>
<span>PHP开发基础</span>
<span>PHP语法，类与对象，常用开发技术与案例</span>
</div>
<div>
<span>3</span>
<span>大型CMS开发实战</span>
<span>Laravel开发基础，Laravel开发CMS全程精讲</span>
</div>
</section>
<!-- 表格底部-->
<section class="tfoot">
<ul>
<li><span>备注：备注：备注：备注：备注：</span></li>
<li></li>
<li>每晚20:00 - 22:00（节假日除外）</li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
6.将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
/*设置头部和底部样式*/
header, footer{
height: 60px;
background-color: #eaeaea;
text-align: center;
line-height: 60px;
}
/*设置主体区*/
main{
/*设置左边框来显示左侧内容*/
padding-left: 200px;
/*设置右边框来显示左侧内容*/
padding-right: 200px;
/*消除内边距和边框的影响*/
box-sizing: border-box;
/*转为BFC,解决浮动元素对父元素坍塌问题*/
overflow: hidden;
}
/*主体区所有元素浮动*/
main *{
float: left;
}
/*设置内容区*/
main > article{
/*内容区沾满主体，能够自适应*/
width: 100%;
background-color: lawngreen;
min-height: 600px;
}
/*设置左右侧通用样式*/
main > aside {
width: 200px;
min-height: 600px;
}
/*设置左侧*/
main > aside:first-of-type{
background-color: lightcoral;
position: absolute;
left: 8px;
}
/*设置右侧*/
main > aside:last-of-type {
background-color: lightslategray;
position: absolute;
right: 8px;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.与圣杯类似的"双飞翼"布局如何实现,并实例演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
header, footer{
height: 60px;
background-color: #eaeaea;
text-align: center;
line-height: 60px;
}
main{
overflow: hidden;
}
main > article{
width: 100%;
background-color: lawngreen;
box-sizing: border-box;
border: 1px solid red;
}
main > article > aside{
margin-left: 200px;
margin-right: 200px;
min-height: 600px;
}
main *{
float: left;
}
main > aside{
width: 200px;
min-height: 600px;
}
main > aside:first-of-type{
background-color: lightcoral;
margin-left: -100%;
}
main > aside:last-of-type{
background-color: lightslategray;
margin-left: -200px;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article><aside>内容区</aside></article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码和总结中涉及知识点注释总结：
基本能够掌握table写表格和使用div布局，在浮动定位，相对定位，绝对定位也能够略懂一二。但是在不使用table写表格时，实在想不到如何实现行与列的合并，还请老师指点一下。初步了解到圣杯布局和双飞翼布局的不同点和共同点。