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

使用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. MOS管

    mos工作原理:http://www.360doc.com/content/15/0930/11/28009762_502419576.shtml, 开关特性好,长用于开关电源马达驱动,CMOS相机场 ...

  2. std::map Intro

    #include <queue>#include <map>#include <iostream>#include <string.h> class T ...

  3. tinkphp3.2.3 关于事务处理。

    自己做一个测试,关于事务处理的. 在对多表进行操作的时候 基本上都离不开事务. 有的操作,是要由上一操作后,产的值(如主表里插入后,要获取插入的主键ID值,返回给下面处理表用.)带到后面的表处理当中去 ...

  4. CBoard数据分析实战

    介绍 CBoard由上海楚果信息技术有限公司主导开源, 它不仅仅是一款自助BI数据分析产品, 还是开放的BI产品开发平台: 用户只需简单妥妥拽拽就能自助完成数据多维分析与报表设计 开发者能够简单扩展连 ...

  5. 在cms以及kindeditor中插入百度动态地图的方法

    想在网页中插入动态地图不难,直接打开网址http://api.map.baidu.com/lbsapi/creatmap/,然后按照提示操作,最终生成脚本,放到html文件中即可.而在kindedit ...

  6. POJ 3660—— Cow Contest——————【Floyd传递闭包】

    Cow Contest Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  7. 【踩坑】报错 non-static method xxx() cannot be referenced from a static context

    今天测试代码时遇到 Error:(6, 55) java: non-static method sayGoodbye() cannot be referenced from a static cont ...

  8. Spring Data JPA 事务

    Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套 JPA 应用框架,可使开发者用极简的代码即可实现对数据的访问和操作.它提供了包括增删改查等在内的常 ...

  9. Python常用模块(一)

    一.time模块 time模块提供各种操作时间的函数 时间三种格式 1.时间戳 以1970年1月1日 00:00:00开始的秒数 2.本地时间 localtime,表示计算机当前的时间 3.UTC世界 ...

  10. Mac Postman app使用方法

    Postman是一种网页调试与发送网页http请求的chrome插件.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口.本文是使用的Mac端的app.利用第三方平台LeanClo ...