11月1日,2日,3日作业
* 制作一张商品信息表,内容自定,要求用到行与列的合并
* 使用<div><span><p><ul>...等标签来制作一张课程表
* 使用绝对定位,实现用户登录框在页面中始终居中显示
* 模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
* (选做): 不使用<table>...写表格时,如何实现行与列合并
* (选做): 将圣杯布局中的左右二列,使用绝对定位来实现
* (选做): 与圣杯类似的"双飞翼"布局如何实现,并实例演示
----------------------------------------------------------------------------------------------
1、制作一张商品信息表,内容自定,要求用到行与列的合并
实例
<style>
table{
/*border: 1px solid #444;*/
color: #444;
box-sizing: border-box;
box-shadow: 1px 1px 2px #444444;
width: 600px;
border-collapse: collapse;
margin: auto;
}
td,th{
border: 1px solid #444;
text-align: center;
padding: 10px;
}
table caption{
font-size: 1.5rem;
margin-bottom: 30px;
}
tbody tr:nth-of-type(odd){
background-color: #8d8593;
}
table thead > tr:first-of-type{
background: linear-gradient(#091599,#fff);
color: white;
}
table tfoot > tr:last-of-type{
background: linear-gradient(#ffe90d, #fff);
}
table tbody > tr:first-of-type > td:first-of-type{
background-color: #fff;
}
</style>
<table>
<caption>商品信息表</caption>
<thead>
<tr>
<th>分类</th>
<th>食品</th>
<th>干货</th>
<th>电器</th>
<th>家居</th>
<th>生鲜</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">一店</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>备注</td>
<td colspan="5">加油！加油！做梦,做梦</td>
</tr>
</tfoot>
</table>运行实例 »
点击 "运行实例" 按钮查看在线实例
2、使用<div><span><p><ul>...等标签来制作一张课程表
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用div,span,,p,ul...等标签来制作一张课程表</title>
<style>
.table {
display: table;
box-sizing: border-box;
width: 580px;
height: 200px;
border: 1px solid black;
margin: auto;
border-collapse: collapse;
background: linear-gradient(#3b9cf0,white);
}
.caption {
display: table-caption;
text-align: center;
}
.thead {
display: table-header-group;
/*字间距*/
letter-spacing: 3px;
/* 文本居中*/
text-align: center;
font-size: 1.5rem;
color: white;
text-shadow: 1px 1px 1px black;
}
.tbody {
display: table-row-group;
text-align: center;
}
.tfoot {
display: table-footer-group;
/* 文本居中*/
text-align: center;
}
ul {
display: table-row;
}
ul > li {
display: table-cell;
border: 1px solid black;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="table">
<h3 class="caption">课程表</h3>
<span class="thead">
<ul>
<li>序号</li>
<li>科目</li>
<li>详细</li>
</ul>
</span>
<span 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>
</span>
<span class="tfoot">
<ul>
<li>备注</li>
<li>认真学</li>
<li>做作业</li>
</ul>
</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、使用绝对定位,实现用户登录框在页面中始终居中显示
实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.box1 {
box-sizing: border-box;
width: 400px;
height: 300px;
text-align: center;
position: absolute;
left:50%;
top: 50%;
}
.box2 {
border: 1px solid black;
position: relative;
left: -50%;
top: -50%;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p>
<label for="username">用户名:</label>
<input type="text" id="username" value="请输入用户名">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" value="">
</p>
<button>登陆</button>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
header,footer {
height: 50px;
background-color: #091399;
color: white;
text-align: center;
}
main{
box-sizing: border-box;
border: 1px solid #72ff14;
padding: 0 100px 0 100px;
overflow: auto;
}
article {
width: 100%;
height: 500px;
background-color: #f0cd13;
}
aside {
box-sizing: border-box;
height: 500px;
width: 100px;
}
aside:first-of-type{
background-color: #fa2bee;
height: 500px;
margin-left: -100%;
position: relative;
left: -100px;
}
aside:last-of-type{
background-color: #b22c11;
height: 500px;
margin-left: -100px;
position: relative;
left: 100px;
}
article, aside {
float: left;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧</aside>
<aside>右侧</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例