使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色

使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--伪类选择器-->

        <style type="text/css">

            .up:hover{

                border: 1px orangered dashed;

            }

            .up:focus{

                background-color: lightyellow;

            }

        </style>

    </head>

    <body>

        <div style="width: 300px;height: 230px;margin: 0 auto;border: 1px solid black;border-radius: 5px; line-height: 40px;background-image: url(img/bg1.jpg);">

            <p><center><span style="font-size: 20px;font-family: '微软雅黑';">用户登录</span></center></p>

            <p><center><span><b>用户名:</b></span>&nbsp;<span><input class="up" type="text" style="border-radius: 5px;width: 160px;height: 32px;background-image: url(img/head.png);background-repeat: no-repeat;padding-left:32px;"></span></center></p>

            <p><center><span><b>密&nbsp;码:</b></span>&nbsp;<span><input class="up" type="text" style="border-radius: 5px;width: 160px;height: 32px;background-image: url(img/keyboard.png);background-repeat: no-repeat;padding-left:32px;"></span></center></p>

            <p><center><span><input type="image" src="img/regbtn.jpg"></span></center></p>

        </div>

    </body>

</html>

css 伪类选择器制作登录框表单的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  5. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  6. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  7. css伪类选择器详细解析及案例使用-----伪类选择器（1）

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  8. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  9. CSS伪类选择器实现三角形

    使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...

随机推荐

  1. Unity String 转换成 Vector3

  2. 安装mplayer2和smplayer2

    MPlayer2 PPA源安装,打开终端,输入命令: sudo add-apt-repository ppa:motumedia/mplayer-daily sudo apt-get update s ...

  3. pat04-树5. File Transfer (25)

    04-树5. File Transfer (25) 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue We have ...

  4. ssh设置别名

    通常我们在 Termianl 下用 ssh 链接远程主机的时候,每次都需要输入一长串的用户名加主机地址,是不是觉得很麻烦? 我们知道在 /etc/ssh/ 目录下通常都会有 ssh_config 和 ...

  5. Java 之 Serializable 序列化和反序列化的概念,作用的通俗易懂的解释

    遇到这个 Java Serializable 序列化这个接口,我们可能会有如下的问题a,什么叫序列化和反序列化b,作用.为啥要实现这个 Serializable 接口,也就是为啥要序列化c,seria ...

  6. fileupload NPOI导入EXECL数据

    fileupload JS @section scripts{ <script src="~/Content/js/fileupload/vendor/jquery.ui.widget ...

  7. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

  8. Akka探索第一个例子by fsharp 1

    如何构建一套分布式程序一直是我想知道的问题. Akka就是一套用来开发分布式系统的开发库.当然开发分布式系统只是它的能力之一.除此之外高度抽象的并行运算能力,轻量级的消息系统,容错能力都是该库的特点. ...

  9. 从今天开始学习Swift -- Swift 初见 (转)

    原文地址:http://www.cocoachina.com/newbie/basic/2014/0604/8675.html   Swift系列文章由CocoaChina翻译小组翻译自苹果的官方文档 ...

  10. laravel安装时openssl_encrypt() 的问题？Call to undefined function openssl_decrypt()

    解决方案: 如果通过上面的步骤还是不能解决参考如下: 1.从php安装根目录中拷贝 libeay32.dll 和 ssleay32.dll 然后 覆盖掉apache/bin 下的对应文件(注意需要将h ...