zoukankan      html  css  js  c++  java
  • 表格 及其垂直居中

    # 表格
    # table的display: table
    # table显示规则注意点:当设置的盒子高度大于显示内容需求高度,采用设置高度;反之则由显示内容撑开
    # border:设置边框宽度
    # cellspacing: 单元格间的间距
    # cellpadding: 单元格的内边距==>th,td设置padding
    #
    # 举例:
    # <!DOCTYPE html>
    # <html>
    # <head>
    # <meta charset="UTF-8">
    # <title>表格</title>
    # <style type="text/css">
    # .table1{
    # 50px;
    # height: 50px;
    # }
    # th,td{
    # padding: 20px;
    # }
    # .table2 td {
    # border: 10px solid black;
    # }
    # </style>
    # </head>
    # <body>
    # < table
    #
    #
    # class ="table1" border="1" cellpandding="10px" cellspacing="0" >
    #
    # < tr >
    # < th > 标题 < / th >
    # < th > 标题 < / th >
    # < th > 标题 < / th >
    # < / tr >
    # < tr >
    # < td > 单元格 < / td >
    # < td > 单元格 < / td >
    # < td > 单元格 < / td >
    # < / tr >
    # < tr >
    # < td > 单元格 < / td >
    # < td > 单元格 < / td >
    # < td > 单元格 < / td >
    # < / tr >
    #
    # < / table >
    #
    # < !-- 边框的保留格式rules:rows | coll | groups | all -->
    # < table
    #
    #
    # class ="table2" border="10" rules="all" >
    #
    # < thead >
    # < th > 标题 < / th >
    # < th > 标题 < / th >
    # < th > 标题 < / th >
    # < / thead >
    # < tbody >
    # < tfoot >
    # < tr >
    # < !-- rowspan合并列 -->
    # < td
    # rowspan = "2"
    # colspan = "2" > 单元格 < / td >
    # < !-- < td > 单元格 < / td > -->
    # < td > 单元格 < / td >
    # < / tr >
    # < tr >
    # < !-- < td > 单元格 < / td > -->
    # < !-- < td > 单元格 < / td > -->
    # < td > 单元格 < / td >
    # < / tr >
    # < tr >
    # < !-- colspan合并行 -->
    # < td
    # colspan = "2" > 单元格 < / td >
    # < !-- < td > 单元格 < / td > -->
    # < td > 单元格 < / td >
    # < / tr >
    # < / tfoot >
    #
    # < / tbody >
    #
    # < / table >

    # 实现多行文本垂直居中:

    # 举例:
    # <style type="text/css">
    # .box,.b1 {
    # 150px;
    # height: 150px;
    # margin: 10px auto;
    #
    # text-align: center;
    # }
    # .b2,.b3 {
    # line-height: 150px;
    # /*不起作用*/
    # /*vertical-align: middle;*/
    # }
    # .b1 {
    # /*float: left;*/
    # /*实现多行文本垂直居中*/
    # /*针对父级设置,父级中的多个块级文本类子级标签垂直居中*/
    # display: table-cell;
    # vertical-align: middle;
    # }
    # </style>
    # </head>
    # <body>
    # <!-- 注: 如果想要调整box位置 可以给box嵌套一个子级b1来进行分标签控制 -->
    # <div class="box">
    # <div class="b1">
    # <p>真的</p>
    # <p>好的</p>
    # </div>
    # </div>
    # <div class="box b2">
    # <p>真的2</p>
    # <p>哈哈哈哈</p>
    # </div>
    # <div class="box b3">
    # <p>你的大锅饭</p>
    # <p>吃穷</p>
    # </div>
  • 相关阅读:
    896. Monotonic Array单调数组
    865. Smallest Subtree with all the Deepest Nodes 有最深节点的最小子树
    489. Robot Room Cleaner扫地机器人
    JavaFX
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
    《Python CookBook2》 第一章 文本
  • 原文地址:https://www.cnblogs.com/yanhui1995/p/10125583.html
Copyright © 2011-2022 走看看