css form 表单组

浏览数：17 / 时间：2015年06月09日

2014年7月1日 15:31:17

第一次写css,见谅

css:

 1 /*form*/
 2 /*default*/
 3 .form-box .form-group .form-label {text-align: right; width: 200px; height: 33px; line-height: 33px;}
 4 .form-box .form-group .form-input {text-align: left; width: 200px; height: 33px; display: inline;}
 5 .form-box .form-group .form-tip {margin: 5px;padding: 0px;width: 200px;text-align: center; display: inline;}
 6 .form-box .form-submit {margin-left: 200px}
 7 
 8 /*small*/
 9 .form-box .form-group .form-label-small {text-align: right; width: 150px; height: 33px; line-height: 33px;}
10 .form-box .form-group .form-input-small {text-align: left; width: 150px; height: 33px;}
11 .form-box .form-group .form-tip-small {margin: 5px;padding: 0px;width: 150px;text-align: center;}
12 .form-box .form-submit-small {margin-left: 150px}
13 
14 /*large*/
15 .form-box .form-group .form-label-large {text-align: right; width: 250px; height: 33px; line-height: 33px;}
16 .form-box .form-group .form-input-large {text-align: left; width: 250px; height: 33px;}
17 .form-box .form-group .form-tip-large {margin: 5px;padding: 0px;width: 250px;text-align: center;}
18 .form-box .form-submit-large {margin-left: 250px}

html:

 1 <form class="form-box" >
 2     <div class="form-group">
 3         <label class="form-label">表单名: </label>
 4         <input type="text" class="form-input">
 5         <span class="form-tip"></span>
 6     </div>
 7     <div class="form-group">
 8         <label class="form-label">表单名: </label>
 9         <input type="text" class="form-input">
10         <span class="form-tip"></span>
11     </div>
12     <input type="submit" class="form-submit" value="go!" >
13 </form>