制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息表</title>
<style>
table{
border: 1px solid black;
box-sizing: border-box;
border-collapse:collapse;
margin:10px auto;
}
caption{
font-size: 20px;
margin-bottom: 10px;
}
td,th{
text-align: center;
border: 1px solid black;
padding:10px;
}
thead{
background: linear-gradient(to right,lightcoral,orangered,coral);
}
tbody tr:nth-of-type(odd){
background: #dc97c5;
}
tfoot{
background: linear-gradient(to left,lightgreen,greenyellow, #3cff2e);
}
tbody>tr:first-of-type>td:first-of-type{
background: linear-gradient(to top right,lightseagreen,lightcyan);
}
tbody>tr:nth-of-type(4)>td:first-of-type{
background: linear-gradient(30deg,blueviolet,aliceblue);
}
</style>
</head>
<body>
<table>
<!-- 标题-->
<caption>商品信息表</caption>
<!-- 表头-->
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>基本单位</th>
<th>进价</th>
<th>售价</th>
</tr>
</thead>
<!-- 表格主题部分-->
<tbody>
<tr>
<td rowspan="3">001</td>
<td>可口可乐300ml</td>
<td>一听</td>
<td>1.5</td>
<td>2.5</td>
</tr>
<tr>
<td>可口可乐550ml</td>
<td>一瓶</td>
<td>2.5</td>
<td>3</td>
</tr>
<tr>
<td>可口可乐2000ml</td>
<td>一听</td>
<td>5</td>
<td>7</td>
</tr>
<tr>
<td rowspan="2">002</td>
<td>七喜300ml</td>
<td>一听</td>
<td>1.35</td>
<td>2</td>
</tr>
<tr>
<td>七喜550ml</td>
<td>一瓶</td>
<td>2.1</td>
<td>3</td>
</tr>
</tbody>
<!-- 表格页脚-->
<tfoot>
<tr>
<td colspan="5">
备注：以上为见福便利店进价商品表，非进货人员不准带走
</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表制作</title>
<style>
.table{
display: table;
border: 1px solid blueviolet;
box-sizing: border-box;
width: 600px;
height: 350px;
border-collapse:collapse;
}
.caption{
display: table-caption;
text-align: center;
}
.thead{
display: table-header-group;
text-align: center;
}
.tbody{
display: table-row-group;
}
/*将所有的ul变成行*/
div ul{
display: table-row;
}
/*将所有的li变成单元格*/
div ul li{
display: table-cell;
border: 1px solid black;
text-align: center;
padding: 15px;
}
.tfoot{
display: table-footer-group;
}
.morning1{
border: none;
}
.morning2{
border-top:none;
}
.morning{
border: none;
position: absolute;
margin-top: 50px;
}
.afternoon{
position: absolute;
border: none;
margin-top: 20px;
}
.afternoon1{
border: none;
}
.box1, .box2, .box3,.box4,.box5{
border-right: none;
border-left: none;
}
.box6{
border-left: none;
}
.box0{
position: relative;
}
.
</style>
</head>
<body>
<div class="table">
<!-- 标题-->
<h2 class="caption">课程表</h2>
<!-- 表头-->
<div class="thead">
<ul class="box0">
<li></li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>待办事项</li>
</ul>
</div>
<div class="tbody">
<ul class="box0">
<li class="morning">上午</li>
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li></li>
</ul>
<ul>
<li class="morning1"></li>
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li></li>
</ul>
<ul>
<li class="morning2"></li>
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li></li>
</ul>
<ul>
<li class="afternoon">下午</li>
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li></li>
</ul>
<ul class="box0">
<li class="afternoon1"></li>
<li>数学</li>
<li>语文</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li></li>
</ul>
</div>
<div class="tfoot">
<ul>
<li>备注：</li>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
<li class="box6"></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录框</title>
<style>
div{
position: absolute;
text-align: center;
box-sizing: border-box;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
}
form{
border: 1px solid black;
position: relative;
left: -50%;
top:-50%;
}
</style>
</head>
<body>
<div>
<form>
<p>
<label for="text"> 用户名:</label>
<input type="text" name="text" id="text">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="checkbox">记住密码:</label>
<input type="checkbox" name="checkbox" id="checkbox" checked>
</p>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
header,footer{
height: 60px;
background-color: darkorchid;
}
main{
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
}
main>article{
box-sizing: border-box;
background-color: lightcoral;
width: 100%;
height: 500px;
float: left;
}
main > aside{
box-sizing: border-box;
height: 500px;
width: 200px;
}
main > aside:first-of-type{
background-color: lightseagreen;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
main > aside:last-of-type{
background-color: lightsalmon;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
</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">
<title>不使用table进行合并</title>
<style>
.table{
box-sizing: border-box;
width: 500px;
height: 500px;
border-collapse: collapse;
}
.caption{
display: table-caption;
text-align: center;
}
.tbody{
display: table-row-group;
}
div ul li{
display: table-cell;
border: 1px solid black;
padding: 30px;
text-align: center;
}
div ul{
margin: 0;
}
.box1 li{
border-bottom: none;
}
.cell1{
border-top: none;
}
.cell2{
border-right: none;
}
.cell3{
border-left: none;
border-right: none;
}
.cell4{
border-left: none;
}
</style>
</head>
<body>
<div class="table">
<h2 class="caption">进行合并练习</h2>
<div class="tbody">
<ul class="box1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="box2">
<li class="cell1">4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="box3">
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="tfoot">
<ul class="box4">
<li class="cell2">备注</li>
<li class="cell3"></li>
<li class="cell4"></li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
(选做): 将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实习圣杯布局</title>
<style>
body{
margin: 0;
}
header,footer{
height: 60px;
background-color: lightcoral;
}
main{
box-sizing: border-box;
overflow: hidden;
}
main article{
box-sizing: border-box;
background-color: lightseagreen;
width: 100%;
height: 400px;
float: left;
}
main>aside:first-of-type {
box-sizing: border-box;
float: left;
background-color: lawngreen;
height: 400px;
width: 200px;
position: absolute;
}
main>aside:last-of-type{
box-sizing: border-box;
float: left;
background-color: lawngreen;
height: 400px;
width: 200px;
position: absolute;
right: 0;
}
</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>
body{
padding: 0;
margin: 0;
}
header,footer{
background-color: lawngreen;
text-align: center;
padding: 40px 0;
}
main{
width: 100%;
}
main article,main aside{
padding: 120px 0;
text-align: center;
min-height:400px;
}
div{
float: left;
width: 100%;
}
article{
background-color: lightcoral;
margin: 0 220px;
}
aside{
background-color: lightgreen;
width: 220px;
float: left;
}
aside:first-of-type{
margin-left: -100%;
}
aside:last-of-type{
margin-left: -220px;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<div>
<article>
内容部分
</article>
</div>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码
总结：
用过非table标签做表格使用无序列表通过设置css中的display属性改成table属性，然后可以通过隐藏边框线移动文字达到像合并行列的效果。
圣杯布局在内容区给左右侧留好足够的位置通过相对定位移动左右侧元素，完成布局。
