zoukankan      html  css  js  c++  java
  • HTMLCSS学习笔记(六)----表格表单及样式重置,特性

    • 表格
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>...</title>
    </head>
    <body>
    
     <table> <!-- 表格 -->
       <thead> <!-- 表格头部 -->
        <tr> <!-- 行 -->
          <th>表格标题</th>
          <th>表格标题</th>
          <th>表格标题</th>
        </tr>
       </thead>
     <tbody> <!-- 表格主体 -->
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
     </tbody>
     <tfoot> <!-- 表格尾部 -->
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
    </ftoot> <!-- 表格尾部 -->
    </table>
    
    </body>
    </html> 

      table css reset:

     th,td{padding:0;}

     table{ border-collapse: collapse;} 单元格属性合并

     注意事项:

     1,不要给table,th,td以外的表格标签加样式。

     2,table的标签基本特性是 display: table ;

     3,单元格默认平分table的宽度;

     4,th 里面的文字默认加粗并且左右上下居中显示;

     5,td里面的内容默认上下居中左右居左显示;

     6,table 决定了整个表格的宽度;

     7,table 里面的单元格宽度会被转换成百分比;

     8,表格里面的每一列必须有宽度;

     9,表格同一竖列继承最大宽度;

     10,表格同行继承最大高度;


    • 单元格合并

      <td colspan="3"></tdx>

     属性规定单元格可横跨的列数,被合并的列数去掉

     <td rowspan="3"></tdx>

     属性规定单元格可横跨的行数,被合并的列数去掉


    • 表单元素

     <form action="http://www.cnblog.com/" method="get" target="_blank">

     提交按钮:<input type="submit" value="提交OK"/ name="">

    </form>

     </br></br>

     文本框 : <input type="text" name=""/>

    </br></br>

    密码框:<input type="password" name=""/>

     </br></br>

     单选按钮 :

    <label>

    <input type=“radio” name="gender"/ >男

    </label>

    <label>

    <input type=“radio” name="gender"/ >女

    </label>

    两者取同一个名字是或的关系

    <br/><br/>

    复选框:

    <input type="checkbox" name=""disabled>逛街<!-- 禁止禁用 -->

    <input type="checkbox" name="">健身

    <input type="checkbox" name="">直排

    <input type="checkbox" name="">美食

    <input type="checkbox" name=checked/>旅游 <!-- 默认选中 -->

    <br/><br/>

    <hr/>

    上传:<input type="file" name=""/>

    <br/><br/>

    图片:<input src="xxx.jpg" type="image" name=""/>

    <br/><br/>

    按钮:<input type="button" name""/>

    <br/><br/>

    重置:<input type="reset" name""/>

    <br/><br/>

    隐藏:<input type="hidden" name""/>

    <br/><br/>

    <hr/>

     <select>

     <option >1990</option>

     <option>1991</option>

     <option selected>1992</option> <!-- 默认显示 -->

     <option>1993</option>

     </select>

     <br></br>

    文本域: <textarea></textarea>

     默认样式重置:

    form{margin:0;}

    input{margin:0; padding:0;}有默认两像素的边框

    select{margin:0;}一般不控制高度

    textarea{margin:0;padding:0;}


     

  • 相关阅读:
    uva 147 Dollars
    hdu 2069 Coin Change(完全背包)
    hdu 1708 Fibonacci String
    hdu 1568 Fibonacci
    hdu 1316 How Many Fibs?
    poj 1958 Strange Towers of Hanoi
    poj 3601Tower of Hanoi
    poj 3572 Hanoi Tower
    poj 1920 Towers of Hanoi
    筛选法——素数打表
  • 原文地址:https://www.cnblogs.com/BBeyes/p/6581630.html
Copyright © 2011-2022 走看看