* 制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品信息表-表格行与列的合并</title>
<!-- <link rel="stylesheet" href="css/style1.css">-->
<style>
/*给表格下的元素添加边框*/
table * {
border: 1px solid #3a87ad;
}
/*规定表格尺寸 边框边合并 居中*/
table {
box-sizing: border-box;
width: 500px;
border-collapse: collapse;
margin: 30px auto;
}
/*规定表格标题 文字1.2倍 背景渐变色 内边距上下8px 左右0*/
caption {
font-size: 1.2rem;
background: linear-gradient(#0099CC, #00998C);
padding: 8px 0;
}
/*规定th和td元素文本居中 内边距6px 文字1.2倍*/
th, td {
text-align: center;
padding: 6px;
font-size: 1.2rem;
}
/*规定表格主体下的tr元素背景色*/
tbody tr {
background-color: #6699FF;
}
/*规定表格主体下奇数的tr元素背景色*/
tbody tr:nth-last-of-type(2n+1){
background-color: #CCFFFF;
}
/*规定表格头部下的tr元素背景色*/
thead tr {
background-color: #99CCFF;
}
/*规定家电表格背景颜色*/
table tbody > tr:first-of-type > td:first-of-type {
background-color: #6699CF;
}
/*规定家具表格背景颜色*/
table tbody > tr:last-of-type > td:first-of-type {
background-color: #5566CF;
}
/*规定第一列的尺寸为18%*/
table thead > tr:first-of-type > th:first-of-type{
width: 18%;
}
tfoot {
background: palevioletred;
}
</style>
</head>
<body>
<table>
<!-- 表格标题-->
<caption>
家具采购表
</caption>
<!-- 表格头部-->
<thead>
<tr>
<th>类型</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
</thead>
<!-- 表格主体-->
<tbody>
<tr>
<td rowspan="2">家电</td>
<td>1</td>
<td>电视</td>
<td>3000</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<!-- <td></td>-->
<td>2</td>
<td>冰箱</td>
<td>3000</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<td>家具</td>
<td>3</td>
<td>椅子</td>
<td>200</td>
<td>4</td>
<td>800</td>
</tr>
</tbody>
<!-- 表格底部-->
<tfoot>
<tr>
<td>备注</td>
<td colspan="5">PHP中文网PHP.CN QQ:33703259</td>
</tr>
</tfoot>
</table>
</body>点击 "运行实例" 按钮查看在线实例
* 使用`<div><span><p><ul>`...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不使用table制作表格</title>
<!-- <link rel="stylesheet" href="css/style2.css">-->
<style>
.table {
display: table;
box-sizing: border-box;
width: 400px;
margin: auto;
border: 1px solid black;
text-align: center;
border-collapse: collapse;
font-size: 1.2rem;
box-shadow: 0 0 10px #f9906f;
}
.caption {
display: table-caption;
border: 1px solid black;
padding: 8px;
margin: 50px 0 15px;
background-color: #faff72;
box-shadow: 0 0 10px #f9906f;
}
.thead {
display: table-header-group;
font-weight: bold;
background-color: #fff143;
}
.tbody {
display: table-row-group;
}
.tfoot {
display: table-footer-group;
background-color: #b25d25;
}
section > ul {
display: table-row;
border: 1px solid black;
}
section > ul > li {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
section > ul >li:first-of-type {
width: 20%;
}
section > ul >li:nth-of-type(2) {
width: 40%;
}
section > ul >li:last-of-type {
width: 40%;
}
section:last-of-type >ul:last-of-type >li:first-of-type {
text-align: right;
}
.tbody ul {
background-color: #ffa400;
}
section ul:nth-last-of-type(even) {
background-color: #fa8c35;
}
</style>
</head>
<body>
<article class="table">
<h2 class="caption">热量表</h2>
<section class="thead">
<ul>
<li>编号</li>
<li>名称</li>
<li>热量(每100克)</li>
</ul>
</section>
<section class="tbody">
<ul>
<li>1</li>
<li>油炸土豆片</li>
<li>612</li>
</ul>
<ul>
<li>2</li>
<li>猪肉(肥)</li>
<li>816</li>
</ul>
<ul>
<li>3</li>
<li>腊肠</li>
<li>584</li>
</ul>
<ul>
<li>4</li>
<li>牛肉干</li>
<li>550</li>
</ul>
<ul>
<li>5</li>
<li>牛肉松</li>
<li>445</li>
</ul>
<ul>
<li>6</li>
<li>猪肉松</li>
<li>396</li>
</ul>
<ul>
<li>7</li>
<li>金华火腿</li>
<li>318</li>
</ul>
<ul>
<li>8</li>
<li>炸鸡</li>
<li>279</li>
</ul>
</section>
<section class="tfoot">
<ul>
<li>注意：</li>
<li>少吃多动</li>
<li>少吃多动</li>
</ul>
</section>
</article>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运用绝对定位 实现登录框居中</title>
<!-- <link rel="stylesheet" href="css/style3.css">-->
<style>
form {
border: 1px solid black;
background-color: #d9edf7;
width: 400px;
height: 180px;
text-align: center;
/*绝对定位*/
position: absolute;
/*规定定位到左边边缘的50%和上边的50%的位置*/
left: 50%;
top: 50%;
/*使用负边距值减去宽度的200px和高度的90px值 使他居中展示*/
margin-left: -200px;
margin-top: -90px;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<form action="demo2.html" method="post">
<h3>用户登陆</h3>
<p>
<label for="name">邮箱：
<input type="text" id="name" name="name" value="33703259@qq.com">
</label>
</p>
<p>
<label for="pass">密码：
<input type="password" id="pass" name="pass" placeholder="正确密码格式：字母+数字">
</label>
</p>
<button type="button">登陆</button>
<button type="reset">清空</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
设置主体布局时先留出左右侧的距离 设置内容 左右侧 向左浮动 然后通过反方向移动和相对定位把左右侧移动到规定位置 实现圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<!-- <link rel="stylesheet" href="css/style4.css">-->
<style>
/*设置头部底部布局 背景颜色 文字居中*/
header, footer {
background-color: lavender;
height: 50px;
text-align: center;
}
/*设置主体区域 边框 内边距左右各200px边距 保持盒子大小 转为BFC块*/
main {
border: 3px solid red;
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: auto;
}
/*设置主体内容部分 保持盒子大小 宽度100% 最小高度600px*/
main > article {
box-sizing: border-box;
width: 100%;
min-height: 600px;
}
/*同时设置左右侧布局 保持盒子大小 最小高度600px 宽度200px*/
main > aside {
box-sizing: border-box;
min-height: 600px;
width: 200px;
}
/*设置main内的第一个aside元素 左侧 背景色*/
main > aside:first-of-type {
background-color: #3a87ad;
}
main > aside:last-of-type {
background-color: #0099CC;
}
/*设置main内元素左浮动*/
main > * {
float: left;
}
/*左侧向左移动-100% 使他反方向移动 设置相对定位左移动-200px*/
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>运行实例 »
点击 "运行实例" 按钮查看在线实例
* (选做): 将圣杯布局中的左右二列,使用绝对定位来实现
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<!-- <link rel="stylesheet" href="css/style6.css">-->
<style>
header, footer {
height: 60px;
background-color: #d9edf7;
text-align: center;
}
main {
border: 2px solid red;
box-sizing: border-box;
padding-left: 200px;
padding-right: 200px;
overflow: auto;
/*添加相对定位 使主体部分不乱跑*/
position: relative;
}
main * {
box-sizing: border-box;
float: left;
}
main > article {
min-height: 600px;
width: 100%;
}
main > aside {
width: 200px;
min-height: 600px;
}
main >aside:first-of-type {
background-color: lavender;
position: absolute;
top: 0;
left: 0;
}
main >aside:last-of-type {
background-color: #99CCFF;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
