第三章表格布局与表单交互章节练习

Q狄龙

于 2024-09-25 17:49:03 发布

阅读量185

点赞数 2

文章标签：交互 html css 笔记学习方法

本文链接：https://blog.csdn.net/2301_78694366/article/details/142529508

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casio Calculator Design</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>

 <div class="calculator">
        <h1>CASIO</h1>
        <input type="text" class="display" disabled>
		<table class="calculator">
			<tr>
				<td class="button">1</td>
				<td class="button">2</td>
				<td class="button">3</td>
				<td class="button">+</td>
			</tr>
			<tr>
				<td class="button">4</td>
				<td class="button">5</td>
				<td class="button">6</td>
				<td class="button">-</td>
			</tr>
			<tr>
				<td class="button">7</td>
				<td class="button">8</td>
				<td class="button">9</td>
				<td class="button">*</td>
			</tr>
			<tr>
				<td class="button">0</td> 
				<td class="button">=</td>
				<td class="button">CE</td> 
				<td class="button">/</td>

			</tr>
		</table>
	</table>
</div>
</body>
</html>

.calculator {
            border: 2px solid #000000;
            padding: 20px;
            background-color: #f0f0f0;
            width: 220px;
			}

.display {
            width: calc(100%);
            height: 40px;
            margin-bottom: 10px;
            text-align: right;
            padding: 5px;
            font-size: 18px;
}


.calculator td {
    border:5px solid #000000;
    padding: 10px;
    text-align: center;
    width:220px;
	}

.button:hover {
    background-color: #f0f0f0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>

    <style>

        form {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        form label {
            display: block;
            margin-bottom: 5px;
        }
        form input[type="text"],
        form input[type="password"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        form select {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        form input[type="checkbox"] {
            margin-right: 5px;
        }
        form input[type="submit"],
        form input[type="reset"] {
            width: 100px;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        form input[type="submit"] {
            background-color: #4CAF50;
            color: white;
        }
        form input[type="reset"] {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <form action="/submit-login" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>

        <label for="userType">类型：</label>
        <select id="userType" name="userType">
            <option value="admin">管理员</option>
            <option value="user">普通用户</option>
        </select>

        <label>
            <input type="checkbox" id="rememberMe" name="rememberMe">
            记住密码
        </label>

        <label>
            <input type="checkbox" id="autoLogin" name="autoLogin">
            自动登录
        </label>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>