-
半小时学会正则表达式（上）
正则表达式（Regular Expression）在代码中常常简写为 regex。正则表达式通常被用来检索、替换那些符合某个规则的文本，它是一种强大而灵活的文本处理工具。正则描述了一个规则，通过这个规则可以匹配一类字符串。 如何学习正则？ 1、学习正则表达式的语法规则 2、练习使用正则并能解决实际问题 针对上面的每个点我会分别写一篇文章来说明，用最短的时间学会正则表达式。这篇文章讲述正则表达式的语…...- 0
- 0
- 8
-
Background-repeat 怎么使用
我们知道 background 属性是用于设置背景的，那么 background-repeat 属性怎么使用呢？本篇文章就来给大家介绍一下 background-repeat 属性的使用方法。background-repeat 属性设置是否及如何重复背景图像，也就是定义了图像的平铺模式。默认地，背景图像在水平和垂直方向上重复。background-repeat 属性的设置从原图像开始重复，原图像由…...- 0
- 0
- 8
-
CSS样式表属性最佳书写顺序是怎样的？
好久没有更文了，博客都要荒废了，惭愧一下下，刚好这段时间稍微整理了一下之前写的样式表，就来说下 CSS 样式表中各个属性的书写顺序是怎样的。 像很多初学者一样，飞鸟刚开始写样式表也是很佛系的，想到什么就在样式里写什么，毫无规律。其实这样不仅不利于查看维护，更重要的是混乱的 CSS 属性书写顺序会对网页的加载渲染造成影响，拖慢页面加载速度。也就是说，一个规范的 CSS 属性书写属性也是网页优化的组成…...- 0
- 0
- 23
-
原生态JS的方法调用CLASS元素标签
最近研究起来原生态的 js 来，主要因为 jquery 太冗余了，拖慢了网站的访问速度，于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”)，希望对你们有用。 <html> <head> <title></title> <script type="text/javascript"> window.onlo…...- 0
- 0
- 8
-
网站Video标签播放大视频卡顿解决方法（m3u8流媒体）
自从 HTML5 推出之后，网站上的视频可以像图片一样使用 video 标签直接播放了。但使用 video 播放视频有一个缺点就是只能播放小视频，如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。 下面就介绍一下网站 Video 标签播放大视频卡顿解决方法，就是将普通的 MP4 视频转成 m3u8 流媒体，然后再使用 video 标签进行播放。可以彻底解决 Video 标签播放大…...- 0
- 0
- 243
-
企业网站上添加位置地图的方法
现在很多企业网站上都有位置地图功能，方便用户查看公司的位置。让企业网站更有信任感。效果如下图： 网站上添加位置地图功能，一般是使用百度地图 API 来做的。下面介绍一下企业网站上添加位置地图的具体方法。 第一步 引入百度地图 API，将下面的 JS 代码保存到一个 JS 文件为 map.js； (function(){window.BMAP_PROTOCOL = "https"…...- 0
- 0
- 18
-
jQuery 检查一个元素是否存在然后按需加载内容
前端开发的过程中，我们会使用很多 jQuery 插件，jQuery 插件使用得多了，会导致网页打开速度变慢。而引入的 jQuery 插件并不是每个页面都需要的。这时候使用按需加载的方法加载 jQuery 插件会对前端性能的提升有不少帮助。按需加载的方法有很多，今天我们来说一下 jQuery 的方法。判断网页中一个元素是否存在的方法： var $selector = $('.my-elem…...- 0
- 0
- 7
-
CSS修复图片指定尺寸缩小后模糊不清的问题
最近在开发插件的过程中，需要设定支付宝当面付二维码的图片尺寸大小的问题。起初很简单地直接在 <img> 标签中设定 height 和 width 属性，但是很快发现，大小是改变了，但图片质量下滑很严重。这就比较奇怪了，因为指定的图片尺寸，比实际图片的尺寸要小，也就是所是缩小展示，按我日常摄影的直觉，缩小后的图片不应该更锐利清晰才对么。 CSS 属性 image-rendering 用于…...- 0
- 0
- 38
-
Span之间空隙原因和解决办法
span 之间的空隙，到底是什么？display:inline-block 的元素虽然能够处于同一行，但是很变态的是它们之间出现了空格，如何处理？ （例如在浮动元素居中当中，我们必须使用 display:inline-block） 实例代码 <html> <head> <meta charset="UTF-8"/> <title>…...- 0
- 0
- 42
-
如何给自己的网站添加WEB社交分享按钮
我们注意到，很多的网站都有 WEB 分享按钮，可以一键分享到很多的网站平台，如：分享到微博、微信、人人网等等。 以前我们做这种 WEB 分享按钮使用的是百度分享，但现在百度分享已经停用了。下面介绍另一种自己做网站时添加 WEB 分享按钮的方法。 方法/步骤 第一步：打平网页分享平台：http://www.bshare.cn/ 第二步：选择自己需要的网页分享样式，可以根据自己网站的需求选择按钮的大小…...- 0
- 0
- 20
-
纯CSS粘住固定底部的5种方法
本文主要介绍一个 Footer 元素如何粘住底部，使其无论内容多或者少，Footer 元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图： 方法一： 全局增加一个负值下边距等于底部高度，有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度…...- 0
- 0
- 14
-
CSS文字超出部分隐藏并显示省略号
网站前端开发中 web 网页中文字超出了需要隐藏，并显示省略号这个在工作中很多时候都要用到，我想很多人都碰到过吧，实现这个效果有两种解决方法，大致如下： 一是用程序开截取字符长度，这个其实也是可以的，但是并不利于 SEO 优化，因为搜索引擎得到的也只是截取的长度 第二种是用 css 样式来做,这种只会隐藏超出部分，实际上隐藏的文字还是在 html 代码中只是没有被显示出来，这样搜索引擎也能够准确读…...- 0
- 0
- 7
-
jQuery判断鼠标向上滚动并浮动导航
判断鼠标向上滚动，或者向下滚动，可以通过对比用户的上一次滚动的坐标和下一次的坐标，当上一次小于下一次时，即用户在向下滚动，反之，则说明用户在向上滚动。滚动的坐标值可以取窗口的 scrollTop。为啥会有这个需求呢？有没有发现在一国外的一些网站，当你向上滚动时，导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达，省去很多拖动的时间，当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人…...- 0
- 0
- 14
-
网页HTML特殊字符编码对照表
在设计和开发网页时，需要用到一些特殊符号，比如：©，®，℃，¥，⅜ 等等，有些上网找半天不一定能找到。HTML 特殊符号编码有很多种 unicode、十六进位码（hex code），html 实体编码（entity code），还有我们熟知的 html 实体（html entity） ，为了在 css content 属性中使用，还有对应的 css code。 你可以在 HTML 标签中直接插入十…...- 0
- 0
- 12
-
HTML5 placeholder美化input背景提示文字
CSS3 里提供了专门的规则属性来美化用 placeholder 实现的 input 输入框的背景提示信息。下面我们来看看如何用专用的 CSS 属性来美化具有 placeholder 属性的 Input 输入框。 CSS 代码 在火狐浏览器中的写法和在谷歌浏览器和 Safari 里的写法有些不同，但相信以后会统一。 /* 通用 */ ::-webkit-input-placeholder { co…...- 0
- 0
- 5
-
利用CSS3美化半个字符的实现方法
用 CSS 美化半个字符，就是把一个字符劈成两半，一半是 A 样式，一半是 B 样式。当然，大家都知道，不论是中文字符还是西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然有办法，这里需要的就是艺术。先看看需要的效果图： 左边是一种颜色，右边是一种颜色。如果是用图片做，这当然很容易，但图片有图片的局限性，…...- 0
- 0
- 4
-
DIV标签里面IMG图片下方留有空白怎么办
我们很多个人博客网站都会广告位投放一些图片广告，在网页设计中，图片是不可缺少的素材，但是在 div 标签里面放入 img 图片的话，有时候会在图片的下方出现一行空间的区域 如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会。 但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的。 由于广告位平时背景色是白色，所以从未关注过图片广告下方有空白。 刚才试着改变广告位背景…...- 0
- 0
- 27
-
网站加入鼠标滑过抖动样式
站长闲下来的时候，就四处逛逛网站，顺便扒点其他网站的代码，比如 html、css、js；都是站长通过 f12 或者 view-source 扒到的，有些代码很容易就能扒到，有些很难，比如今天分享的这个，扒了得半小时，才找到 css 具体代码！支持所有网站，wordpress、typecho、hexo 等等之类的。 代码说明： 该 css 代码，作用于 class 为 post-item 下 h2 …...- 0
- 0
- 7
-
手机网站实现左边弹出导航菜单点击一级分类展开二级分类
手机网站实现左边弹出导航菜单点击一级分类展开二级分类，下面介绍一下手机网站常见的左边弹出导航菜单，并且点击一级分类展开二级分类的功能实现方法。 HTML 代码： <ul id="topmeau" class="wap_menu hidden-md hidden-lg"><li class="current-menu-item me…...- 0
- 0
- 48
-
CSS 截取图片只显示部分图片
页面中需要在某个位置显示固定长宽的正方形图片，图片中有接近正方形比例但不是正方形，用 PHP 生成裁剪后的缩略图显然不合适，经过研究发现用 CSS 可以完美切割图片，经过测试 Chrome，FF，IE6-9 没问题。css 有一个 clip 属性可以剪切对象，对象 position 必须为 absolute。两张图分别为裁剪前和裁剪后的效果。 这个只是高度大于宽度的情况，如果这一批图片中还有一些宽…...- 0
- 0
- 8
-
代码实现给网站添加返回顶部功能
代码实现给网站添加返回顶部功能，瀑布流风格的网站开始流行之后，很多网站都出现了一个回到顶部的功能，对于瀑布流布局的网站来讲，这可以说是必须要有的一个功能，因为网站下拉了很长之后，需要返回顶部的时候，如果拖着滚动条去拉，那种麻烦相信大家都体验过。 对于非瀑布流网站来说，增加这种效果必要性其实不大，除非你的网站上文章很长，用户需要看好几屏才能看完。需不需要是基于用户体验上的考虑，咱在这里先按下不说，下…...- 0
- 0
- 21
-
DIV不确定高度内部元素水平垂直居中的方法归纳
总结当前知道的对 div 嵌套标签水平垂直居中方法，如果还有新的方法，请不吝赐教哦。好，下面开始列举代码咯。首先给需要实现水平垂直居中的两个 div 设置统一的样式： .styl { width: 100%; height: 300px; background: #ccc; margin: 30px auto; position: relative; border: 1px solid #000;…...- 0
- 0
- 25
-
原生态js方法实现全选复制功能
我的 demo 网站想做一个复制代码的功能，可是原生态的 js 只有 ie 下才能实现，其他浏览器都需要 flash 来实现复制功能，我又不想用 flash，鼓捣了很久，不能复制，我起码能做一个全选的功能吧。下面是复制的代码： function selectCode(objid){ var obj = document.getElementById(objid); obj.select(); } …...- 0
- 0
- 10
-
Firefox 火狐浏览器获得图片base64字符串的方法
base64 编码 是将数据用 64 个可打印的字符进行编码的方式，任何数据底层实现都是二进制，所以都可以进行 base64 编码，base64 编码 主要用在数据传输过程中（编码、解码）。而 Data URI 是将数据用 URI 的形式进行展现。常用的是将图片进行 base64 编码，用 Data URI 的形式进行展现，可以说，base64 编码后的字符串是某些 Data URI（这里就包括图…...- 0
- 0
- 15
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×