制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表,内容自定,要求用到行与列的合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <caption><h3>商品信息表</h3></caption> <thead> <tr bgcolor="#add8e6"> <th>编号</th> <th>名称</th> <th>单价</th> <th>重量</th> <th>金额</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>苹果</td> <td>10元</td> <td>2</td> <td>20元</td> <td rowspan="3">全在货架A</td> </tr> <tr> <td>2</td> <td>梨子</td> <td>5元</td> <td>1</td> <td>5元</td> </tr> <tr> <td>3</td> <td>枣子</td> <td>20元</td> <td>3</td> <td>60元</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>6</td> <td>85元</td> <td></td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
[object Object]
用div span ul li等标签来制作一张课程表
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用div span p ul...等标签来制作一张课程表</title> <link rel="stylesheet" href="static/2.css"> </head> <body> <div class="table"> <span class="caption">兴趣班课程表</span> <div class="thead"> <ul> <li>星期</li> <li>课程</li> <li>描述</li> </ul> </div> <div class="tbody"> <ul> <li>1</li> <li>唱歌</li> <li>唱歌</li> </ul> <ul> <li>2</li> <li>画画</li> <li>画画</li> </ul> <ul> <li>3</li> <li>跳舞</li> <li>跳舞</li> </ul> </div> <div class="tfoot"> <ul> <li>备注</li> <li>学习时间:9:00-12:00</li> <li>一对一辅导</li> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
div {
box-sizing: border-box;
}
ul {
display: table-row;
}
li {
display: table-cell;
border: 1px solid #444;
padding: 10px;
text-align: center;
}
.table {
display: table;
border-collapse: collapse;
width: 650px;
margin: auto;
color: #444;
box-shadow: 0 0 6px green;
}
.caption {
display: table-caption;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.thead {
display: table-header-group;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
letter-spacing: 5px;
color: white;
text-shadow: 1px 1px 0 black;
background: linear-gradient(green, white);
}
.tbody {
display: table-row-group;
}
.tfoot {
display: table-footer-group;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
演示实例:
使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用绝对定位,实现用户登录框在页面中始终居中显示</title>
<link rel="stylesheet" href="static/3.css">
</head>
<body>
<form action="login.php" method="post">
<p>用户名: <input type="text" name="username" value="用户名"></p>
<p>密码: <input type="password" name="password" placeholder="输入你的密码"></p>
<button>登陆</button>
</form>
</body>
</html>
form {
position: absolute;
top: 50%;
left: 50%;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
演示实例:
模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
圣杯布局实现流程:
1.将页面分为头尾和中间主体
2.将主体再分为左右侧和中间内容部分.
3.让中间主体内容全部处于浮动状态 , 然后将主体区转为bfc块.
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路</title>
<link rel="stylesheet" href="static/4.css">
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>
header, footer {
height: 60px;
background-color: lightcoral;
}
main {
padding-left: 200px;
padding-right: 200px;
box-sizing: border-box;
overflow: hidden;
}
main > article {
background-color: lightblue;
width: 100%;
min-height: 600px;
float: left;
}
main > aside {
min-height: 600px;
width: 200px;
float: left;
}
main > aside:first-of-type {
background-color: lightgreen;
margin-left: -100%;
position: relative;
left: -200px;
}
main > aside:last-of-type{
background-color: lightpink;
margin-left: -200px;
position: relative;
left: 200px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
1. css3预留的display值可以快速绘制表格.
2.float: left / right 只会对后面元素影响,不影响前面的.清除: clear: left/right/both
3.给父元素添加overflow属性转为BFC块,使其计算高度时包括浮动元素
4.元素的定位:常用有四种: 静态定位, 相对定位,绝对定位, 固定定位
5.了解并制作了圣杯布局.