2023 年 11月 9 日随笔档案 - 种太阳

2023年11月9日

摘要：正则表达式收集，供自己查阅之用一、校验数字的表达式 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 种太阳阅读(8) 评论(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 种太阳阅读(22) 评论(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 种太阳阅读(16) 评论(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 种太阳阅读(6) 评论(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 种太阳阅读(125) 评论(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 种太阳阅读(42) 评论(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 种太阳阅读(180) 评论(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 种太阳阅读(23) 评论(0) 推荐(0) 编辑

种太阳

公告