运用表单功能做了登陆窗口+超链接+表格

原创 2018-12-02 20:35:11 287
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>成绩查询登陆</title> </head> <sty
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>成绩查询登陆</title>
</head>
<style>
    div {
        background: #fff;
        text-align: center;
        }
    input {
        height: 45px;
        width:300px;
        border: 1px solid;
        margin-top: 20px;
    }
    button {
        height: 45px;
        width: 300px;
        background: #fff;
        margin-top: 20px;
        border: none;
        background:  #EF5B00;
        color: #fff;
        font-size: 20px;
    }
    a {
        color: #fff;
        text-decoration: none;

    }
    a:hover {
        color: #000;
    }
</style>
<body>
    <div>
        <form action="">
        <input type="text" placeholder="请输入用户名"><br>
        <input type="password" placeholder="请输入密码"><br>
        <button><a href="chengji.html">登陆</a></button>
        </form>
        
    </div>
</body>
</html>




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>成绩单详情页</title>
</head>
    <style>
          * {
              margin: 0px;
              padding: 0px;
          }
          div {
              margin: 0 auto;
              height: 600px;
              width: 500px;
              margin-top: 100px;
          }
        table {
            text-align: center;
            border: 1px solid #ccc;
            height: 400px;
            width: 500px;
            border-collapse: collapse;
        }
        th {
            border: 1px solid #ccc;
        }
        tr td{
            height: 40px;
            border: 1px solid #ccc;
            
        }
        button {
            height: 30px;
            width: 100px;
            background: #fff;
            background:  #EF5B00;
            border: none;
            color: #fff;
            font-size: 16px;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        a:hover {
            color: #000;
        }
    </style>
<body>
    <div>
        <table>
        <tr>
            <th colspan="7">清华小学二年级一班成绩单</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>地理</th>
            <th>历史</th>
            <th>生物</th>
        </tr>
        <tr>
            <td>黎明</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李刚</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>大卫</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>小黄</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>佩奇</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td>乔治</td>
            <td>99</td>
            <td>90</td>
            <td>45</td>
            <td>89</td>
            <td>46</td>
            <td>88</td>
        </tr>
        <tr>
            <td colspan="7"><button><a href="login.html">退出</a></button></td>
        </tr>
    </table>
    
    </div>
    
</body>
</html>

批改老师:天蓬老师批改时间:2018-12-02 20:57:35
老师总结:以后提交作业 , 一定要加说明, 如果把代码一复制,就提交,你不觉得是在敷衍自己吗? 这次先过, 下次注意

发布手记

热门词条