zoukankan      html  css  js  c++  java
  • css011 表格和表单的格式化

    css011 表格和表单的格式化

    一、    让表格专司其职

       Html中创建一个三行三列的表格

    <table>

           <caption align="bottom">

                  table 1:cosmofarmer.com's indoor mower roundup

           </caption>

           <colgroup>

                  <col id="brand"></col>

                  <col id="price"></col>

                  <col id="power"></col>

           </colgroup>

           <thead>

                  <tr>

                         <th scope="col">brand</th>

                         <th scope="col">price</th>

                         <th scope="col">power</th>

                  </tr>

           </thead>

           <tbody>

                  <tr>

                         <td>hello</td>

                         <td>$988</td>

                         <td>lal</td>

                  </tr>

                  <tr>

                         <td>hi</td>

                         <td>$1000</td>

                         <td>lalala</td>

                  </tr>

           </tbody>

    </table>

    用到的标签比较多<table> <caption> <colgroup> <col>  <thead> <tr> <th> <td>

    二、    给表格定义样式

    1、添加padding

    td{padding:10px 5px 2px 6px;}

    2、调整垂直对齐和水平对齐

    text-align和vertical-align

    text-align控制水平定位方向

    值:left right center justify

    table {text-align:center; }

    vertical-align调整垂直定位方向

    值:top baseline middle bottom

    3、创建边框border

    控制表格之间的空格

    border-spacing:5px;

    table{ border-spacing:5px; }

    4、消除双边框

    table{ border-collapse:collapse; }

    5、圆角

    border-radius

    td{

       border:1px solid black;

       border-radius:5px;

    }

    6、给行和列定义样式

    tr:nth-of-type(odd) {background-color:red;}

    tr:nth-of-type(even) {background-color:blue;}

    td:nth-of-type(odd) {background-color:red;}

    td:nth-of-type(even) {background-color:red;}

    三、    给表单定义样式

    font  background-color color margin padding等

    1、html表单元素

    <fieldset>

    <legend></legend>

    </fieldset>

    text fields(文本域)

    button

    drop-down menus(下来菜单)

    checkbox(复选框)

    2、利用css布置表单

    a、 每一个label标签都用一个tag标签包围起来

    b、用display属性值设为inline-block,并设置宽度

    .albel{

       display:inline-block;

        20px;

    }

    c、 调整样式

     .albel{

       float:left;

       20px;

       vertical-align:top;

       text-align:right;

       margin-top:20px;

    }

  • 相关阅读:
    深度学习练习(三)
    深度学习核心技术笔记(一)
    tensorflow的函数
    举例
    Tensorflow 笔记
    tensorflow框架
    基于python的感知机
    深度学习练习(一)
    深度学习练习(二)
    [javascript 实践篇]——那些你不知道的“奇淫巧技”
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5107464.html
Copyright © 2011-2022 走看看