html自动换行的实现方法详解
HTML自动换行的实现方法详解 在HTML中，要实现自动换行可以使用CSS样式或HTML标签来实现。下面将详细介绍两种方法。 方法一：使用CSS样式实现自动换行 1. 使用CSS的white-space属性： – 设置white-space属 …
浏览标签
HTML自动换行的实现方法详解 在HTML中，要实现自动换行可以使用CSS样式或HTML标签来实现。下面将详细介绍两种方法。 方法一：使用CSS样式实现自动换行 1. 使用CSS的white-space属性： – 设置white-space属 …
相信大家都知道，现在市面上手机的屏幕尺寸多种多样，2.8寸、3.0寸、3.2寸、3.5寸、4.0寸、4.2寸、4.5寸等等，随之而来的手机分辨率也千差万别，有240*320像素、320*480像素、480*800像素、640*960像素等等 …
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<pre class="inline:true class:language-html decode:1 " ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=uft-8" /> <title>jQuery实现右上角点击后滑下来的竖向菜单</title><br /><base target="_blank" /> <style> #opciones { z-index: 7000; position: fixed; padding-bottom: 10px; padding-left: 10px; width: 120px; padding-right: 10px; font: 12px/140% Arial, Helvetica, sans-serif; background: #e7e7e7; color: #999; top: 0px; right: 0px; padding-top: 10px; } #opciones H2 { border-bottom: #fff 1px solid; padding-bottom: 3px; margin: 0px 0px 3px; padding-left: 0px; padding-right: 0px; color: #666; font-size: 16px; padding-top: 0px; } #opciones H3 { padding-bottom: 0px; text-indent: 0px; margin: 3px 0px; padding-left: 0px; padding-right: 0px; height: 15px; color: #666666; padding-top: 0px; } #opciones P { font-size: 12px; } #opciones A { color: #999; text-decoration: none; } #opciones A:hover { background: #666666; color: #fff; } #settings { z-index: 8000; position: fixed; text-indent: -99999px; width: 43px; display: block; background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px 0px; height: 43px; top: 0px; cursor: pointer; right: 0px; } #settings:hover { background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -86px; } .cerrar { background: url(http://keleyi.com/keleyi/phtml/jqtexiao/22/opciones.gif) no-repeat 0px -43px !important; } #opciones ul { padding: 0px; margin: 0px; } #opciones li { list-style: none; text-align: left; } </style> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#opciones').hide(); $('#settings').click(function () { $('#opciones').slideToggle(); $(this).toggleClass("cerrar"); }); }); </script> </head> <body style="text-align: center"> <div id="settings"> Settings</div> <div id="opciones"> <ul> <li><a href="http://keleyi.com/a/bjad/w7bbn7nw.htm">jQuery 1.11.0下载</a></li> <li><a href="http://keleyi.com/a/bjad/p7gfevir.htm">jquery设置title属性</a></li> <li><a href="http://keleyi.com/a/bjad/emf1jc13.htm">jquery日期输入插件</a></li> <li><a href="http://keleyi.com/a/bjad/42v7nii9.htm">jQuery下拉日期选择器</a></li> <li><a href="http://keleyi.com/a/bjad/liuvpkke.htm">jquery图片上传前剪裁</a></li> <li><a href="http://keleyi.com/a/bjad/4kwkql05.htm">jquery背景自动切换</a></li> <li><a href="http://keleyi.com/a/bjad/0ckt6xm9.htm">jQuery unbind() 方法</a></li> <li><a href="http://keleyi.com/a/bjad/pmryuvga.htm">jquery产品多图展示</a></li> <li><a href="http://keleyi.com/a/bjad/q2ee2xyt.htm">jquery图片放大镜插件</a></li></ul> </div> <div><h2>jQuery实现右上角点击后滑下来的竖向菜单</h2> <br /> 请点击右上角的图标 </div> </body> </html> |
我们知道在 Chrome、Firefox 等浏览器可以查看 PDF 文件，不需要额外安装什么插件，这是由于 pdf.js 被预置到了这些浏览器中。 pdf.js 是一款使用 HTML5 Canvas 安全地渲染 PDF 文件以及遵从网页标准的网页 …
我们总会遇到类似这样的链接https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589795467819&di=15043ebd2ae7b0a2eac634de991e45af&imgtype=0&src=http%3A%2 …
效果图
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<pre class="inline:true class:language-html decode:1 " ><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--验证码--> <script language="javascript" type="text/javascript"> var code; function createCode() { //函数体 code = ""; var codeLength = 5; //验证码的长度 var checkCode = document.getElementById("checkCode"); var codeChars = 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', '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 charNum = Math.floor(Math.random() * 52);//设置随机产生 code += codeChars[charNum]; } if (checkCode) { checkCode.className = "code"; checkCode.innerHTML = code; } } </script> </head> <style> /*验证码*/ .code { background-color: silver; font-family:Arial; /*设置字体*/ font-style:initial; color:brown; font-size:20px; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; width:81px; height:23px; margin-left: 120px; margin-top: -35px; } a { text-decoration:none; font-size:12px; color:#288bc4; } a:hover { text-decoration:underline; } .yz{ position: absolute; margin-left: 220px; margin-top:-10px; } </style> <body onload="createCode()"><!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 --> <p> <label> 验证码：</label> <div class="code" id="checkCode" onclick="createCode()" ></div><a class="yz" href="#" onclick="createCode()">看不清换一张</a> </p> <p> <label>请输入验证码：</label><input id="YZ" name="yz" width="30px;"> </p> <input class="btttom" type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/> </body> <!--验证--> <script> function GetDom(){ if(document.getElementById("YZ").value==""){ alert("验证码不能为空！"); createCode();//输错一次或提交一次都将会刷新一次验证码 return false; //结束本次会话 }else if(document.getElementById("YZ").value.toUpperCase()!=code.toUpperCase()){ //toUpperCase不区分大小写 alert("您输入的验证码有误，请重新输入！！"); createCode();//读取文件 } else{ alert("ok"); } } </script> </html> |