《网页设计基础——表格与表单》

网页设计基础——表格与表单

一、表格基础框架;


规则:

  1. table:表示整个表格
  2. caption:定义表格的标题
  3. tr:表示表格的一行。
  4. td:表示行中的一个列,需要嵌套在
    标签内。

  5. th:表示表头单元格. 会居中加粗。
  6. 格式:

    二、表格样式;


    1.表格边框的合并与分离

    border-collapse: collapse;      /* 边框合并 */
    border-collapse: separate;      /* 边框分离 */
    

    2.表格边框的间距大小

    border-collapse: separate;      /* 边框分离 */
    border-spacing: 5px 10px        /* 横向 纵向*/
    

    3.表格标题的位置

    caption-side: top;              /* 把标题放在表格上面。*/
    caption-side: bottom;           /* 把标题放在表格下面。*/
    

    4.表头的标识

    
        星期一        
        星期二        
    
    
        第一节            
        语文                                 
    
    

    三、表单基本框架


    规则:


    1. :定义供用户输入的表单标签。

    2. :输入标签。
    3. type:定义输入类型,如文本域text、密码字段password、提交按钮submit
    4. name:定义表单的名称,用于在表单提交之后引用表单数据,或者在 JavaScript 中引用元素。
    5. placeholder:定义输入框中的提示信息。

    格式:

    四、表单样式;


    例一:文本域(Text Fields)

    
    
            文本域
    
            
    姓名:
    学号:

    网页效果:

    《网页设计基础——表格与表单》插图

    例二:密码字段(Password)

    
    
            密码字段
    
            
    账号:
    密码:

    网页效果:

    《网页设计基础——表格与表单》插图1

    例三:单选按钮(Radio Buttons)

    
    
            表单
    
            

    网页效果:

    《网页设计基础——表格与表单》插图2

    例四:复选框(Checkboxes)

    
    
            表单
    
            
    我是程序员
    我是超级英雄

    网页效果:

    《网页设计基础——表格与表单》插图3

    例五:提交按钮(Submit)

    
    
            表单
    
            


    网页效果:

    《网页设计基础——表格与表单》插图4

    posted @
    2022-09-17 00:58 
    温稚生 
    阅读(0
    评论(0
    编辑 
    收藏 
    举报






文章来源于互联网:《网页设计基础——表格与表单》

THE END
分享
二维码