美文网首页
css表格和表单

css表格和表单

作者: 邵毅超 | 来源:发表于2018-11-26 20:26 被阅读0次

    表格:table,也可以设置布局,现已被div盒子所替代。那么大概的一个格式就是table-th-tr-td,th:表头,边框线border的值collapse

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格</title>
    <style type="text/css">
    .title {
        font-weight: bold;
    }
    table{
            border-collapse:collapse;
        }
    tr:nth-child(even){
        background-color:#FCC;
    }
    tr:hover{
        background-color:#FF6;
    }
    </style>
    </head>
    
    <body>
    <table width="767" height="257" border="1" align="center">
      <tr class="title">
        <th scope="col">学号</th>
        <th scope="col">姓名</th>
        <th scope="col">性别</th>
        <th scope="col">住址</th>
      </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">孙悟空</td>
        <td align="center">男</td>
        <td align="center">花果山</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">沙和尚</td>
        <td align="center">男</td>
        <td align="center">大唐</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">唐僧</td>
        <td align="center">男</td>
        <td align="center">水里</td>
      </tr>
    </table>
    </body>
    </html>
    
    image.png

    表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <style type="text/css">
            p{
                margin: 0px;
            }
        </style>
    </head>
    <body>
        
        <form action="#" class="noone">
            <fieldset>
                <legend>基本信息</legend>
            <label for="um">您的名字</label>    
            <input id='um' type="text" name="username">
            <br><br>
            
            <label for="sex">手机号码</label>   
            <input id='sex' type="text" placeholder="CN +86中国区">
            <br><br>
            </fieldset>
        </form>
    </body>
    </html>
    
    image.png

    相关文章

      网友评论

          本文标题:css表格和表单

          本文链接:https://www.haomeiwen.com/subject/npsiqqtx.html