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

使用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. 【Linux】Debian 8 设置命令行界面的文本颜色

    平时我们操作的系统命令行界面文本默认黑底白字,有时候会看不惯这种全篇都是白色字符,这个时候可以通过改变PS1环境变量来改变文本颜色.我个人喜欢黑底绿字的搭配,以下是我个人的命令行界面样式: 注意:以下 ...

  2. Linux下jdk下载

    wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...

  3. ETL模型设计

    传统的关系数据库一般采用二维数表的形式来表示数据,一个维是行,另一个维是列,行和列的交叉处就是数据元素.关系数据的基础是关系数据库模型,通过标准的SQL语言来加以实现. 数据仓库是多维数据库,它扩展了 ...

  4. MVC 模型过滤

    通用返回模型 /// <summary> /// WebApi返回数据的泛型类 /// </summary> /// <typeparam name="T&qu ...

  5. switch 和 if...else if 的区别

     为什么很多人用  if...else..if   而不使用   switch 1,if...else...if 只是单纯地一个接一个比较:if...else可能每个条件都计算一遍: 2,switch ...

  6. spring-cloud构架微服务(2)-全局配置二

    接上篇,实际项目中,可能会遇到有些配置项,例如:邮件地址.手机号等在服务已经上线之后做了改动(就当会出现这种情况好了).然后你修改了配置信息,就得一个一个去重启对应的服务.spring-全局配置提供了 ...

  7. 修改Android系统关机动画

    文件路径:frameworks\base\services\core\java\com\android\server\power\ShutdownThread.java 在beginShutdownS ...

  8. python socket练习

    服务器端 #服务器端 import socket server = socket.socket() server.bind(('localhost',6969))#绑定要监听的端口 server.li ...

  9. python列表生成式、列表推导式

    运用列表生成式,可以快速生成list,可以通过一个list推导出另一个list,而代码却十分简洁. 格式 [x for x in 内容] [x for x in 内容 if 条件] 1:要把生成的元素 ...

  10. HUE安装与使用

    HUE安装与使用 1.介绍 HUE是一个开源的Apache Hadoop UI系统,早期由Cloudera开发,后来贡献给开源社区.它是基于Python Web框架Django实现的.通过使用Hue我 ...