使用CSS样式对表格进行美化并对伪类的使用进行解析
生活随笔
收集整理的這篇文章主要介紹了
使用CSS样式对表格进行美化并对伪类的使用进行解析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html>
? <head>
??? <title>新用戶注冊</title>
<!-- 使用CSS樣式來設置邊框的顏色 -->
<style type="text/css">
?table {
??? ?border-style:solid;?? /*設置邊框的線是實線*/
??? ?border-color:#0000ff; ??/*設置邊框顏色*/
??? ?}
???
??? fieldset {
??? ?width:500px;
??? ?text-align: center;
??? ?bgcolor:cyan;
??? }?
???
??? /*偽類的使用：link是定義初始時的顏色，visited是定義點擊后的顏色，
??? hover是定義選中時的狀態并出現下劃線，text-decoration：定義下劃線是否存在*/
??? a:link {
??? ?color:#ff0000;
??? ?text-decoration:none
??? }
??? a:visited {
??? ?color:#0000ffj;
??? ?text-decoration:none
??? }
??? a:hover {
??? ?text-decoration:underline;
??? }
?
</style>
??? ?
? </head>
?
? <body >
?
? <a href="www.baidu.com" align="center">百度一下，你就知道</a>
?
? <fieldset >??
? <legend>新用戶注冊:</legend>
? <table border="1"? bgcolor=cyan? align="center"? >
? ??<caption>填寫個人信息</caption>
? ??<tbody align="center">?<!-- 設置表格中的字體居中 -->
? ??<tr>
? ???<td>姓名</td>
? ???<td><input type="text" name="userName"></td>
? ??</tr>
? ??<tr>
? ???<td>密碼</td>
? ???<td><input type="password" name="userPwd"></td>
? ??</tr>
? ??<tr>
? ???<td>性別</td>
? ???<td><input type="radio" name="sex" value="男" checked="checked">男???<!-- checked：默認值為男 -->
? ?????????<input type="radio" name="sex" value="女">女</td>
? ??</tr>
? ??<tr>
? ???<td>愛好</td>
? ???<td>
? ????<input type="checkbox" name="hobby" value="籃球">籃球
?????????<input type="checkbox" name="hobby" value="跑步">跑步
?????????<input type="checkbox" name="hobby" value="游泳">游泳
?????????<input type="checkbox" name="hobby" value="煲劇">煲劇
?????????<input type="checkbox" name="hobby" value="其他" checked="checked">其他
? ???</td>
? ??</tr>
? ??<tr>
? ???<td>城市</td>
? ???<td>
? ????<select name="location">
? ?????<option value="choose">請選擇城市??????????????????
? ?????<option value="廣州">廣州?
? ?????<option value="肇慶?">肇慶?
? ?????<option value="深圳">深圳?
? ?????<option value="珠海">珠海?
? ????</select>
? ???</td>
? ??</tr>
? ??<tr>
? ???<td>自我介紹</td>
? ???<td>
? ????<textarea rows=3 cols=35 name="content" >請填寫自我介紹內容，不超過120字</textarea>?<!-- rows：3行，cols:35列 -->
? ???</td>
? ??</tr>
? ??<tr>
? ???<td colspan=2><input type="submit" value="提交"><!-- 使該單元格跨兩列 -->
? ???<input type="reset" value="重置"><!-- 重置即把表格的內容恢復到默認值 --></td>
? ??</tr>
? ??</tbody>
? ?
? </table>
? </fieldset>
?
? </body>
?
</html>
總結
以上是生活随笔為你收集整理的使用CSS样式对表格进行美化并对伪类的使用进行解析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html的选择器使用
- 下一篇： 利用JavaScript写猜数字小游戏