一、 制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css控制表格的样式</title>
<!-- <link rel="stylesheet" href="static/css/style1.css">-->
<style>
/*给表格添加表格线*/
table{
border-collapse: collapse;/*将表格中的边框进修折叠*/
/*border: 1px solid #666;*/
color: #666;
box-sizing: border-box;
box-shadow: 1px 2px 1px #ccc;
}
td,th{
border: 1px solid #666;
}
/*设置表格的宽度和居中*/
table{
width: 700px;
margin: 10px auto;
}
/*设置表格页眉*/
table caption{
font-size: 1.3rem;
margin-bottom: 15px;
}
/*表格文本居中*/
th,td{
text-align: center;
padding: 10px;
}
/*隔行变色*/
/*tbody>tr:nth-child(odd){*/
/* background-color: #eee;*/
/*}*/
tbody>tr:nth-of-type(odd){
background-color: lightgoldenrodyellow;
}
/*设置表头渐变色*/
table thead>tr:first-of-type{
background:linear-gradient(lightseagreen,lightblue);
}
/*设置表脚的渐变色*/
table tfoot>tr:last-child{
background: linear-gradient(lightblue,lightcyan);
}
/*设置表格上午单元格的背景色*/
table tbody>tr:first-of-type>td:first-of-type{
background: linear-gradient(lightpink,lightyellow);
}
/*设置表格下午单元格的背景色*/
table tbody>tr:nth-of-type(4)>td:first-of-type{
background: linear-gradient(to left,lightseagreen,white);
}
</style>
</head>
<body>
<table >
<caption>合肥科大附小三年级（2）班课程表</caption>
<!-- 表头-->
<thead>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 表格主题-->
<tbody>
<tr>
<td rowspan="3">上午<br/>8:00~11:30</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td rowspan="2">上午<br/>8:00~11:30</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>体育</td>
<td>音乐</td>
</tr>
</tbody>
<!-- 表格页脚-->
<tfoot>
<tr>
<td>备注：</td>
<td colspan="5">每天下午15：30家长需陪同孩子做班级值日</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、 使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用div布局表格</title>
<style>
.table{
display: table;
box-sizing: border-box;
border: 1px solid #ccc;
border-collapse: collapse;
width: 680px;
margin: 0 auto;
}
/*设置表名称*/
.caption{
display: table-caption;
text-align: center;
font-size: 1.2rem;
margin-bottom: 20px;
}
/*设置表头*/
.thead{
display: table-header-group;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
letter-spacing: 5px;
background: linear-gradient(green,white);
color: #fff;
text-shadow: 1px 1px 2px #ccc;
}
/*将所有的ul转为行*/
.table ul{
display: table-row;
}
/*将所有的li转为单元格*/
.table ul li{
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
/*设置主体*/
.tbody{
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<span class="caption">课程表</span>
<!-- 表头-->
<div class="thead">
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
</div>
<!-- 表格主体-->
<div class="tbody">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>历史</li>
<li>化学</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用绝对定位,实现用户登录框在页面中始终居中显示 </title>
<style>
form{
width: 240px;
background-color: aliceblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
padding: 50px;
}
</style>
</head>
<body>
<form action="xxx.php" method="post" class="box">
<!-- 用户名-->
<p>
<label for="username">用户名：</label><br/>
<input type="text" name="username" id="username" placeholder="请输入用户名！">
</p>
<!-- 密码-->
<p>
<label for="password">密码</label><br/>
<input type="password" name="password" id="password" value="">
</p>
<!-- 性别-->
<p>
<label for="male">性别：</label><br/>
<input type="radio" name="gender" id="male" /><label for="male">男</label>
<input type="radio" name="gender" id="female" /><label for="female">女</label>
<input type="radio" name="gender" id="secrecy" checked /><label for="secrecy">保密</label>
</p>
<!-- 年龄-->
<p>
<label for="age">年龄：</label><br/>
<input type="number" name="age" id="age" min="6" max="60" >
</p>
<!-- 邮箱-->
<p>
<label for="email">邮箱：</label><br/>
<input type="email" name="password" id="email" value="">
</p>
<!-- 手机号码-->
<p>
<label for="phonenum">手机号码：</label><br/>
<input type="text" name="phonenum" id="phonenum" value="手机号码">
</p>
<!-- 喜好-->
<p>
<label for="sports">爱好：</label><br/>
<input type="checkbox" name="sports" id="sports"><label for="sports">运动</label>
<input type="checkbox" name="music" id="music"><label for="music">音乐</label>
<input type="checkbox" name="game" id="game"><label for="game">游戏</label>
<input type="checkbox" name="read" id="read"><label for="read">阅读</label>
</p>
<!-- 请选择课程-->
<lable for="course">课程</lable><br/>
<select name="course">
<optgroup label="前端">
<option value="html" >Html</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="Jquery">Jquery</option>
</optgroup>
<optgroup label="后端">
<option value="PHP" selected>PHP</option>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Laravel">Laravel</option>
</optgroup>
<optgroup label="服务器商">
<option value="阿里云">阿里云</option>
<option value="腾讯云">腾讯云</option>
<option value="华为云">华为云</option>
<option value="京东云">京东云</option>
</optgroup>
</select>
<!-- 提交按钮-->
<p></p>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局实战：圣杯布局</title>
<style>
body{
width: 1280px;
margin: 0 auto;
}
header, footer {
height: 60px;
line-height: 60px;
text-align: center;
background-color: lightgray;
}
main {
border: 2px solid red;
padding: 0 200px;
box-sizing: border-box;
overflow: hidden;
}
main > article {
box-sizing: border-box;
width: 100%;
border: 1px solid #ccc;
min-height: 600px;
}
main > aside{
width: 200px;
box-sizing: border-box;
min-height: 600px;
}
main > aside:first-of-type{
background-color: #eeeeee;
}
main>aside:last-of-type{
background-color: lightblue;
}
main>article,
main>aside:first-of-type,
main>aside:last-of-type{
float: left;
}
main>aside:first-of-type{
margin-left: -100%;
position: relative;
left: -200px;
}
main>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>运行实例 »
点击 "运行实例" 按钮查看在线实例