搜索到
6
篇与
Web前端
的结果
-
【代码摘录】HTML+CSS实现下拉菜单 [Meting] [Music server="netease" id="118644" type="song"/] [/Meting] 目录： 一、演示效果 二、源代码 1.HTML代码 2.CSS 在B站上看到一个up主写的一段下拉菜单代码，实现效果还挺好看的，遂进行小改之后拿来收藏，以供日后使用。 源代码出自：B站up主 山羊の前端小窝 视频链接：https://www.bilibili.com/video/BV1S44y147oV 一、演示效果 演示如下，鼠标悬浮即可查看效果： 二、源代码 1.HTML代码 <body> <ul class="shell"> <li class="button"> <span>消息</span> <ul> <li><a href="" target="_blank">回复我的</a></li> <li><a href="" target="_blank">收到的赞</a></li> <li><a href="" target="_blank">我的消息</a></li> </ul> </li> <li class="button"> <span><a href="" target="_blank">动态</a></span> </li> <li class="portrait"> <ul class="information"> <li>知识分子没文化</li> <li><a href="https://www.wlplove.com" target="_blank">博客</a></li> </ul> </li> <li class="button"> <span>收藏夹</span> <ul> <li><a href="" target="_blank">默认收藏夹</a></li> <li><a href="" target="_blank">计算机编程</a></li> <li><a href="" target="_blank">有点意思</a></li> <li><a href="" target="_blank">说的不错</a></li> </ul> </li> <li class="button"> <span>投稿</span> <ul> <li><a href="" target="_blank">专栏投稿</a></li> <li><a href="" target="_blank">音频投稿</a></li> <li><a href="" target="_blank">贴纸投稿</a></li> <li><a href="" target="_blank">视频投稿</a></li> <li><a href="" target="_blank">投稿管理</a></li> </ul> </li> </ul> </body> 2.CSS * { margin: 0; padding: 0; list-style: none; font-size: 20px; color: #f4f1de; } .shell { display: flex; justify-content: center; margin-top:50px; } .button, .portrait { background-color: #50536e; width: 170px; height: 65px; text-align: center; line-height: 65px; transition: 0.3s; /* 指定浏览网页时鼠标指针的形状 */ cursor: pointer; } .portrait::before { content: ''; display: block; width: 100px; height: 100px; border-radius: 50%; transform: translate(30px, -30px); background-image: url("https://image.wlplove.com/static/img/icon/headpic.png"); background-size: cover; border: 10px solid #fff; } .information { width: 220px; background-color: #e07a5f; transform: translate(-20px, -200px); border-radius: 10px; padding: 20px 0; line-height: 0; height: 0; transition: 0.3s; /* opacity属性指定了一个元素的不透明度，其取值从0-1。*/ /* 在0时会完全看不见，1表示完全可见 */ opacity: 0; } .button:hover { background-color: #d15a39; } .button li:hover { background-color: #ffb29d; } .button ul li { height: 0; transition: 0.2s; opacity: 0; transform: translateY(-65px); background-color: #e07a5f; } .button:hover li { height: 65px; opacity: 1; transform: translateY(0); } .portrait:hover .information { opacity: 1; line-height: 65px; transform: translate(-20px, -10px); height: auto; } a{ text-decoration: none; } -
总结一下CSS3中的Flex布局语法 [Meting] [Music server="netease" id="85255" type="song"/] [/Meting] 前排提示： 本篇博客篇幅较长，建议结合目录查看！ 目录： 0x01. Flex 布局简介 如何应用 Flex 布局 0x02. 基本概念 0x03. 用于父元素的属性 3.1、flex-direction 属性取值 图示说明 CSS代码 3.2、flex-wrap 属性取值 图示说明 CSS代码 3.3、flex-flow 3.4、justify-content 属性取值 图示说明 CSS代码 3.5、align-items 属性取值 图示说明 CSS代码 3.6、align-content 属性取值 图示说明 CSS代码 0x04. 用于子元素的属性 4.1、flex-grow 属性取值 图示说明 CSS代码 4.2、flex-shrink 属性取值 图示说明 CSS代码 4.3、flex-basis 属性取值 CSS代码 4.4、flex 4.5、align-self 属性取值 图示说明 CSS代码 4.6、order 属性取值 0x05. 简单应用 Flex 布局有时候会用到，但是始终分不清楚其中的部分属性及其含义，所以用这篇博客专门总结一下 Flex 布局。 特别说明：博主初入门 Flex 布局看的是Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)这篇教程，教程整体上条理清晰，讲得通俗易懂，但是不太方便快速查阅相关属性。因此本篇博客将以这篇教程为基础（所以不可避免地在文章结构与部分内容上可能会与教程有很大部分相似），以我自己的理解重新总结一遍 Flex 布局，以方便我自己查阅。如果您认为本篇博客讲的不够清楚，建议您参考教程原文。 另外，关于 Flex 布局中的属性效果演示，推荐看这个视频： {bilibili bvid="BV1oK4y1j7pa" page=""/} 0x01. Flex 布局简介 网页布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直水平居中就不容易实现。 2009年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 简单来说，Flex 布局可以极大地改善对于父元素和多个子元素进行布局的难度。 如何应用 Flex 布局 刚开始接触到 Flex 布局的时候，那么多的属性及其含义倒不是首要问题，最大的问题是不知道如何去应用 Flex 布局。 其实给一个元素添加 Flex 布局很简单，只需要在 CSS 代码中设置其 display 属性为 flex 或者 inline-flex 即可。其中，对于Webkit 内核的浏览器，还必须加上-webkit前缀。 对于div、p、form、ul、ol等这些块状元素，使用 Flex 布局的方式为（以 div 为例）： div{ display:flex; display:-webkit-flex } 对于诸如 span 等行内元素来说需要将属性值更换为 inline-flex： span{ display:inline-flex; display:-webkit-inline-flex; } 注意：设置 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 0x02. 基本概念 将采用了 Flex 布局的元素称为 Flex 容器（flex container）。它的所有子元素将自动成为容器成员，成为 Flex 项目（flex item）。 在 Flex 容器中，默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）（不知道为什么会起这么奇怪的名字）。 其中，主轴的开始位置叫做 main start，结束位置叫做 main end；而交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。 子元素默认沿主轴排列，单个子元素所占的主轴空间叫做 main size，占据的交叉轴空间为 cross size。 以上就是在 Flex 布局中涉及到的一些基本概念。 除了基本概念之外，还有许多 Flex 布局会用到的属性，根据这些属性的使用位置可以简单将其分为两类，分别是应用在父元素（容器）上的属性和应用在子元素（项目）上的属性。下面分别对其进行简单的介绍与解释。 0x03. 用于父元素的属性 3.1、flex-direction flex-direction属性决定主轴的方向，表现就是 Flex 容器中子元素的排列方向（比如说横向或纵向）。 属性取值 默认值为 row。 属性名 含义 row（默认值） 主轴为水平方向，起点在左端 row-severse 主轴为水平方向，起点在右端 column 主轴为垂直方向，起点在上边 column-reverse 主轴为垂直方向，起点在下边 图示说明 CSS代码 .box { flex-direction: row | row-reverse | column | column-reverse; } 3.2、flex-wrap 默认情况下，子元素都排在一条轴线上。 当子元素多到一条轴线排列不下的时候，用 flex-wrap 就可以定义这些子元素换行的形式，比如顺序、倒序之类的。 属性取值 默认取值为 nowrap，即不换行。 属性名 作用 nowrap（默认） 不换行 wrap 换行，第一行在上方 wrap-reverse 换行，第一行在下方 图示说明 CSS代码 .box { flex-wrap: nowrap | wrap | wrap-reverse; } 3.3、flex-flow flex-flow 属性是 flex-direction 和 flex-wrap 的缩写形式。 默认值为 row nowrap。 3.4、justify-content justify-content 属性定义了子元素在主轴上的对齐方式（比如靠左/右/上/下、居中等等）。 注意：这个属性与 flex-direction 有区别，不能混淆。 属性取值 默认值为 flex-start。 属性名 作用 flex-start（默认） 左对齐 flex-end 右对齐 center 居中 space-between 两端对齐，子元素之间的间隔相等 space-around 每个子元素两侧的间距相等 space-evenly 子元素之间的间隔和子元素与边框的间隔相等（兼容性较差） 图示说明 CSS代码 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 3.5、align-items align-items 属性定义子元素在交叉轴上的对齐方式（与 justify-content 属性类似）。 属性取值 默认值为 stretch。 属性名 作用 stretch（默认） 表示如果子元素未设置高度或设为auto，将占满整个容器的高度 flex-start 从交叉轴的起点对齐 flex-end 从交叉轴的终点对齐 center 从交叉轴的中点对齐 baseline 按照子元素的第一行文字的基线对齐 图示说明 CSS代码 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 3.6、align-content align-content 属性定义了多根轴线的对齐方式。如果子元素只有一根轴线，则属性不起作用。 属性取值 默认值为 stretch。 属性名 作用 flex-start 沿交叉轴的起点对齐 flex-end 沿交叉轴的终点对齐 center 沿交叉轴的中点对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值） 轴线占满整个交叉轴 图示说明 CSS代码 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 0x04. 用于子元素的属性 4.1、flex-grow 元素布局时经常会出现这样的情况，当所有子元素水平排列时的宽度之和（或者纵向排列时的高度之和）小于父元素的宽度（高度）时，则当前父元素在这个方向上就会出现剩余空间。那么此时就可以用 flex-grow 属性来分配这些剩余空间，以使子元素完全填充父元素。 属性取值 flex-grow 属性的值是一个数字，没有单位。 默认值为0，表示如果存在剩余空间，也不会放大子元素的宽度（或高度）。 当给子元素的 flex-grow 属性值设置为一样时，表示平均分配这个方向上的宽度（高度），可以利用这点来给元素做等宽布局。 如果一个子元素的 flex-grow 属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。 注意：当子元素的宽度/高度（width/height）属性与 flex-grow 同时存在时，元素最终的宽度/高度将由 flex-grow 属性来决定。 图示说明 CSS代码 .item { flex-grow: <number>; /* default 0 */ } 4.2、flex-shrink 这个属性的含义与 flex-grow 相反，当剩余空间较小不足以容纳所有子元素时，就可用这个属性指定某个子元素的缩小比例。 属性取值 类似 flex-grow，flex-shrink 属性的值也是一个数字。该属性默认值为1，即如果空间不足，该子元素将缩小。 如果所有子元素的 flex-shrink 属性都为1，当空间不足时，这些子元素都将等比例缩小。 如果一个子元素的 flex-shrink 属性为0，其他子元素属性为1，则空间不足时，前者不缩小。 负值对该属性无效。 图示说明 CSS代码 .item { flex-shrink: <number>; /* default 1 */ } 4.3、flex-basis flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。 属性取值 默认值为 auto，即子元素本来的大小。 flex-basis 属性值可以设置成与 width 或者 height 属性一样的值，则子元素将占据固定空间。 CSS代码 .item { flex-basis: <length> | auto; /* default auto */ } 4.4、flex 类似于前面的 flex-flow 属性，flex 属性是 flex-grow、flex-shrink 和 flex-basis 这几个属性的缩写形式。后两个属性（flex-shrink 和 flex-basis）可选。 默认值为“0 1 auto”。 4.5、align-self align-self 属性允许某个子元素有与其他子元素有不一样的对齐方式，设置了这个属性之后，将会覆盖父元素的 align-items 属性。 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 strech。 属性取值 该属性的取值除了 auto ，其余的与 align-self 属性的取值相同。 属性名 作用 auto（默认） 继承父元素的 align-items 属性 flex-start 沿交叉轴的起点对齐 flex-end 沿交叉轴的终点对齐 center 沿交叉轴的中点对齐 baseline 按照子元素的第一行文字的基线对齐 stretch 如果子元素未设置高度或设为auto，将占满整个容器的高度 图示说明 CSS代码 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 4.6、order order 属性可以很方便地定义子元素的排列顺序，而不用去调整 HTML 代码中元素的代码顺序。 属性取值 默认值为0。 属性取值为数字，数字数值越小，则子元素排列越靠前。 0x05. 简单应用 其中最直观的应用就是将一个元素进行垂直水平方向的居中，且不管页面变化，依然能够生效。以 div 为例进行说明： <html> <head> <style> body{ background-color:#ccc; display:flex; justify-content:center; align-items:center; } div{ border:3px solid #000; background-image: linear-gradient(to right, #a18cd1, #fbc2eb); border-radius: 10px; width: 20%; height: 40%; } </style> </head> <body> <div></div> </body> </html> 预览效果： 在使用 Flex 布局方式进行垂直水平方向的居中布局时，只需要给父元素添加 Flex 布局方式，然后将 justifu-content 与 align-items属性值都设为 center 即可，不仅设置起来简单，还能保持良好的兼容性。 参考资料： Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com) Flex 布局教程：实例篇 - 阮一峰的网络日志 (ruanyifeng.com) Bilibili视频链接：20分钟掌握CSS Flex布局 - bilibili 文中图片出自：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
-
简单总结CSS中元素形状的平滑变化 [Meting] [Music server="netease" id="387603" type="song"/] [/Meting] 目录： 前言 一、transition属性 ——设置过渡效果 1.作用： 2.属性： 3. 默认值： 4.JavaScript语法： 5.使用及说明： 二、transform属性 ——变化效果 1.作用： 2语法： 3.属性值： 三、效果演示代码 1.html代码 2.CSS代码 前言 将鼠标放到图片上面以查看实现效果： 例子涉及到的相关知识点如下： 一、transition属性 ——设置过渡效果 1.作用： 设置元素变化时的过渡效果 2.属性： transition属性包括四个子属性，即transition-property、transition-duration、ransition-timing-function、transition-delay，各个属性的含义见下方表格： 值 描述 transition-property 指定哪个元素属性会发生变化 transition-duration 指定过渡效果需要多少秒或毫秒才能完成 ransition-timing-function 指定过渡效果的变化速度曲线 transition-delay 定义过渡效果延迟多长时间开始 注：使用时应该必须指定 transition-duration 属性，否则效果持续时间为0，不会有任何效果 3. 默认值： all 0 ease 0 4.JavaScript语法： object.style.transition="width 2s"; 5.使用及说明： 举个例子： 存在一个矩形，设置过渡效果为：延迟1s，矩形的宽度变化，过渡时间为0.5s，过渡效果的变化曲线为linear ，代码如下： .div { transition-property: width; transition-duration: 0.5s; transition-timing-function: linear; transition-delay: 1s; } 上面写法看起来就很繁琐，更别说写起来了。所以为了方便，可以将这几个属性合并成transition 属性，上面的就可以这么写： .div { transition: width 0.5s linear 1s; // 部分用不到的属性可以省略，一般都得设置产生过渡变化的属性和过渡时间 } 除了设置单个属性的变化效果，也可以设置多个属性的变化效果，中间用逗号隔开： transition: width 2s, height 1s, transform 2s; 二、transform属性 ——变化效果 1.作用： 设置元素的变化效果，与transition属性一起使用可实现元素的平滑变化 2语法： transform: none|transform-functions; 3.属性值： 值 描述 none 不进行转换。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 scale(x[,y]?) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。 更多transform变化属性参考： CSS3 transform 属性 | 菜鸟教程 (runoob.com) 三、效果演示代码 1.html代码 <div class="box"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/agree.png" alt="网络未连接或图片链接已失效" class="agree"> <img src="https://gitee.com/wang-langping/langp/raw/master/%E5%AD%A6%E4%B9%A0%E7%82%B9%E6%BB%B4/web%E5%89%8D%E7%AB%AF/%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93CSS%E4%B8%AD%E5%85%83%E7%B4%A0%E5%BD%A2%E7%8A%B6%E7%9A%84%E5%B9%B3%E6%BB%91%E5%8F%98%E5%8C%96/windmill.png" alt="网络未连接或图片链接已失效" class="windmill"> </div> 2.CSS代码 <style> .box { display: inline-flex; border:1px solid #aaabad; margin:10px; } .agree { width: 60px; height: 60px; margin: 45px; transition: all 0.5s; } /* 设置鼠标悬浮到图片上时图片的变化效果 */ .agree:hover { transform: scale(1.5); } .windmill { margin: 30px; width: 100px; height: 100px; transition: all 3s; } .windmill:hover { transform: rotate(720deg); } </style>
-
简单总结Layui中的表单验证 [Meting] [Music server="netease" id="865460480" type="song"/] [/Meting] 目录： 一、校验规则 1.使用内置校验规则 2.自定义校验规则 二、示例文件的实现代码 1.HTML代码 2.CSS代码 3.JS代码 简单来说，实现Layui框架中的表单验证很简单，只需要给表单元素添加上”lay-verify“属性 示例如下： 一、校验规则 1.使用内置校验规则 Layui对于常见的字符串（如手机号，邮箱，网址等）都设置了相应的校验规则，不用再自己写规则，使用时只需要将校验规则赋值给“lay-verify”属性即可。 Layui中内置的校验规则如下： 规则 说明 required 必填项 phone 手机号 email 邮箱 url 网址 number 数字 date 日期 identity 身份证 例如：设置一个输入框对手机号码进行校验： <!-- 也可以支持多条校验规则同时使用，用“|”隔开 --> 手机号：<input type="text" placeholder="请输入手机号" lay-verify="required|phone"> <button lay-submit>提交</button> 2.自定义校验规则 当然，在大部分时候，Layui中内置的校验规则还是有点不够用，所以我们还是需要来自定义规则来校验表单数据。 用一个实例来简单说明： <!-- username为自定义的规则 --> 用户名：<input type="text" placeholder="请输入用户名" lay-verify="username"> <script> // 用户名长度不能大于16位 layui.form.verify({ // value：表单的值、item：表单的DOM对象 username:function(value,item){ if (value.length > 16){ return "用户名大于16位"; } } }) </script> 这个例子较为简单，只涉及到表单数据的长度判断，若要设置更复杂的规则还需要用到正则表达式，鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考：JavaScript 正则表达式、JavaScript RegExp 对象 二、示例文件的实现代码 提前导入Layui和jQuery的CDN文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> 1.HTML代码 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend id="title">简单总结Layui中的表单验证</legend><br> </fieldset> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>内置的校验规则</legend> </fieldset> <div class=" layui-collapse" lay-accordion> <!-- 必填项 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">必填项校验</p> <!-- layui-show来决定是否默认展开 --> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">必填项：</label> <div class="layui-input-inline"> <!-- lay-verify 属性定义校验规则 --> <input type="text" class="layui-input" placeholder="请输入必填项" lay-verify="required"> </div> <div class="layui-form-mid layui-word-aux">此项为必填项</div> <button id="btn-required" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> <!-- 手机号校验 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">手机号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">手机号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的手机号码" lay-verify="phone"> </div> <div class="layui-form-mid layui-word-aux">1开头的11位数字</div> <button id="btn-phone" class="layui-btn layui-btn-sm" lay-submit>校验手机号</button> </div> </div> <!-- 邮箱 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">邮箱校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">邮箱：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入正确格式的邮箱" lay-verify="email"> </div> <div class="layui-form-mid layui-word-aux">正确的邮箱格式</div> <button id="btn-email" class="layui-btn layui-btn-sm" lay-submit>校验邮箱</button> </div> </div> <!-- 网址 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">网址校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">网址：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入网址" lay-verify="url"> </div> <div class="layui-form-mid layui-word-aux">http(s)://开头</div> <button id="btn-url" class="layui-btn layui-btn-sm" lay-submit>校验网址</button> </div> </div> <!-- 数字 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">数字校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">数字：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入数字" lay-verify="number"> </div> <div class="layui-form-mid layui-word-aux">数字</div> <button id="btn-number" class="layui-btn layui-btn-sm" lay-submit>校验数字</button> </div> </div> <!-- 日期 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">日期校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">日期：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入日期" lay-verify="date"> </div> <div class="layui-form-mid layui-word-aux">格式：年（YYYY）-月（MM）-日（DD）</div> <button id="btn-date" class="layui-btn layui-btn-sm" lay-submit>校验日期</button> </div> </div> <!-- 身份证 --> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">身份证号校验</p> <div class="layui-form-item layui-colla-content"> <label class="layui-form-label">身份证号：</label> <div class="layui-input-inline"> <input type="text" class="layui-input" placeholder="请输入身份证号" lay-verify="identity"> </div> <div class="layui-form-mid layui-word-aux">正确的身份证号码</div> <button id="btn-identity" class="layui-btn layui-btn-sm" lay-submit>校验身份证号</button> </div> </div> </div> </div> <br><br> <div class="container"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>自定义校验规则</legend> </fieldset> <!-- 自定义规则--> <div class="layui-form layui-collapse" lay-accordion> <div class="layui-form layui-colla-item"> <p class="layui-colla-title">自定义规则</p> <div class="layui-form-item layui-colla-content layui-show"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" class="layui-input" placeholder="请输入密码" lay-verify="password"> </div> <div class="layui-form-mid layui-word-aux">至少八位数字与字母的组合</div> <button id="btn-custom" class="layui-btn layui-btn-sm" lay-submit>校验</button> </div> </div> </div> </div> 2.CSS代码 <style> #title { text-align: center; margin: 20px; } .container { width: 800px; margin: 20px auto; } button { margin: 5px; float: right; } </style> 3.JS代码 <script> // 注意：自 layui 2.6.0 开始，无需再单独加载指定模块，因为 layui.js 已经包含了所有的内置模块，无需再指定模块 $("#btn-required").click(function () { layer.msg("必填项已填写", { icon: 6 , time: 1000 }) }); $("#btn-phone").click(function () { layer.msg("手机号码格式正确", { icon: 6 , time: 1000 }); }); $("#btn-email").click(function () { layer.msg("邮箱格式正确", { icon: 6 , time: 1000 }); }) $("#btn-url").click(function () { layer.msg("网址格式正确", { icon: 6 , time: 1000 }); }); $("#btn-number").click(function () { layer.msg("填写的值为数字", { icon: 6 , time: 1000 }); }); $("#btn-date").click(function () { layer.msg("日期格式正确", { icon: 6 , time: 1000 }); }); $("#btn-identity").click(function () { layer.msg("身份证格式正确", { icon: 6 , time: 1000 }); }); $("#btn-custom").click(function () { layer.msg("密码格式正确", { icon: 6 , time: 1000 }); }); // 引入layui的form模块，自定义校验规则 layui.form.verify({ //value：表单的值、item：表单的DOM对象 password: function (value,item) { if (/[\u4e00-\u9fa5]+$/.test(value)) { return "密码不能出现汉字噢"; } if (value.length < 8) { return "密码小于8位"; } } }) </script>
-
Bootstrap框架实现简易的模态框 [Meting] [Music server="netease" id="186272" type="song"/] [/Meting] 目录： 一、模态框的简单介绍 二、代码实现 1.HTML代码 2.CSS代码 一、模态框的简单介绍 点击按钮以查看实现效果： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。 简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。 简单结构大概是这样： 二、代码实现 导入jQuery和Bootstrap： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"> </script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 1.HTML代码 <h2>Bootstrap框架实现简易的模态框</h2> <!-- 触发模态框的按钮 data-target的值是要加载的模态框 --> <button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button> <!-- modal属性用于把div识别为模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见，直到触发器（比如按钮）被触发为止--> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true"> <!-- modal-dialog 设置弹出层 弹出效果--> <div class="modal-dialog"> <!-- 模态框的底层 --> <div class="modal-content"> <!-- 模态框头部--> <div class="modal-header"> <!-- 关闭按钮 data-dismiss="modal"用来关闭窗口 --> <button class="close" data-dismiss="modal" aria-hidden="true"> <!-- × 转义成“x”关闭符号 --> × </button> <!-- 模态框标题 --> <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4> </div> <!-- 模态框主体 --> <div class="modal-body"> <br><a href="https://www.langp.wang"> <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接"> </a> </div> <!-- 模态框底部 --> <div class="modal-footer"> <!-- 模态框底部的操作按钮 --> <button class="btn btn-info" data-dismiss="modal">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> 2.CSS代码 h2,h4,.modal-body{ text-align:center; } .click{ display:block; padding:10px; margin:30px auto; } 更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)
-
用jQuery实现元素被点击选中的效果 [Meting] [Music server="netease" id="254574" type="song"/] [/Meting] 目录： 一、说明 二、代码实现 1.HTML代码 2.CSS代码 3.JS代码 一、说明 页面中存在四个div元素，实现以下效果： 当鼠标放置在div元素上面的时候，元素呈现平滑放大效果； 鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果 演示效果如下，鼠标点击即可选中或者用按钮进行多选： 二、代码实现 提前导入jQuery文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 1.HTML代码 <h2>用jQuery实现元素被点击选中的效果</h2> <div class="box"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <button id="all-selected">全选/取消全选</button> </div> 2.CSS代码 <style> h2 { text-align: center; } .box{ display:flex; border:1px solid #aaabad; width:700px; margin:auto; } /*给盒子设置样式*/ .box>div { border: 3px solid dodgerblue; margin: 30px auto; padding: 15px; border-radius: 10px; /* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */ transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } /*为盒子添加伪类，实现鼠标放到元素上的效果*/ .box>div:hover { /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } /* 元素被选中时的效果 */ .selected { box-shadow: 0 0 15px deepskyblue; /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } #all-selected { width:100px; height:35px; border-radius:5px; display:inline-block; margin: 40px 25px 25px; transition:all 0.5s; } #all-selected:hover{ background-color:#c9c9c9; } </style> 3.JS代码 <script> // 设置一个变量symbol，来判断当前的状态是否为选中 let symbol = true; $(document).ready(function () { // 为box盒子添加点击事件 $(".box>div").click(function () { if (symbol === true) { // 当symbol的值为true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反 symbol = false; } else { // 当symbol的值为false时，移除"selected"属性 $(this).removeClass("selected"); // symbol的值取反 symbol = true; } }); // 为“全选”按钮添加全选事件 $("#all-selected").click(function () { if (symbol === true) { $(".box>div").addClass("selected"); symbol = false; } else { $(".box>div").removeClass("selected"); symbol = true; } }); }); </script>
