css定位和布局-2019年11月4日

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

css样式代码

/*加上表格边框*/
        table{
            width: 500px;/*设置宽度*/
            margin: 20px auto;  /*表格居中显示*/
            box-sizing: border-box;/*设置表格不会被内边距和边距影响*/
            border-collapse: collapse;/*将表格所有的边框线折叠*/
            box-shadow: 1px 1px 1px #999;/*设置边框阴影*/
        }
        /*设置表头样式*/
        table caption {
            font-size: 1.3rem;/*设置字体是其他字体的1.3倍*/
            margin-bottom: 15px;
        }
        th,td{
            border: 1px solid #ccc;/*设置表格边框*/
            text-align: center; /*设置字体居中显示*/
        }
        /*使表格隔行变色 参数可以是2n+1或odd，都是求奇数*/
        tbody tr:nth-of-type(odd) {
                background-color: #ededed;
        }
        /*设置底部总价表格样式*/
        table tfoot >tr:first-of-type>td:nth-of-type(2) {
            background: radial-gradient(#22DCDAFF, white);
        }
        /*设置主体备注表格样式*/
        table tbody > tr:first-of-type > td:nth-of-type(5) {
            background: radial-gradient(#E71779FF, white);
        }

    HTML代码

    

实例

<table>
        <caption>商品信息表</caption><!-- 表格标题 -->
        <thead>
            <!-- 表格页眉 -->
            <tr>
                <td>编号</td>
                <td>商品名称</td>
                <td>数量</td>
                <td>单价</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <td>1</td>
                <td>小米</td>
                <td>5</td>
                <td>3499</td>
                   <!-- 列合并 -->
                <td rowspan="4"></td>
            </tr>
            <tr>
                <td>2</td>
                <td>华为12</td>
                <td>3</td>
                <td>5999</td>
            </tr>
            <tr>
                <td>3</td>
                <td>魅族6</td>
                <td>2</td>
                <td>2499</td>
            </tr>
            <tr>
                <td>4</td>
                <td>苹果10</td>
                <td>3</td>
                <td>7999</td>
            </tr>
        </tbody>
        <tfoot><!-- 表格页脚 -->
            <td>总价:</td>
            <!-- 行合并 -->
            <td colspan="4"></td>
        </tfoot>
    </table>

    实例：

        

    手抄：

    

    使用`<div><span><p><ul>`...等标签来制作一张课程表
    CSS代码

    

实例

.table {
        display: table;
        margin: 20px auto;
        width: 600px;
        border-collapse: collapse;
    }


    .caption {
        display: table-caption;
        text-align: center;
        margin: 20px;
    }


    .table-tr {
        display: table-row;
        height: 30px;
    }


    /*/*设置表格页眉样式*/
    .table-th {
        display: table-cell;
        font-weight: bold;
        height: 40px;
        border: 1px solid gray;
        text-align: center;
        vertical-align: middle;
        background-color: #E5E5E5;
    }


    .table-td {
        display: table-cell;
        height: 30px;
    }


    .sub-table {
        width: 100%;
        height: 100%;
        display: table;
    }


    .sub-table-tr {
        display: table-row;
        height: 100%;
    }


    .sub-table-td {
        display: table-cell;
        height: 100%;
        border: 1px solid gray;
        text-align: center;
        vertical-align: middle;
    }

HTML代码

实例

<div class="table">
        <div class="caption">课程表</div>
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="table-th" style="width: 10%;">时间</div>
                        <div class="table-th" style="width: 10%;">星期一</div>
                        <div class="table-th" style="width: 10%;">星期二</div>
                        <div class="table-th" style="width: 10%;">星期三</div>
                        <div class="table-th" style="width: 10%;">星期四</div>
                        <div class="table-th" style="width: 10%;">星期五</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表格主体 上午-->
        <div class="table-tr" style="height:30px;">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr">
                                    <div class="sub-table-td" style="width: 10%;">
                                        上午
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表格主体 下午-->
        <div class="table-tr" style="height:30px;">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr">
                                    <div class="sub-table-td" style="width: 10%;">
                                        下午
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%;border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:50%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-table-td" style="width: 10%; border: none;">
                            <div class="sub-table">
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                                <div class="sub-table-tr" style="height:10%;">
                                    <div class="sub-table-td" style="width: 100%; height:50%;">
                                        数学
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="table-tr">
            <div class="table-td">
                <div class="sub-table">
                    <div class="sub-table-tr">
                        <div class="sub-table-td" style="width: 30%;">备注：</div>
                        <div class="sub-table-td" style="width: 70%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    运行结果：

    

    

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

    

实例

    body {
        height: 2000px;
    }


    div {
        position: absolute;
        top: 20%;
        right: 50%;
        width: 300px;
        height: 200px;
        background: #ccc;
    }


    div:last-child {
        position: fixed;
    }

    效果：

    

    手抄：

        

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

        1,通过padding-right和 padding-left: 得出内容区位置。并且为左右栏留出位置。        

        2.移动左边栏位置，首先是在main区里设置所有快浮动，通过:first-of-type选中第一个，进行margin-left调整位置，然后相对定位，调整具体位置。        

        3.移动右边栏位置，首先是在main区里设置所有快浮动，通过:last-of-type选中最后一个，进行margin-left调整位置，然后相对定位，调整具体位置。

        css样式

        

实例

 * {
        margin: 0;
        padding: 0;
    }


    /*页头*/
    header,
    footer {
        /*height: 50px;*/
        padding: 20px;
        background: #ccc;
        text-align: center;
    }


    main {


        border: 1px solid #FF0000FF;
        /*左内边距: 显示左侧内容*/
        padding-left: 200px;
        /*右内边距: 显示右侧内容*/
        padding-right: 200px;
        box-sizing: border-box;
        /*将main转为BFC块, 使浮动元素包含在内, 撑开父级*/
        overflow: auto;
    }


    main>article {
        box-sizing: border-box;
        width: 100%;
        min-height: 400px;
        background: #FF0000FF;
    }


    main>aside {
        box-sizing: border-box;
        min-height: 400px;
        width: 200px;
    }


    main>aside:first-of-type {
        background-color: lightgreen;


    }


    main>aside:last-of-type {
        background-color: lightpink;
    }


    main>article,
    main>aside:first-of-type,
    main>aside:last-of-type {
        float: left;
    }


    aside:first-of-type {
        margin-left: -100%;
        position: relative;
        left: -200px;
    }


    aside:last-of-type {
        margin-left: -200px;


        /*与左侧一样, 将右侧移入到它的预留空间中*/
        position: relative;
        left: 200px;
    }

    效果图：

            

    手抄：

            

        

        (选做): 不使用`<table>..`.写表格时,如何实现行与列合并

              1。合并行，我的思路是 将表格每行单独嵌套一个独立的表格，这样在嵌套的独立表格内部，单元格合并就能通过控制嵌套表格的行数和列数以及单元格的宽高来实现，。
                                具体流程：                    

                                                1.给 display: table;的设置总宽度

                                                                                

                                                2.给需要合并行的div的class设置为display: table-cell;上面有说道，表格每行单独嵌套一个独立的表格，因此，div为display: table-cell必须在div为display: table-row下才能有效。                

                            2.合并列， 与列合并的实现思路类似，将有单元格合并的列单独嵌套一个display为table的DIV，高度=单行高*单元格合并数目的倍数，同行的其他列同样均单独嵌套DIV。            具体流程：display: table;>table-cell（形成一个单元格）>table-row（单元格里形成一个表格行tr）>table-cell;（第一个tr下的第一个td）这样第一列的一个表格就创建好了

            (选做): 将圣杯布局中的左右二列,使用绝对定位来实现

          css样式

                    

实例

body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
}


header,
footer {
    padding: 20px;
    background: #ccc;
    text-align: center;
}


main {
    overflow: hidden;
    min-height: 400px;
}


main>article,
main>aside:first-of-type,
main>aside:last-of-type {
    float: left;
}


main>article {
    min-height: 400px;
    width: 100%;
    background: lightpink;
}


aside:first-of-type {
    min-height: 400px;
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
}


aside:last-of-type {
    min-height: 400px;
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
}


.content {
    margin: 0 150px 0 200px;
}

        效果图：

        

        注： 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在article这个块中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

            

        
总结：        1.css的表格控制：在HTML中，生成表格有两种，一种是HTML代码生成，一种div块加css的display属性来生成。div加css生成的表格在前端框架比较常见。        

                 2.浮动：元素浮动最初是用来实现图文混排的,现在已成为网页布局的重要工具，在使用浮动后，在该块后面的其他块有受到浮动影响，脱离文档留。能够设置他们的宽高，位置 。                        3.定位：有四种定位，固态定位，页面元素的默认定位类型。                     相对定位：以旁边的块为参照物，移动自己。
                     绝对定位：首先设置父级定位属性，然后以父级做参照物来改变自己位置。
                     固定定位：是指定位元素始终相对初始包含块来定位，适合用来做网页弹窗小广告。