5.17 form
2017-05-17 本文已影响33人
Marks
Q1: #userName, #passward {width: 160px; padding: 3px;}与.m-form .u-txt {width: 160px; padding: 3px;}样式为何有区别？什么原因导致？
用id和class来设置样式有区别么？？
#userName, #passward {width: 160px; padding: 3px;}
.m-form .u-txt {width: 160px; padding: 3px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<style type="text/css">
body,button,input,legend {margin: 0;padding: 0;font: 16px "微软雅黑" ；}
.m-form {margin: 150px auto ; width: 325px;border:1px solid #ddd;}
.m-form legend {width: 100%; line-height: 30px; text-indent: 1em;color: #fff;background-color: #2d2d2d;}
.m-form fieldset {border:none;padding: 20px;}
.m-form div {margin: 20px;}
#userName, #passward {width: 160px; padding: 3px;}
button {width: 100%; height: 30px; color: #fff;border:1px solid #ddd; cursor: pointer;background-color: #2d7dca;}
.disabled{background-color: #ddd;}
</style>
</head>
<body>
<form action="" class="m-form">
<legend>登录</legend>
<fieldset>
<div>
<label for="userName">用户名：</label>
<input id="uesrName" type="text" class="u-txt">
</div>
<div>
<label for="passward">密码：</label>
<input id="passward" type="passward" class="u-txt">
</div>
<div><button id="login">登录</button></div>
</fieldset>
</form>
<script type="text/javascript">
var button = document.getElementById('login');
button.onclick = function() {
button.disabled = true;
button.setAttribute('class','disabled');
};
</script>
</body>
</html>```
