所有实例均可直接运行
* 制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css">
table {
border: 1px solid #444444;
color: #444;
box-sizing: border-box;
box-shadow: 1px 1px 1px #999;
}
/*给每一个单元格也加上边框, 单元格包括td,th*/
th, td {
border: 1px solid #444444;
}
/*将表格中所有的边框线进行折叠*/
table {
border-collapse: collapse;
}
/*设置表格的宽度与文字排版*/
table {
width: 700px;
margin: 20px auto;
}
/*设置表格的标题*/
table caption {
font-size: 1.3rem;
margin-bottom: 15px;
}
/*设置单元格的样式*/
th, td {
text-align: center;
padding: 10px;
}
/*在偶数行上实现隔行变色效果*/
tbody tr:nth-of-type(even) {
background-color: pink;
}
/*设置表头样式*/
table thead > tr:first-of-type {
background: linear-gradient(lightgreen, honeydew);
}
/*设置底部样式*/
table tfoot > tr:last-of-type {
background: radial-gradient(yellow, white);
}
</style>
<title>Document</title>
</head>
<body>
<table>
<caption>商品信息表</caption>
<!--页眉-->
<thead>
<tr>
<th>折扣</th>
<th>名称</th>
<th>单价</th>
<th>库存</th>
<th>金额</th>
</tr>
</thead>
<!-- 主体-->
<tbody>
<tr>
<td rowspan="2">5折优惠</td>
<td>纪梵希</td>
<td>300RMB</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
<tr>
<td>圣罗兰</td>
<td>300RMB</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
<tr>
<td>8折优惠</td>
<td>迪奥</td>
<td>300PCS</td>
<td>10PCS</td>
<td>1000RMB</td>
</tr>
</tbody>
<!-- 页脚-->
<tfoot>
<tr>
<td colspan="3">total</td>
<td>30PCS</td>
<td>9000RMB</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找个姿势写表格</title>
<style type="text/css">
.table {
/*以<table>标签样式显示*/
display: table;
/*设置表格的基本样式*/
/*确保内部单元格如何变化,宽度总不变*/
box-sizing: border-box;
/*因为后面单元格也会设置边框,所以这里的边框只是可选*/
/*border: 1px solid #444;*/
/*折叠单元格之间的边框线, 消除间隙*/
border-collapse: collapse;
width: 650px;
margin: auto;
}
.caption {
/*以<caption>标签样式显示*/
display: table-caption;
text-align: center;
}
.thead {
/*以<thead>标签样式显示*/
display: table-header-group;
/*设置页眉文本样式*/
text-align: center;
/*字体大小为页面根字体1.2倍*/
font-size: 1.2rem;
/*加粗*/
font-weight: bold;
/*字间距*/
letter-spacing: 5px;
/*前景色*/
}
.tbody {
/*以<tbody>标签样式显示*/
display: table-row-group;
}
/*将第一列(序号列)文本居中对齐显示*/
.tbody > ul > li:first-of-type {
text-align: center;
}
.tfoot {
/*以<tfoot>标签样式显示*/
display: table-footer-group;
background-color: #ededed;
}
/*将所有<ul>转为<tr>标签样式*/
section > ul {
display: table-row;
}
/*将所有的<li>转为<td>标签样式*/
section > ul > li {
display: table-cell;
/*必须给单元格设置边框,否则看不到内部表格线*/
border: 1px solid #444;
/*设置单元素内容与边框之间的内内边距(很重要)*/
padding: 10px;
}
</style>
</head>
<body>
<article class="table">
<h2 class="caption">第九期课程安排</h2>
<section class="thead">
<ul>
<li>序号</li>
<li>课程</li>
<li>描述</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>1</li>
<li>前端开发基础</li>
<li>HTML5常用标签,CSS3样式控制与页面布局</li>
</ul>
<ul>
<li>2</li>
<li>PHP开发基础</li>
<li>PHP语法,类与对象,常用开发技术与案例</li>
</ul>
<ul>
<li>3</li>
<li>大型CMS开发实战</li>
<li>Laravel开发基础,Laravel开发CMS全程精讲</li>
</ul>
</section>
<section class="tfoot">
<ul>
<li>备注:</li>
<li>全程直播教学</li>
<li><span>每晚20:00 - 22:00(节假日除外)</span></li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style type="text/css">
body{
position: relative;
}
.main{
border: 2px solid black;
position: absolute;
left: 50%;
margin-left: -150px; width:200px;
}
.title{
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<h2 class="title">用户登录</h2>
<form action="" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" >
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="不得少于6位">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
<button>登陆</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
答：1、创建页面模块；
2、设置页面属性（如背景颜色、文本大小、行间距等）
3、将整个页面划分结构（head、foot、aside等通过css设置浮动或定位等实现）
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body{
width: 1000px;
margin: auto;
}
.head,.foot{
background-color: gray;
height: 50px;
}
.main{
border: 1px solid lightcoral;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
}
.article{
float: left ;
box-sizing: border-box;
width: 100%;
min-height: 600px;
background-color: deepskyblue;
}
.asideleft{
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgreen;
float: left;
margin-left: -100%;
position: relative;
left:-200px;
}
.asideright{
float: left;
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgoldenrodyellow;
margin-left:-200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="main">
<div class="article">内容区</div>
<div class="asideleft">左侧</div>
<div class="asideright">右侧</div>
</div>
<div class="foot">底部</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* (选做): 将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body{
width: 1000px;
margin: auto;
}
.head,.foot{
background-color: gray;
height: 80px;
}
.main{
border: 1px solid red;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
position: relative
}
.article{
float: left ;
box-sizing: border-box;
width: 100%;
min-height: 600px;
background-color: deepskyblue;
}
.asideleft{
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgreen;
float: left;
position: absolute;
top: 0;
left: 0;
}
.asideright{
float: left;
box-sizing: border-box;
min-height: 600px;
width: 200px;
background-color: lightgoldenrodyellow;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
<div class="article">main</div>
<div class="asideleft">left</div>
<div class="asideright">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
