![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：表格的模拟, 可能一开始不太习惯, 一旦熟悉了, 就会喜欢上的, 非常方便, 特别是特殊布局的时候
Collection
Collection
一、制作一张商品信息表,内容自定,要求用到行与列的合并
列合并使用colspan="n"（n代表要合并的列数）
行合并使用rowspan="n"（n代表合并的行数）
table {
box-sizing: border-box;
border: 1px solid black;
width: 700px;
height: 300px;
margin: auto;
border-collapse: collapse;
}
table caption {
font-size: 20px;
margin-bottom: 10px;
}
th,td {
border: 1px solid black;
text-align: center;
padding: 15px;
}
tbody tr:nth-of-type(2n) {
background-color: lightgray;
}
table thead {
background: linear-gradient(lightblue,white);
}
table tfoot {
background: linear-gradient(lightsalmon,white);
}
二、使用<div><span><p><ul>...等标签来制作一张课程表
display属性：table可以使<div>标签变成块级表格元素，
table-caption-group：使子元素变成表格的caption（类似 <caption>）
table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）
table-row-group： 此元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-footer-group： 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
table-row： 此元素会作为一个表格行显示（类似 <tr>）
table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
.table {
display: table;
box-sizing: border-box;
margin: auto;
width: 600px;
color: black;
text-align: center;
}
.caption {
display: table-caption;
}
.thead {
display: table-header-group;
font-weight: bold;
font-size: 1.5rem;
color: white;
background: linear-gradient(green,white);
text-shadow: 1px 1px 1px black;
}
.tbody {
display: table-row-group;
}
.tfoot {
display: table-footer-group;
color: red;
background-color: gray;
}
div > ul {
display: table-row;
}
div > ul > li{
display: table-cell;
border: 1px solid black;
padding: 10px;
}
三、使用绝对定位,实现用户登录框在页面中始终居中显示
CSS定位分为：
①、static（静态定位）：HTML 元素的默认值，即没有定位，遵循正常的文档流对象
②、fixed（固定定位）：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
③、relative（相对定位）：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块
④、absolute（绝对定位）：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
body {
position: relative;
}
.form1 {
position: absolute;
left: 50%;
margin-left: -150px;
width: 300px;
}
四、模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路
①、先把头部、内容区、左右侧边框、底部的div布局
②、先把头部和底部区分开，主要处理内容区和左右侧边框
③、设置主体区左右内边距并把main转成BFC块
④、内容区用width:100%显示
⑤、把内容区元素进行向左的浮动
⑥、左侧边框左内边距设置为内容区的宽度，再进行向左的相对定位
⑦、右侧边框左内边距设置为右侧边框的宽度，再进行向右的相对定位
header,footer {
height: 50px;
background-color: lightblue;
}
main {
box-sizing: border-box;
border: 1px solid red;
padding-left: 150px;
padding-right: 150px;
overflow: auto;
}
main > article {
box-sizing: border-box;
background-color: lightgreen;
width: 100%;
min-height: 500px;
}
main > aside {
box-sizing: border-box;
background-color: lightsalmon;
min-height: 500px;
width: 150px;
}
main > article,main > aside {
float: left;
}
main > aside:first-of-type {
margin-left: -100%;
position: relative;
left: -150px;
}
main > aside:last-of-type {
margin-left: -150px;
position: relative;
left: 150px;
}
