2023年11月9日
1.正则大全
摘要： 正则表达式收集，供自己查阅之用 一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9 阅读全文
posted @ 2023-11-09 15:08 种太阳 阅读(7) 评论(0) 推荐(0) 编辑
12.方形相框遮罩---动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo06</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo06.css" rel="s 阅读全文
posted @ 2023-11-09 14:40 种太阳 阅读(10) 评论(0) 推荐(0) 编辑
11.圆形相框打开闭合效果--动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo05</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo05.css" rel="s 阅读全文
posted @ 2023-11-09 14:34 种太阳 阅读(7) 评论(0) 推荐(0) 编辑
10.扇子打开闭合效果---动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo005</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo005.css" rel= 阅读全文
posted @ 2023-11-09 14:31 种太阳 阅读(14) 评论(0) 推荐(0) 编辑
9.旋转加载效果图--动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo04</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo04.css" rel="s 阅读全文
posted @ 2023-11-09 14:28 种太阳 阅读(8) 评论(0) 推荐(0) 编辑
8.立方体旋转图---动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo03</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo03.css" rel="s 阅读全文
posted @ 2023-11-09 14:25 种太阳 阅读(15) 评论(0) 推荐(0) 编辑
7.你心动了吗--动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo02-xin</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo02.css" re 阅读全文
posted @ 2023-11-09 14:22 种太阳 阅读(3) 评论(0) 推荐(0) 编辑
6.太极八卦图--动图
摘要： HTML: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>demo01-taiji</title> 5 <link type="text/css" href="E:\htmltest1\demo1\demo01.css" 阅读全文
posted @ 2023-11-09 14:20 种太阳 阅读(107) 评论(0) 推荐(0) 编辑
5.CSS3制作苹果风格键盘
摘要： CSS3制作苹果风格键盘 HTML代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS3 KeyBoard - Linux公社 - Linux系统门户网站</title> 6 <!-- <lin 阅读全文
posted @ 2023-11-09 14:01 种太阳 阅读(36) 评论(0) 推荐(0) 编辑
2.RGB颜色值与十六进制颜色码转换工具
摘要： RGB颜色值与十六进制颜色码转换工具 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,m 阅读全文
posted @ 2023-11-09 13:51 种太阳 阅读(88) 评论(0) 推荐(0) 编辑
4.抽奖
摘要： 抽奖 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 抽奖活动 </title> 阅读全文
posted @ 2023-11-09 13:46 种太阳 阅读(4) 评论(0) 推荐(0) 编辑
3.品牌浮动----图片格式
摘要： 品牌浮动--图片格式 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <style> 6 .flex-container { 阅读全文
posted @ 2023-11-09 10:25 种太阳 阅读(2) 评论(0) 推荐(0) 编辑
2.品牌浮动布局----纯文字
摘要： 品牌浮动布局，纯文字类型 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .flex-container { 6 display: flex; 7 flex-wrap: wrap; 8 background-color: DodgerBlue; 9 } 阅读全文
posted @ 2023-11-09 10:13 种太阳 阅读(3) 评论(0) 推荐(0) 编辑
1.商品左右布局
摘要： 实现商品左右布局，自动往下排列 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .center { 6 display:flex; 7 flex-wrap: wrap; 8 margin: auto; 9 width: 100vw; 10 border 阅读全文
posted @ 2023-11-09 09:59 种太阳 阅读(16) 评论(0) 推荐(0) 编辑