前端
景荣先生
由简到繁,由繁到简!
展开
-
jQuery获取input焦点并选中文本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery获取input焦点并选中文本</title></head><body> <input type="text" id="nei" valu...原创 2019-12-04 15:36:47 · 3259 阅读 · 0 评论 -
消除 li 标签横向排列,为其设置 display:inline-block 时,相邻 li 之间会出现 8px 的空白间隔的方法
问题描述:消除 li 标签横向排列,为其设置 display:inline-block 时,相邻 li 之间会出现 8px 的空白间隔的方法。解决办法:ul 标签中加 letter-spacing: -8px 属性,同时将 li 内的字符间隔设为默认,即在 li 标签中加 letter-spacing: normal 属性。...原创 2019-04-20 10:15:00 · 468 阅读 · 0 评论 -
圆形头像的做法
效果如图:css代码如下:<style> div{ border:1px solid #a1a1a1; background-image:url(http://www.hiretianxia.cn/uploadfile/doctor/hth.jpg) ; width:200px; height:200px; border-radius:100px; ...原创 2019-04-20 10:11:41 · 228 阅读 · 0 评论 -
页面滚动至指定位置
方法一:锚点定位<a href="#B">B</a> //点击此处将跳转至设置的ID为B的锚点<div id="B">B</div> //锚点位置这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。方法二:scrollIntoView()方法<script ty...原创 2019-04-20 10:05:15 · 707 阅读 · 0 评论 -
js点击改变div高度
示例:点击显示更多<img class="tt" src="jt.png" /><div class="add keep"> <p>Google文档搜索:当需要搜索特定格式的文件时,使用“filetype:pdf/doc/ppt…”。例如,搜索关于Python的pdf格式的文档资料,搜索框输入: “Python” filetype:pdf即可。当然想要其他...原创 2019-04-20 09:57:40 · 2788 阅读 · 0 评论 -
HTML5 中Input 类型 - Date Pickers(日期选择器,下拉菜单样式)
示例:date类型<input type="date" name="user_date" />结果:HTML5 拥有多个可供选取日期和时间的新输入类型:date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间(小时和分钟) datetime - 选取时间、日、月...原创 2019-04-19 10:08:56 · 15035 阅读 · 1 评论 -
自动轮播banner图
Html代码:<div class="banner"> <img src="images/c.jpg"> <img src="images/b.jpg"> <img src="images/a.jpg"> <div class="btns"> <span class="on"></span>...原创 2019-04-19 09:56:38 · 214 阅读 · 0 评论 -
移动端添加视频与音频及尺寸自适应
1、视频尺寸自适应:视频代码添加以下样式:height: auto;width: 100%;display: block;width设置100%,就能达到自适应的效果了,而display:block避免了出现滚动条的情况。2、添加视频且兼容各浏览器(目前只支持ogg、mp4、webm三种格式,可同时用3种格式,便于各浏览器兼容,默认播放第一个可识别格式)<video width=...原创 2019-04-19 09:53:57 · 1393 阅读 · 0 评论 -
js表单验证
<script type="text/javascript"> function check(){ var name = document.getElementById("name").value; var tel = document.getElementById("tel").value; var reg_name = /^[\u4e00-\u9fa5]{2,4...原创 2019-04-19 09:45:00 · 133 阅读 · 0 评论 -
离线宝的调用方法
<input name="vtel" type="text" id="vtel" placeholder="请输入手机号码" "javascript:this.focus();" class="telinput" value=""><input type="button" name="cbBtn" id="cbBtn" value="给您回电" class="submit" /...原创 2019-04-19 09:43:50 · 594 阅读 · 0 评论 -
Textarea文本框去除选中时的蓝色边框及禁止拖拽
outline:none; /*去除蓝色边框*/resize:none; /*禁止拖拽*/原创 2019-04-20 10:20:25 · 3060 阅读 · 0 评论 -
onfocus获取焦点事件与onblur失去焦点事件
<input type="text" value="请输入您的称呼" "if (value =='请输入您的称呼'){value =''}" "if (value ==''){value='请输入您的称呼'}"/>input框默认为“请输入您的称呼”,当onfocus获取焦点即将输入文字时显示为空,当onblur失去焦点且输入框为空时显示为“请输入您的称呼”。...原创 2019-04-20 10:19:23 · 2844 阅读 · 1 评论 -
如何使移动设备字体大小自适应
rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定。像素:1、物理像素(physical pixel)我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。2、逻辑像素是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。3、设备的像素比...转载 2019-05-15 09:25:16 · 543 阅读 · 0 评论 -
实时提示待注册用户名是否已注册
html中: <span>输入账号 :</span> <input type="text" id="name" name="name" onkeyup="check()"> <span id="result"></span> <script> //XmlHttp参考手册https://www.jb51.net/s...原创 2019-09-30 15:32:48 · 430 阅读 · 0 评论 -
移动端页面顶部菜单图标(3条横线)点击旋转
HTML中:<button class="nav-mobile-button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>CSS...原创 2019-06-03 14:40:00 · 3027 阅读 · 0 评论 -
Flex 布局教程:语法篇
<!-- div class="asset-body" --> <p>网页布局(layout)是 CSS 的一个重点应用。</p> <!-- /div -...转载 2019-06-05 11:56:21 · 519 阅读 · 0 评论 -
jQuery选择器之获取祖先级、兄弟级、子孙级元素
一、获取祖先级元素1、parent(selector):返回直接父元素,可选择过滤。2、parents(selector):返回祖先元素,包括父元素,可选择过滤。3、closest(selector):返回第一个祖先元素(祖先是父、祖父、曾祖父,依此类推。),从当前元素开始沿 DOM 树向上,可选择过滤。二、获取兄弟级元素1、next(selector):返回下一个同胞元素,可选择过滤。...原创 2019-05-18 11:07:51 · 12659 阅读 · 0 评论 -
ajax实现数据库获取select二级联动下拉菜单
HTML内容:<li> <span>一级分类:</span> <select name="yjid" class="yjid"> <option value="">---所属分类---</option> <volist name="list" id="vo"> ...原创 2019-05-18 09:54:51 · 3294 阅读 · 0 评论 -
@media screen实现屏幕自适应内容详解
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。准备工作1:设置Meta标签首先,在使用Media时,需要先设置下面这段代码,来兼容移动设备的展示效果:<meta name="viewport" content="width=device-width, initial-scale=...转载 2019-05-16 15:33:43 · 17726 阅读 · 0 评论 -
div高度根据内容物高度自适应的方法
示例:HTML中:<div class="lei"> <p>电脑</p> <ul> <li><b>台式电脑</b></li> <span>3666.00</span> </ul> <ul>...原创 2019-05-16 14:09:03 · 17608 阅读 · 1 评论 -
键盘回车事件
点击或回车触发:<script> $(function(){ //点击触发 $('.sou').click(function(){ alert('触发成功'); }); //Enter触发 $('body').keydown(function(){ ...原创 2019-05-20 16:29:35 · 2473 阅读 · 0 评论 -
添加商务通的几种方式
方式一:文章内容中的< a>标签链接商务通时,需在网站中加swt文件夹,内含index.html即可,html内容:<html><head><meta http-equiv="Content-Language" content="zh-CN"><meta HTTP-EQUIV="Content-Type" CONTENT="text/h...原创 2019-04-19 09:42:23 · 2856 阅读 · 0 评论 -
移动端页面水平方向留白,找不到原因下的解决方案
移动端页面水平方向留白,找不到原因下的解决方案:overflow-x:hidden;(y是垂直方向,此处用不着)原创 2019-04-03 09:16:59 · 947 阅读 · 0 评论 -
网页自适应移动端及根据访问设备自动识别展示手机站或PC站
一、7个步骤让PC网站自动适配手机网页传统的网站如何完成向移动设备的快速转型? 通过移动适配技术可以实现,移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃!1允许网页宽度自动调整“自适应网页设计”到底是怎么做到的?其实并不难。首先,在网页代码的头部,加入一行viewport元标签。<meta name="v...转载 2019-04-02 10:33:36 · 9314 阅读 · 0 评论 -
图片实现水平垂直居中的方法
水平居中:text-align:center垂直居中:line-height的值同height或vertical-align:middle让图片在屏幕正中显示的几种方法:一、用margin负值,需要宽高固定。position:absolute;left:50%;top:50%;margin-left:-宽度的一半;margin-top:-高度的一半;二、使用css3中的新属性t...转载 2019-04-02 09:43:11 · 2330 阅读 · 0 评论 -
图片宽高超出div时图片的常用显示方式
图片正中位于div正中,超出部分隐藏(效果为宽高等比例填充满整个div)。img {margin: 0; padding: 0; width: 100%; height: 100%; object-fit: cover;}原创 2019-04-02 09:34:13 · 1959 阅读 · 0 评论 -
上传图像当即显示的js方法
HTML内容:<div> <p>当前头像:</p> <div> <div> <a href="#"> <img src="__ROOT__/Uploads/{$user.pic}" /> //显示头像 ...转载 2019-04-02 09:30:53 · 151 阅读 · 0 评论 -
滚动条样式修改
<style> .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb ...转载 2019-04-02 08:44:53 · 238 阅读 · 0 评论 -
根据打开网页的设备自行判断打开PC还是移动端网站
PC站和移动站拥有两套代码,如果想根据用户使用的设备,打开同一域名(如www.hiretianxia.cn)自行跳转到合适的页面,可将以下代码放入www.hiretianxia.cn中:<script type=”text/javascript”>//平台、设备和操作系统 var system ={ win : false, mac : false, xll : fa...转载 2019-04-02 08:40:34 · 1314 阅读 · 0 评论 -
js验证上传文件大小、类型等
<script>function check() { var str=document.chuan.wen.value; if (str==""){ alert("请选择要上传的文件!"); return false; } var f = document.getElementById("jian").files; alert(f[0].la...原创 2019-04-04 10:04:26 · 788 阅读 · 0 评论 -
iOS系统中使用框架集出错的解决办法
1、使用iframe标签;2、在iframe标签外包裹div标签(这个div将作为支持内部滚动的基础容器。),如下:<div class=”top”>…</div><div class=”main”> <div class=”left”>…</div> <div class="right"> <ifr...原创 2019-04-04 09:48:28 · 175 阅读 · 0 评论 -
table表格中非汉字如何自动换行
Table表格中加入以下样式即可实现非汉字的自动换行:<table style="word-break:break-all; word-wrap:break-all;">原创 2019-03-30 14:36:02 · 193 阅读 · 0 评论 -
javascript生成实时动态时间
JS部分: <script> window.function(){ setInterval(time,1000); } function time(){ var tm=document.getElementById('tm'); var weeks=['星期一','星期二','星期三','星期四','星期五','星期六','星期天']; var ...原创 2019-04-08 08:43:45 · 555 阅读 · 0 评论 -
font-size在iOS和安卓下大小不一致的解决办法
原因:因为webkit内核的浏览器会根据容器的宽来做“适应”的字体大小的计算,代码中.item元素内容长短不一,导致容器的宽不一致,部分产生了换行,从而导致浏览器做不一样的缩放处理。解决方法有两种:1、-webkit-text-size-adjust: none;方法:作用:禁用Webkit内核浏览器的文字大小调整功能,以实际大小显示,部分浏览器不支持小于12px的字号将使用12...原创 2019-03-29 10:48:49 · 12100 阅读 · 1 评论 -
页面自动定时刷新
<meta http-equiv="refresh" content="5"> //其中5指每隔5秒刷新一次页面原创 2019-04-03 09:14:58 · 192 阅读 · 0 评论 -
页面加载完后,自动提交form表单,且在iframe内跳转的方法
<script> $(function(){ $('#pay').submit(); });</script><form method="post" action="{:U('index/info')}" id="pay" target="main"> //在name为main的iframe框内跳转 <in...原创 2019-04-03 09:03:18 · 2047 阅读 · 0 评论 -
修改css及js文件后无法刷新浏览器的css及js缓存
解决办法:在文件路径最后加“?参数=值”,参数和值可随意设置,保存后刷新页面即可。原因是将修改后的文件当成新文件重新加载了。<link type="text/css" rel="stylesheet" href="/css/index.css?key=1" /><script type="text/javascript" src="/js/min.js?key=2">...原创 2019-04-03 08:59:52 · 525 阅读 · 0 评论 -
网站打开速度优化
一般情况下:1、所有css文件合并成一个css文件并与页面内部的<style>标签内容(最好也写入合并的css文件中)一起放在</head>前;原因:CSS出现在<body>内,页面需要重新渲染,打开速度受到影响,合并相同域名下的css文件可以减少网络连接次数;2、所有js文件(包括插件)合并成一个js文件,并放在</body>前,页面内部的js...原创 2019-04-03 08:57:22 · 852 阅读 · 0 评论 -
js禁止返回上一页
方法一:<script> var url = document.referrer; //获取上一页URL // i不能设置过大,否则会导致浏览器崩溃,如设置1000000 for(i=0;i<50;i++){ history.pushState({}, 0,''); //不刷新当前页面的情况下添加浏览器历史记录 } isclick = false; setIn...原创 2019-03-29 11:21:20 · 3701 阅读 · 0 评论 -
js获取当前页面Url参数的方法
//paraName 为被查找的参数名称 function GetUrlParam(paraName) { var url = document.location.toString(); var arrObj = url.split("?"); if (arrObj.length > 1) { var arrPara = arrObj[1].spli...原创 2019-03-29 11:15:17 · 440 阅读 · 0 评论