博客列表 >CSS中表格属性、浮动、定位知识详解-PHP九期

CSS中表格属性、浮动、定位知识详解-PHP九期

曾龙宇
曾龙宇原创
2019年11月04日 09:28:21510浏览

 一、制作一张商品信息表,内容自定,要求用到行与列的合并 

列合并使用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);
}

blob.png

IMG_0706.JPG

二、使用<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;
}

blob.png

IMG_0707.JPG


三、使用绝对定位,实现用户登录框在页面中始终居中显示 

CSS定位分为:

①、static(静态定位):HTML 元素的默认值,即没有定位,遵循正常的文档流对象

②、fixed(固定定位):元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动

③、relative(相对定位):相对定位元素的定位是相对其正常位置,移动相对定位元素,但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块

④、absolute(绝对定位):绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

body {
    position: relative;
}
.form1 {
    position: absolute;
    left: 50%;
    margin-left: -150px;
    width: 300px;
}

blob.png

IMG_0708.JPG


四、模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路 

①、先把头部、内容区、左右侧边框、底部的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;
}

blob.png

IMG_0709.JPG  1572790198387148.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议