html

html自动换行的实现方法详解

lyingzhu 2023年11月6日 2023年11月6日

HTML自动换行的实现方法详解在HTML中，要实现自动换行可以使用CSS样式或HTML标签来实现。下面将详细介绍两种方法。方法一：使用CSS样式实现自动换行 1. 使用CSS的white-space属性： – 设置white-space属 …

继续阅读"html自动换行的实现方法详解"

技术类留下评论

HTML5手机网站开发页面宽度解决方案

lyingzhu 2023年9月28日 2023年9月28日

相信大家都知道，现在市面上手机的屏幕尺寸多种多样，2.8寸、3.0寸、3.2寸、3.5寸、4.0寸、4.2寸、4.5寸等等，随之而来的手机分辨率也千差万别，有240*320像素、320*480像素、480*800像素、640*960像素等等 …

继续阅读"HTML5手机网站开发页面宽度解决方案"

技术类留下评论

jQuery实现右上角点击后滑下来的竖向菜单

lyingzhu 2021年10月26日 2022年9月9日

<pre class="inline:true class:language-html decode:1 " >&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=uft-8" /&gt;
&lt;title&gt;jQuery实现右上角点击后滑下来的竖向菜单&lt;/title&gt;<br />&lt;base target="_blank" /&gt;
&lt;style&gt;
#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;
}
&lt;/style&gt;
&lt;script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function () {
$('#opciones').hide();
$('#settings').click(function () {
$('#opciones').slideToggle();
$(this).toggleClass("cerrar");

});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body style="text-align: center"&gt;
&lt;div id="settings"&gt;
Settings&lt;/div&gt;
&lt;div id="opciones"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/w7bbn7nw.htm"&gt;jQuery 1.11.0下载&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/p7gfevir.htm"&gt;jquery设置title属性&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/emf1jc13.htm"&gt;jquery日期输入插件&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/42v7nii9.htm"&gt;jQuery下拉日期选择器&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/liuvpkke.htm"&gt;jquery图片上传前剪裁&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/4kwkql05.htm"&gt;jquery背景自动切换&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/0ckt6xm9.htm"&gt;jQuery unbind() 方法&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/pmryuvga.htm"&gt;jquery产品多图展示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://keleyi.com/a/bjad/q2ee2xyt.htm"&gt;jquery图片放大镜插件&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;&lt;h2&gt;jQuery实现右上角点击后滑下来的竖向菜单&lt;/h2&gt;
&lt;br /&gt;
请点击右上角的图标
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<head>

<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>

$(document).ready(function () {

$('#opciones').hide();

$('#settings').click(function () {

$('#opciones').slideToggle();

$(this).toggleClass("cerrar");

});

</script>

</head>

Settings</div>

<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>

继续阅读"jQuery实现右上角点击后滑下来的竖向菜单"

技术类留下评论

H5 页面如何查看 PDF 文件

lyingzhu 2021年2月18日 2022年9月9日

我们知道在 Chrome、Firefox 等浏览器可以查看 PDF 文件，不需要额外安装什么插件，这是由于 pdf.js 被预置到了这些浏览器中。 pdf.js 是一款使用 HTML5 Canvas 安全地渲染 PDF 文件以及遵从网页标准的网页 …

继续阅读"H5 页面如何查看 PDF 文件"

技术类留下评论

使用 Python 开发一个【短链接生成器】

lyingzhu 2020年8月21日 2022年9月9日

我们总会遇到类似这样的链接https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589795467819&di=15043ebd2ae7b0a2eac634de991e45af&imgtype=0&src=http%3A%2 …

继续阅读"使用 Python 开发一个【短链接生成器】"

技术类留下评论

JQuery 实现随机生成数字+字母验证码

lyingzhu 2020年8月13日 2022年9月9日

效果图

<pre class="inline:true class:language-html decode:1 " >&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;!--验证码--&gt;
   &lt;script language="javascript" type="text/javascript"&gt;
     
            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 &lt; codeLength; i++)
                {
                    var charNum = Math.floor(Math.random() * 52);//设置随机产生
                    code += codeChars[charNum];
                }
                if (checkCode)
                {
                    checkCode.className = "code";
                    checkCode.innerHTML = code;
                }
            }        
         &lt;/script&gt;
     
&lt;/head&gt;
&lt;style&gt;
    /*验证码*/
.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;
        }
         
&lt;/style&gt;
&lt;body onload="createCode()"&gt;&lt;!--在页面加载的同时要加载验证码，否则页面加载完后验证码不会显示 --&gt;
    &lt;p&gt;
        &lt;label&gt;      验证码：&lt;/label&gt; 
         &lt;div class="code" id="checkCode" onclick="createCode()" &gt;&lt;/div&gt;&lt;a class="yz"  href="#" onclick="createCode()"&gt;看不清换一张&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;请输入验证码：&lt;/label&gt;&lt;input id="YZ" name="yz" width="30px;"&gt;
      &lt;/p&gt;
      &lt;input class="btttom"  type="button" name="OK" id="OK" onclick="GetDom()" value="确认"/&gt;
       
&lt;/body&gt;
&lt;!--验证--&gt;
&lt;script&gt;
  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");
        }
      
  } 
&lt;/script&gt;
&lt;/html&gt;

<head>

<title>Document</title>

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;

}

{

text-decoration:none;

font-size:12px;

color:#288bc4;

}

a:hover

{

text-decoration:underline;

}

.yz{

position: absolute;

margin-left: 220px;

margin-top:-10px;

}

</style>

<p>

<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>

</body>

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>

继续阅读"JQuery 实现随机生成数字+字母验证码"

免责声明

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。如发现有害或侵权内容，请与我们联系，邮箱：web@cutepig.net