-
图片懒加载 lazyload.js ( jquery.lazyload.js ) 使用详解
lazyload.js 既 jquery.lazyload.js,作者 Mika Tuupola 。2.0 版本后插件不再依赖 jQuery ,之前的版本是依赖 jQuery 的,之前的默认使用自定义的 data-original (可修改)保存真实图片地址,2.0 之后新版本使用 data-src 保存真实图片地址,另外,设置参数调整较多。 对于一些图片使用比较多的网站,可能网页加载会比较慢,同…...- Joker
- 0
- 0
- 6
-
轻松解决 li 标签上边缘间隙问题
今天在调整网站评论模块样式的时候,发现 <li> 标签中上边缘有一个小小的间隙,虽然影响不大,但是对于一个有着深度强迫症的伪程序员,当然是要解决它。具体问题如下: 原因好像是插入的 <input> 标签的影响,解决方式也很简单,直接设置 CSS 为 float: left; 即可。...- Joker
- 0
- 0
- 4
-
用纯CSS打造圆形图片旋转的方法
上次看到一个博客的 LOGO 图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现,我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗 H2 的图片。 然后把图片写成圆形。 height: 300px; width: 300px; border-radius: 150px; 2、将图片旋转 这里我们使用了动画…...- Joker
- 0
- 0
- 4
-
如何给网页表单添加滑动验证
为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。 如何给网页表单添加这种滑动验证功能呢?下面介绍一下方法。 第一步:制作表单框,使用以下的 HTML 代码来进行制作表单框以及滑块; <form class="layui-form" action="">…...- Joker
- 0
- 0
- 14
-
优化阅读体验网站全局字体CSS最佳写法
英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac OS 两个系统,这两个系统的默认字体是不同的,那么 CSS 中的 font-family、字体大小、颜色、行距如何设置才是最美、最好看的呢?作为网页设计师,对这方面也有所研究,下面是设计达人(公众号 ID:she…...- Joker
- 0
- 0
- 9
-
最简单的HTMML5下拉菜单样式表代码分享
下拉菜单是 wordpress 程序主题里面最常用的菜单体验方式,但是大多新手的对于菜单的使用和调整方式并不理解,尤其是不懂样式表的同学操作起来很加的困难,所以这里给大家提供了现成的样式表代码样式,可以直接复制过去就可以呈现下拉的形态,并且可以直接用于 wordpress 主题的调整中,在对应的代码里添加一下菜单 函数就可以成功应用在现有的主题上,是不是十分的方便。 <style> /…...- Joker
- 0
- 0
- 2
-
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法
先看下这个图片:一个竖向的长方形图片,需求就是:通过 CSS 的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间): HTML 部分: <li> <a href="1.jpg" title="测试" alt="测试"><d…...- Joker
- 0
- 0
- 8
-
CSS3自定义webkit滚动条样式
默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条,故回头翻了一下 CSS3,还真能不用插件实现自定义滚动条的样式,Webkit 支持拥有 overflow 属性的区域,列表框,下拉菜单,textarea 的滚动条自定义样式。当然,兼容所有浏览器的滚动条样式目前是不存在的。内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过 css 伪类来实现对滚动条的自…...- Joker
- 0
- 0
- 11
-
浅谈 CSS3 盒布局与弹性盒布局
在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用 float:left。但使用 float 属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 什么是 CSS3 盒布局 那么 CSS3 盒布局 display:box 就可以解决这样的问题,它可以不需要使用 float 属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与 C…...- Joker
- 0
- 0
- 11
-
jQuery外链新窗口打开
对于外链,为了留住用户在本站,我们通常会使用新窗口打开,你可以设置 target="_blank"。然而手动一个是麻烦,另一个则是有可能会遗漏,本文通过 jQuery 查询要点击的链接,添加相关属性,使其打开新窗口。 $(document).on('click','a',function(){ var url = this.href,ha…...- Joker
- 0
- 0
- 2
-
jQuery 通过class名称验证表单值不为空
我们在使用 CMS 系统开发网站的时候,经常需要验证表单数据为必填项,若用 jQuery 通过 ID 去验证,不仅会影响效率,还会有所遗漏,不易于后期维护。 本章将介绍如何利用 jQuery,通过为表单配置 class 进行统一验证。(ID 一个页面只可以使用一次,class 可以多次引用) 1:为 input 添加 class,名字可以随意设置,但每个 input 需要保持一致,本章案例 cal…...- Joker
- 0
- 0
- 17
-
jQuery获取上传文件的名称类型大小
Web 开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。 通常情况下,当用户通过<input type='file>'标签来上传文件时,我们可以看到上传文件的名称。 HTML5 File API 为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作。 支持 File API 的浏览…...- Joker
- 0
- 0
- 4
-
HTML5(FileReader)实现图片上传预览功能
前言 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍 JS 中利用 FileReader 实现上传图片前本地预览功能,需要的朋友参考下。 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到 URL 再渲染到页面上,这样做在图片比较小…...- Joker
- 0
- 0
- 5
-
半小时学会正则表达式(下)
这篇文章通过实现 5 个小功能,解决 2 个实际开发中遇到的问题,来讲述在 Java 中如何使用正则,让你半小时掌握正则表达式。 一、Java 中如何使用正则 Java 中正则相关类位于 java.util.regex 包下,主要使用 2 个类,如下: Pattern 类: Pattern 是正则表达式 regex 的编译表示形式 代码:Pattern pattern = Pattern.comp…...- Joker
- 0
- 0
- 6
-
CSS的+(加号)选择器怎么用
在 CSS 中“+”符号选择器用于选择紧跟在指定元素之后但不在特定元素内部的元素。下面本篇文章就来具体介绍一下,希望对大家有所帮助。在 CSS 中“+”符号选择器被称为相邻兄弟选择器,用于选取在同一父元素下的,紧跟指定元素之后的另一个元素。 基本句式 元素E + 元素F{ //CSS属性 } 说明:所有主流浏览器都支持“+”符号选择器;但在 IE8 中运行,必须声明<!DOCTYPE>…...- Joker
- 0
- 0
- 4
-
终极代码禁止查看网页源代码方法
总是有新手问,如何禁止别人查看自己的网页源代码?答案是没有,对于有经验者所有方法都是徒劳的。一般常用的方法是在网页中加上类似的 JS 代码,屏蔽屏蔽键盘和鼠标右键。 document.onkeydown = function() { var e = window.event || arguments[0]; if (e.keyCode == 123) { alert('禁止F12…...- Joker
- 0
- 0
- 11
-
超级有意思经典代码注释图
对于很多程序员来说,最讨厌别人不写注释。而有些人写出来的代码注释,通常拥有幽默搞笑的风格,看起来很有意思。网上收集了许多超级有意思的代码注释,有如来佛、草泥马等有趣的注释! /*** * .,:,,, .::,,,::. * .::::,,;;, .,;;:,,....:i: * :i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i. * :;..:…...- Joker
- 0
- 0
- 5
-
如何让网页文字像古文一样从右到左排列
以前古文书籍的文字排序是从右到左,向上到下的排列。那么我们自己的网页上的文字也想像古文书籍那样排列,怎么实现呢?对于 CSS3 中已经有这样的属性来控制这个的效果了。 要实现这种网页文字像古文一样从右到左排列,可以使用 CSS3 中的 writing-mode 属性。 writing-mode 属性定义了文本在水平或垂直方向上如何排布。 语法格式如下: writing-mode: horizont…...- Joker
- 0
- 0
- 25
-
CSS文本中换行不生效空格合并
css 天天打交道,没想到在一个基础的 white-space 属性上栽跟斗了,最近在项目的一个功能时,小程序上报上来的问题,用户是选择了直接使用手机键盘上换行的方式来填写多行的表单内容。但是当 PC 管理端查看的时候,span 内的内容全部挤到了一起,没有想用户提交的那样,一条是一条的。 现在框架用多了的小伙伴哪里还有 CSS 这么基础的储备,于是跑过来问,我也搞得一脸懵。于是乎,开始翻找 cs…...- Joker
- 0
- 0
- 12
-
CSS3 Flexbox 弹性布局教程 & 实操案例
我们知道在 Web 短暂的历史中,设计师用过多种不同的网页布局方式。一开始,设计师依靠 HTML 表格组织内容,把页面分成多行和多列。可是,HTML 中的 table 标签原本就不是为页面布局而生的。后来出现了 CSS 盒基于浮动的布局,使用这种方法控制页面布局更简单,也更加符合逻辑。 如今,基于浮动的布局仍然是最常用的方法,而且设计师一直在改进其用法。例如,栅格系统就是创建布局的得力工具,不过其…...- Joker
- 0
- 0
- 12
-
font-face 字体文件跨域解决办法字体跨域
开发网站的时候经常会调用不同域名下的字体文件(同源策略禁止读取位于 ttf 文件),但是出现无限的情况,提示如下:已拦截跨源请求: 同源策略禁止读取位于 https://www.weimahe.com/fonts/fontawesome-webfont.woff?v=4.7.0 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’) 已拦截跨源请求:同源…...- Joker
- 0
- 0
- 15
-
通过 CSS自定义属性(CSS变量)和 JavaScript 实现高级CSS主题切换
在本教程中,我们将使用 CSS 自定义属性(也称为 CSS 变量)来为简单的 HTML 页面实现主题切换。 我们将创建暗黑和明亮的示例主题,然后编写 JavaScript 以在用户单击按钮时在两者之间切换。 如果你以前没接触过,请先阅读 CSS 变量(自定义属性)实用指南及注意事项这篇文章 就像在典型的编程语言中一样,变量用于保存或存储值。 在 CSS 中,它们通常用于存储颜色,字体名称,字体大小…...- Joker
- 0
- 0
- 6
-
PHP中判断一个字符串包含另一个字符串的方法
第一种方法:用 php 的 strpos() 函数判断字符串中是否包含某字符串的方法 if(strpos('www.weimahe.com','22vd') !== false){ echo '包含22vd'; }else{ echo '不包含22vd…...- Joker
- 0
- 0
- 13