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>
  • 相关阅读:
    JQueryMobile开发必须的知道的知识
    15款很棒的 JavaScript 开发工具
    浅谈 JavaScript 编程语言的编码规范
    也谈谈js的压缩,jquery压缩。【转】
    jQuery实现点击单选按钮切换选中状态效果
    JavaScript入门学习书籍的阶段选择
    试读《基于MVC的JavaScript Web富应用开发》— 不一样的JavaScript
    javaScript之function定义
    利用Powershell自动部署asp.net mvc网站项目 (一)
    【好文收藏】javascript中event对象详解
  • 原文地址:https://www.cnblogs.com/yanhui1995/p/10125583.html
Copyright © 2011-2022 走看看