简单总结CSS中元素形状的平滑变化 目录： 前言 一、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中的表单验证 目录： 一、校验规则 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框架实现简易的模态框 目录： 一、模态框的简单介绍 二、代码实现 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"> <!-- &times 转义成“x”关闭符号 --> &times; </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实现元素被点击选中的效果 目录： 一、说明 二、代码实现 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>

IDEA添加并配置Tomcat服务器 目录： 一、提前准备 二、创建Java web项目 三、添加Tomcat服务器 四、启动Tomcat服务器 五、其他操作 更改Tomcat默认端口 环境说明： 系统：Win10专业版 JDK版本：1.8 Tomcat版本：8.5.57 开发环境：IDEA 2020.03 Ultimate 一、提前准备 首先，访问Tomcat官网，选择一个版本的Tomcat进行下载，下载完之后解压。本篇博客以Tomcat8.5为例，下载的是windows 64位。下载完之后解压，记住解压完的文件位置，后面导入服务器时要用到。 其次，要保证当前的计算机正确配置了Java环境，win10系统下Java环境的配置请参考：Win10系统配置Java开发环境 二、创建Java web项目 注意：IDEA的Community版本是无法进行Web开发的，Web开发需要Ultimate版本 打开IDEA，先创建一个Java项目。然后在项目名上依次点击右键->”Add Framework Support“，弹出的窗口中勾选“Web Application”选项，点击右下角“OK”即可。 这样创建出来的就是Java web项目了，原来的项目目录会多出来一个“web”文件夹： 三、添加Tomcat服务器 依次点击“File”->“setting”（或者快捷键Ctrl+Alt+s）打开设置界面，然后选择“Build，Execution，Deployment”->“Application Servers”，点击“+”新添加一个应用服务器： 选择的服务器类型为“Tomcat Server”，注意不要选成“TomEE Server”： 在弹出的窗口中选择本地Tomcat的所在目录，IDEA会自动识别出Tomcat的版本，两连“OK”退出 回到主界面，找到菜单栏右边的“Add Configuration”： 点击左上角“+”，在展开的列表中依次选择“Tomcat Server”->“Local”，新建一个本地服务配置。因为前面添加了Tomcat服务器，所以右侧窗口中出现的配置项已自动填好，有需要的可以根据下图说明来改变部分选项： 然后我们需要把之前新建的这个项目放到Tomcat服务器上运行。切换到选项卡“Deployment”，点击左下角“+”，选择“Artifact”，当前项目就被添加上去了，添加完点击“OK”退出。 四、启动Tomcat服务器 如果前面配置没问题的话，现在左下角会出现“Services”窗口选项，在服务器名称上右键->“Run”，Tomcat服务器就启动了。 等待几秒钟服务器完全启动之后，会自动在浏览器中打开项目，如果没有自动打开那就用“localhost:8080”在浏览器中访问项目。 当前由于我们运行的只是空项目，没有对项目做任何更改，所以项目的运行结果会是下面这样： 到这里就配置成功了。 五、其他操作 更改Tomcat默认端口 在主界面找到菜单栏右边的“Tomcat ”，选择“Edit Configurations”： “HTTP port”是默认端口，更改完之后要重启Tomcat服务器才能生效 暂时这些，其他的碰到再添加。