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>
  • 相关阅读:
    代码互改
    第一次个人编程作业
    第一次博客
    个人总结
    第三次个人作业--用例图设计
    第二次结对作业
    第一次结对作业
    记录浏览他人代码
    中文编程作业
    第一篇随笔
  • 原文地址:https://www.cnblogs.com/yanhui1995/p/10125583.html
Copyright © 2011-2022 走看看