form表单样式
我們會經常遇到許多密碼的登錄和注冊， 這個時候我們就可以先寫好一個模塊進行參考
源代碼如下：
<!DOCTYPE html>
<html><head>
? ? <meta charset="UTF-8">
? ? <title>表單樣式</title>
? ? <style type="text/css">
? ? ? ? * {
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? input {
? ? ? ? ? ? width: 320px;
? ? ? ? ? ? height: 24px;
? ? ? ? ? ? border: 1px solid #999;
? ? ? ? ? ? border-radius: 4px;
? ? ? ? }
? ? ? ? .formErr {
? ? ? ? ? ? border: 1px solid red;
? ? ? ? }
? ? ? ? .form .label {
? ? ? ? ? ? display: block;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 128px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? text-align: end;
? ? ? ? }
? ? ? ? .form .txt {
? ? ? ? ? ? display: block;
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 340px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? line-height: 40px;
? ? ? ? ? ? padding-left: 16px;
? ? ? ? }
? ? ? ? .form button {
? ? ? ? ? ? width: 56px;
? ? ? ? ? ? height: 24px;
? ? ? ? ? ? background-color: green;
? ? ? ? ? ? border: 0;
? ? ? ? ? ? border-radius: 4px;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? .form .errTips {
? ? ? ? ? ? width: 226px;
? ? ? ? ? ? background-color: lightpink;
? ? ? ? ? ? color: darkred;
? ? ? ? ? ? border-radius: 4px;
? ? ? ? ? ? margin-left: 144px;
? ? ? ? ? ? margin-top: 6px;
? ? ? ? ? ? margin-bottom: 4px;
? ? ? ? ? ? padding: 16px 48px;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="form">
? ? <div>
? ? ? ? <span class="label">用戶名</span>
? ? ? ? <span class="txt"><input type="text" placeholder="6-20個字符"/></span>
? ? </div>
? ? <div style="clear: both"></div>
? ? <div>
? ? ? ? <span class="label">密碼</span>
? ? ? ? <span class="txt"><input type="password" placeholder="6-20個字符" class="formErr"/></span>
? ? </div>
? ? <div style="clear: both"></div>
? ? <div>
? ? ? ? <span class="label">重復密碼</span>
? ? ? ? <span class="txt"><input type="password" placeholder="再次輸入密碼"/></span>
? ? </div>
? ? <div style="clear: both"></div>
? ? <div class="errTips">
? ? ? ? <ul>
? ? ? ? ? ? <li>密碼長度不能小于6個字符！</li>
? ? ? ? ? ? <li>密碼不能為空！</li>
? ? ? ? ? ? <li>兩次密碼輸入不一致！</li>
? ? ? ? </ul>
? ? </div>
? ? <div style="clear: both"></div>
? ? <div>
? ? ? ? <span class="label"></span>
? ? ? ? <span class="txt"><button>提交</button></span>
? ? </div>
? ? <div style="clear: both"></div>
</div>
</body>
</html>
總結
- 上一篇： WebRTC之STUN、TURN和ICE
- 下一篇： 【项目】STC15W408AS--烧写、