码迷,mamicode.com
首页 > Web开发 > 详细

CSS伪类

时间:2015-06-14 18:15:53      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

一、伪类focus的作用

1、用于给表单方框里添加点击特效 [IE不支持]

<html>
 <head>
  <title>表单</title>
  <style type="text/css">
  input:focus{ border:#0FF; solid:; background-color:#F00;}
  </style>
 </head>
 <body>
<form caption="注册.php" name="reg" method="post">
<table border="0" cellpadding="5" align="center" width="100">
<tr>
<td>用户名</td>
<td><input type="text" name="uername"</td>
</tr>
<tr>
<td>密   码</td>
<td><input type="password" name="mima"></td>
</tr> 
<tr>
<td align="center" colspan="1"><input type="submit" value="注册"></td>
<td align="center" colspan="50"><input type="submit" value="登录"></td>
</tr>
</form>
 </body>
</html>

 二、伪类的语法

  input:focus{background:blue;}

三、超链接伪类

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */
</style>

</head>

<body>
<p><a href="http://www.baodi.com">这是一个链接</a></p>
</body>
</html>

 

CSS伪类

标签:

原文地址:http://www.cnblogs.com/boyblog/p/4575366.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!