当前位置: 首页 > news >正文

蓝桥杯Web应用开发-CSS3 新特性【练习一:属性有效性验证】

练习一:属性有效性验证
页面上有一个邮箱输入框,当你的输入满足邮箱格式时,输入框的背景颜色为绿色;当你的输入不满足要求,背景颜色为红色。
新建一个 index2.html 文件,在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/*格式错误*/input:invalid {background-color: red;}/*格式正确*/input:valid {background-color: green;}</style></head><body>电子邮箱:<input type="email" /></body>
</html>

在这里插入图片描述

相关文章:

  • 算法之美_2024
  • 【蓝桥杯冲冲冲】[NOIP2017 提高组] 宝藏
  • 《Docker极简教程》--Docker基础--基础知识(四)
  • 网络安全产品之认识准入控制系统
  • Java Map 集合的几种常用遍历方式
  • MySQL数据库常用语法回顾及知识点合集(持续更新中……)
  • Topaz Photo AI for Mac v2.3.1 补丁版人工智能降噪软件无损放大
  • 基于spring boot实现邮箱发送和邮箱验证
  • word调整论文格式的记录
  • 02-Java抽象工厂模式 ( Abstract Factory Pattern )
  • python实现k路归并排序
  • gitee_pingo集成图床
  • 【软件设计师笔记】深入探究操作系统
  • 1Panel面板如何安装并结合内网穿透实现远程访问本地管理界面
  • 【力扣】盛最多水的容器,双指针法
  • @angular/forms 源码解析之双向绑定
  • 2018天猫双11|这就是阿里云!不止有新技术,更有温暖的社会力量
  • CAP 一致性协议及应用解析
  • django开发-定时任务的使用
  • ES学习笔记(12)--Symbol
  • JavaScript中的对象个人分享
  • PaddlePaddle-GitHub的正确打开姿势
  • 高程读书笔记 第六章 面向对象程序设计
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 提醒我喝水chrome插件开发指南
  • 阿里云API、SDK和CLI应用实践方案
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • (20050108)又读《平凡的世界》
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (过滤器)Filter和(监听器)listener
  • (排序详解之 堆排序)
  • (转载)利用webkit抓取动态网页和链接
  • (轉貼) 2008 Altera 亞洲創新大賽 台灣學生成果傲視全球 [照片花絮] (SOC) (News)
  • .net 7 上传文件踩坑
  • .Net mvc总结
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • /proc/stat文件详解(翻译)
  • @ModelAttribute注解使用
  • @TableLogic注解说明,以及对增删改查的影响
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • @vue/cli脚手架
  • [2018][note]用于超快偏振开关和动态光束分裂的all-optical有源THz超表——
  • [ABP实战开源项目]---ABP实时服务-通知系统.发布模式
  • [C++随笔录] 红黑树
  • [FFmpeg学习]从视频中获取图片
  • [github配置] 远程访问仓库以及问题解决
  • [hdu2196]Computer树的直径
  • [HTML]Web前端开发技术30(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页
  • [LeetCode] 2.两数相加
  • [linux] shell中的()和{}