表单样式
- 表單元素的樣式
表單元素中除了可以設置簡單的尺寸大小的樣式 文本框類的元素可以設置邊框等簡單的樣式修飾外 是做不了更復雜的，所以單復選框 單選框 需要復雜樣式修飾的時候 需要借助其他標簽來實現(xiàn).
實現(xiàn)的辦法可以是在元素外層加上一個標簽然后調(diào)整父元素的樣式 將單元框或者復選框的透明度設置成0
select只能設置寬高 邊框等樣式 所以想做復雜樣式 可借助框架中提供的組件的樣式
行內(nèi)元素 內(nèi)聯(lián)元素 占的位置 是根據(jù)里面的內(nèi)容決定的 樣式表設置寬高是無效的
塊元素 會獨自占掉一橫行的空間
內(nèi)聯(lián)塊 可以用樣式表修飾 寬高 占掉的空間 就是樣式表寫的大小
display: inline-block:設置內(nèi)聯(lián)塊,可以給元素寫高度 ,在對外邊距沒那么嚴格的時候, 多數(shù)左右布局都可選擇;
標簽:只有兩種標簽;
第一種是塊元素
第二種是 內(nèi)聯(lián)元素(行內(nèi))寬高修飾全無效
代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css"> .label{width: 65px;display: inline-block;/*設置內(nèi)聯(lián)塊*/}.form-group .use,.xin ,.sheng, .yang{margin-bottom: 10px; }.xin{}.yang .ma{width: 50px;height: 16px;text-align: center;}.bei .label{vertical-align:top ; /* 頂上對齊 即讓備注放在上面*/margin-bottom: 10px;}</style></head><body><div class="form-group"><div ><label class="label" for="useid">用戶名:</label><input class="use" name="" id="useid" value="" /></div><div ><label class="label" for="pass">密 碼:</label><input class="use" type="text" id="pass" value="" /></div><div class="xin"><label class="label">性 別:</label><input type="radio" name="sex" id="" value="" />男<input type="radio" name="sex" id="" value="" />女 </div><div class="sheng"><label class="label">生 日:</label><select name=""><option value=""></option><option value=""></option><option value=""></option></select><select name=""><option value=""></option><option value=""></option><option value=""></option></select><select name=""><option value=""></option><option value=""></option><option value=""></option></select></div><div class="yang"><label class="label">驗證碼:</label><input type="text" name="" id="" value="" /><input class="ma" type="text" name="" id="" value="568" /> </div><div class="bei"><label class="label">備 注：</label><textarea></textarea> </div></div></body> </html>運行截圖
總結(jié)
- 上一篇： STC89C52RC单片机程序烧录方法
- 下一篇： 迭代阈值分割