搜索到
16
篇与
的结果
-
HTML如何实现简单登录页面 这是一个简单的静态的html页面登录图片，之前写的，验证码方面没有搞懂，这里我重新参考了这里，但是部分功能还没有完善。仅供参考<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态页面登录测试</title> <script language="javascript"> window.onload = function() { createCode() } var code; //在全局定义验证码 function createCode() { code = ""; var codeLength = 4; //验证码的长度 var checkCode = document.getElementById("code"); var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 for(var i = 0; i < codeLength; i++) { //循环操作 var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35） code += random[index]; //根据索引取得随机数加到code上 } checkCode.value = code; //把code值赋给验证码 } //校验验证码 function validateLogin(){ var sUserName = document.frmLogin.username.value ; var sPassword = document.frmLogin.password.value ; var inputCode = document.frmLogin.text_code.value; /*var sinputCode =document.frmLogin.inputcode.value ; */ if ((sUserName.length <= 0) || (sUserName=="")){ alert("请输入用户名!"); return false ; } if ((sPassword.length <= 0) || (sPassword=="")){ alert("请输入密码!"); return false ; } if ((inputCode.length<= 0) || (inputCode==NULL)){ alert("请输入验证码!"); return false ; } } </script> </head> <body > <fieldset> <table background="images\e.jpg " width="933" height="412"> <tr height="170"> <td width="570px"> </td> <td> </td> </tr> <tr> <td> </td> <td><table> <form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin" > <tr> <td><label for="username">用户名：</label></td> <td><input type="text" name="username" id="username" placeholder="input your name" size="20" maxlength="20" /></td> <td > </td> <td> </td> </tr> <tr> <td><label for="password">密 码：</label></td> <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" ) this.value='';" /></td> <td> </td> <td> </td> </tr> <tr> <td><label for="text_code">验证码:</label></td> <td><input type="text" size="" name="text_code" id="text_code" /></td> <td><input type="button" id="code" onclick="createCode()" name=""></td> </tr> <tr> <td><input type="checkbox" name="zlogin" value="1">自动登录</td> </tr> </table> </td> <tr> <td> </td> <td><table> <tr> <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td> <td><input type="reset" name="rs" value="重置"></td> <td><input type="button" name="button" value="注册" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td> </tr> </tr> </table> </td> </table> </fieldset> </form> </body> </html>执行后如图 -
html如何禁止右键 oncontextmenu事件禁用右键菜单document.oncontextmenu = function(){ event.returnValue = false; }// 或者直接返回整个事件 document.oncontextmenu = function(){ return false; }onselectstart事件禁用网页上选取的内容document.onselectstart = function(){ event.returnValue = false; }// 或者直接返回整个事件 document.onselectstart = function(){ return false; }oncopy事件禁用复制document.oncopy = function(){ event.returnValue = false; }// 或者直接返回整个事件 document.oncopy = function(){ return false; }以上三种事件，如果只想单纯的禁用鼠标右键，和复制粘贴，还可以将它们直接写到HTML中的body上面；<body oncontextmenu = "return false" ></body> <body onselectstart = "return false" ></body> <body oncopy = "return false" ></body>
-
网站整体变成灰色CSS代码 为了纪念一些影响力很大的伟人逝世或者重要的纪念日的时候需要让网页全部变灰来表示我们对逝者的悼念。其实这个功能很简单，只需要在HTML 的head标签里加入如下代码即可<style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} </style>/*网站变灰*/ html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;}但愿用不上
-
创意CSS合辑一：轻松实现多种有趣效果 作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了列表文字图标实现思路：主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；设定 overflow: hidden，限制字符溢出；然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；然后设定 text-indent: 12px，来让第一个字符居中。HTML部分<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>04 第一个字符串生成文字图标</title> </head> <body> <div class="app"> <ul> <li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li> <li><span>用CSS可以做什么？</span>用CSS可以做什么？</li> <li><span>前端的致命诱惑</span>前端的致命诱惑</li> </ul> </div> </body> </html>css部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .app ul { max-width: 300px; } .app ul li{ width: 100%; color: #152239; font-size: 16px; line-height: 42px; margin: 15px 0; float: left; } .app ul li span{ width: 42px; height: 42px; line-height: 40px; color: #1E47ED; font-size: 18px; font-weight: 700; text-indent: 12px; border-radius: 50%; display: block; float: left; overflow: hidden; background-color: #eaeaea; letter-spacing: 20px; margin-right: 15px; }呼吸灯效果实现思路：写出三个圆，class 分别为 .red、.green、.bluecss 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！Html部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>好看的呼吸灯效果</title> </head> <body> <div class="app"> <span class="red"></span> <span class="green"></span> <span class="blue"></span> </div> </body> </html>css部分*{ margin:0; padding: 0; } body,html{ background-color: #000; } .app{ width:100%; height: 100vh; display: flex; justify-content: center; align-items: center; } span{ width: 60px; height: 60px; margin: 40px; border-radius: 50%; } .red{ animation: just1 2s ease-in-out infinite alternate; } .green{ animation: just2 3s ease-in-out infinite alternate; } .blue{ animation: just3 4s ease-in-out infinite alternate; } @keyframes just1{ 0%{ border: 5px solid rgba(255,0,0,0); box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset; } 100%{ border: 5px solid rgba(255,0,0,1); box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset; } } @keyframes just2{ 0%{ border: 5px solid rgba(0,255,0,0); box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset; } 100%{ border: 5px solid rgba(0,255,0,1); box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset; } } @keyframes just3{ 0%{ border: 5px solid rgba(0,0,255,0); box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset; } 100%{ border: 5px solid rgba(0,0,255,1); box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset; } }动态毛玻璃实现思路：两个圆形 div（.circle），以及模糊块（.bg-filter）使用animation 属性以及不同的参数来实现动效，产生动画视觉效果用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。Html部分<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>动态的毛玻璃背景</title> </head> <body> <div class="app"> <div class="box"> <div class="circle-box"> <div class="circle"></div> <div class="circle"></div> </div> <div class="bg-filter"></div> </div> </div> </body> </html>css部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .box{ width: 400px; height: 300px; position: relative; } .circle-box{ width: 100%; height: 100%; border-radius: 10px; position: absolute; overflow: hidden; } .circle:first-child{ width: 120px; height: 120px; border-radius: 50%; border: 30px solid #7BF52A; box-sizing: border-box; position: absolute; top: -38px; left: -40px; animation: move-y 3.5s linear infinite; } .circle:last-child{ width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%); box-sizing: border-box; position: absolute; bottom: -30px; right: -30px; animation: move-y 5s ease-in-out infinite; } .bg-filter{ width: 100%; height: 100%; background: rgba(255,255,255,.05); box-shadow: 0 2px 6px rgba(0,0,0,0.1); backdrop-filter: blur(6px); border-radius: 10px; box-sizing: border-box; position: absolute; } @keyframes move-y { 0% { transform: translateY(0); } 50% { transform: translateY(-16px); } 100% { transform: translateY(0); } }图片因为上传后格式转换了，这篇就分享这几个，后面会再分享
-
CC BY-NC-ND