您的位置：首页 > Web前端 > CSS

使用CSS样式对表格进行美化并对伪类的使用进行解析

2016-07-09 00:25 671 查看


<!-- 本页面通过使用html的表格展示新用户注册的页面，并使用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航