-
优化阅读体验网站全局字体CSS最佳写法
英文字体的文件大小比较小可以使用嵌入字体让网站展示更好，但中文就不一样了，文件大小是 MB 级别，为了 WEB 端性能，只好使用系统自带的默认字体，然而我们有 Windows 和 Mac OS 两个系统，这两个系统的默认字体是不同的，那么 CSS 中的 font-family、字体大小、颜色、行距如何设置才是最美、最好看的呢？作为网页设计师，对这方面也有所研究，下面是设计达人（公众号 ID：she…...- 0
- 0
- 1
-
巧妙利用CSS自动裁剪图像
页面中需要在某个位置显示固定长宽的正方形图片，图片中有接近正方形比例但不是正方形，用 PHP 生成裁剪后的缩略图显然不合适，经过研究发现用 CSS 可以完美切割图片，经过测试 Chrome，FF，IE6-9 没问题。css 有一个 clip 属性可以剪切对象，对象 position 必须为 absolute。 在 css 中，可以利用 clip 属性剪切图片，该属性用于剪切绝对定位的元素，当该元素…...- 0
- 0
- 3
-
纯CSS代码将整个网站页面变成黑白色整站灰色
对于南京大屠杀这样需要悼念的日子，一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。还有其他特殊原因（比如汶川大地震）对部分事件表示哀悼，所以需要把整个网站设置为灰色或者黑白…...- 0
- 0
- 3
-
常见CSS五种隐藏元素方式
今天微码盒分析下 CSS 隐藏元素，通常小伙伴们都会想到的一种方法就是设置 display:none，这是也是最为人所熟知并且是最常用的方法。 当然我也相信还有不少人想到使用设置 visibility:hidden 来隐藏元素，这种方式也是常用的方法，而且也有很多人知道两者的不同。 除了这两种方法，本文总结了四种 css 隐藏元素方式，具有一定的参考价值，比较了这几种“隐藏”元素方法的区别和优缺点…...- 0
- 0
- 9
-
网站侧边添加梅花飘落特效
给网站左右两侧添加梅花飘落特效，花瓣从空中飘落，想雪花一样非常漂亮，刚开始耍博客的时候，比较热衷于这些，其实就是给网站加上一些特效，稍微的美化下带来一点异样的感觉，如果看起来感觉还可以，并且有兴趣的话，那我们继续看下怎么操作： 步骤一 首先，在 body 中，添加一个 div，来放置梅花树枝的图片 <div id="meihua"></div> 步骤二 …...- 0
- 0
- 4
-
通过JS实现一键复制指定内容教程
经常会见到网站上各种“一键复制”的友好体验按钮，不局限于 code 的复制，这样友好的体验，方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制，毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。今天分享一个实用的功能，通过点击事件复制一段文本到剪切板，在网上找了一些，整理了一下，方便…...- 0
- 0
- 5
-
使用jQuery设置指定时间后页面元素隐藏
在网页上我们通常会使用弹出框或者悬浮框来对重要的信息予以展示，但有时候为了兼顾到用户体验需要让其指定几秒后自动消失，使用 jQuery 我们就能够轻松实现。我们一般会使用悬浮条幅、弹窗框等来向用户展示某些重要的信息，如公告、APP 下载提示条等。一般情况下，我们会设置相应的关闭按钮，但有时候我们设置其几秒后自动消失是不是更加人性化呢？使用 jQuery 可以轻松实现该效果，下面提供两段代码供君选择…...- 0
- 0
- 2
-
HTML5 placeholder美化input背景提示文字
CSS3 里提供了专门的规则属性来美化用 placeholder 实现的 input 输入框的背景提示信息。下面我们来看看如何用专用的 CSS 属性来美化具有 placeholder 属性的 Input 输入框。 CSS 代码 在火狐浏览器中的写法和在谷歌浏览器和 Safari 里的写法有些不同，但相信以后会统一。 /* 通用 */ ::-webkit-input-placeholder { co…...- 0
- 0
- 2
-
你是如何学会正则表达式的？
正则表达式在几乎所有语言中都可以使用，无论是前端的 JavaScript、还是后端的 Java、c#。他们都提供相应的接口/函数支持正则表达式。但很神奇的是：无论你大学选择哪一门计算机语言，都没有关于正则表达式的课程给你修，在你学会正则之前，你只能看着那些正则大师们，写了一串外星文似的字符串，替代了你用一大篇幅的 if else 代码来做一些数据校验。既然喜欢，那就动手学呗，可当你百度出一一堆相关…...- 0
- 0
- 3
-
半小时学会正则表达式（下）
这篇文章通过实现 5 个小功能，解决 2 个实际开发中遇到的问题，来讲述在 Java 中如何使用正则，让你半小时掌握正则表达式。 一、Java 中如何使用正则 Java 中正则相关类位于 java.util.regex 包下，主要使用 2 个类，如下： Pattern 类： Pattern 是正则表达式 regex 的编译表示形式 代码：Pattern pattern = Pattern.comp…...- 0
- 0
- 3
-
半小时学会正则表达式（上）
正则表达式（Regular Expression）在代码中常常简写为 regex。正则表达式通常被用来检索、替换那些符合某个规则的文本，它是一种强大而灵活的文本处理工具。正则描述了一个规则，通过这个规则可以匹配一类字符串。 如何学习正则？ 1、学习正则表达式的语法规则 2、练习使用正则并能解决实际问题 针对上面的每个点我会分别写一篇文章来说明，用最短的时间学会正则表达式。这篇文章讲述正则表达式的语…...- 0
- 0
- 1
-
使用CSS3实现酷炫的3D旋转透视
3D 动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack 官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D 动画必不可少。 1.CSS3 3D 转换的常用 API 介绍 首先先上一张 css 3D 的坐标系： 接下来我们来介绍几个常用的 api： 旋转 rotateX() rotateY() r…...- 0
- 0
- 2
-
图片懒加载 lazyload.js ( jquery.lazyload.js ) 使用详解
lazyload.js 既 jquery.lazyload.js，作者 Mika Tuupola 。2.0 版本后插件不再依赖 jQuery ，之前的版本是依赖 jQuery 的，之前的默认使用自定义的 data-original （可修改）保存真实图片地址，2.0 之后新版本使用 data-src 保存真实图片地址，另外，设置参数调整较多。 对于一些图片使用比较多的网站，可能网页加载会比较慢，同…...- 0
- 0
- 3
-
HTML+CSS+JS实现今天的日期和今天剩余的时间
使用 html+css+js 实现日历与定时器，看看今天的日期和今天剩余的时间。 哎，今天就又这么过去了，过的可真快。代码如下，复制即可使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…...- 0
- 0
- 3
-
CSS 文字加粗不影响整体宽度
在写 Tab 组件时（每一项的数据都从后台获取，width 宽度不定，使用 padding 隔开），下划线时通过计算每一项的宽度实现滑动效果，字体加粗标记当前项，且当鼠标 hover 时，对应项的字体也加粗，此时由于字体加导致粗宽度变化了，所以滑块位置也偏移了，想到用鼠标的 mouseenter 和 mouseleave 重新计算宽度，但是比较麻烦，有没有好的方法处理，使字体加粗不影响宽度的改变？…...- 0
- 0
- 17
-
CSS控制图片水平居中与垂直居中
一个网站上会有很多图片，在网站排版过程中，需要设置图片居中显示。通过 CSS 控制图片居中显示，包括水平居中与垂直居中。图片的水平居中比较简单，也比较常见。就是使用外边距 margin:0 auto 来控制水平居中: .cont img{display:block;margin:0 auto;} 要实现图片在一个区域垂直居中，需要设置图片所在区域的 DISPLAY 属性，把这个区域名转化成单元格，…...- 0
- 0
- 14
-
Pjax 无刷新加载页面基础示例
今天浏览了一些精美的前端页面，然后看见有些页面运用了pjax，让整个页面加载很快。之前很久就想去看看 Pjax 是怎么实现的了，今天就去了解了一下，然后懂得了他的运行原理。下面就来分享一下。 在两个不同的页面，把内容放在同一个容器当中，然后绑定本页的所有 a 标签，然后替换旧的容器的内容为新的内容。为了方便理解，我绘制了一个草图（画的不好，不喜勿喷）。 第一步 首先在页面引入 Jquery1.7 …...- 0
- 0
- 10
-
Firefox 火狐浏览器获得图片base64字符串的方法
base64 编码 是将数据用 64 个可打印的字符进行编码的方式，任何数据底层实现都是二进制，所以都可以进行 base64 编码，base64 编码 主要用在数据传输过程中（编码、解码）。而 Data URI 是将数据用 URI 的形式进行展现。常用的是将图片进行 base64 编码，用 Data URI 的形式进行展现，可以说，base64 编码后的字符串是某些 Data URI（这里就包括图…...- 0
- 0
- 4
-
如何给自己的网站添加WEB社交分享按钮
我们注意到，很多的网站都有 WEB 分享按钮，可以一键分享到很多的网站平台，如：分享到微博、微信、人人网等等。 以前我们做这种 WEB 分享按钮使用的是百度分享，但现在百度分享已经停用了。下面介绍另一种自己做网站时添加 WEB 分享按钮的方法。 方法/步骤 第一步：打平网页分享平台：http://www.bshare.cn/ 第二步：选择自己需要的网页分享样式，可以根据自己网站的需求选择按钮的大小…...- 0
- 0
- 5
-
PHP中判断一个字符串包含另一个字符串的方法
第一种方法：用 php 的 strpos() 函数判断字符串中是否包含某字符串的方法 if(strpos('www.weimahe.com','22vd') !== false){ echo '包含22vd'; }else{ echo '不包含22vd…...- 0
- 0
- 6
-
浅谈 CSS3 盒布局与弹性盒布局
在网页布局中，如果让让几个块状区域横向排列，常用的方法就是使用 float:left。但使用 float 属性时，会出现一些问题，例如浮动，并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 什么是 CSS3 盒布局 那么 CSS3 盒布局 display:box 就可以解决这样的问题，它可以不需要使用 float 属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与 C…...- 0
- 0
- 8
-
为什么添加Font Awesome图标有些不显示？
现在很多 WordPress 或 ZBlogPHP 主题都集成有个性化图标，比如 Blogs 主题就集成了 Font Awesome 图标，用户无需安装插件即可添加个性化图标，但是有些用户反馈说添加的图标有些显示有些却不显示。 其实这是因为 Font Awesome 版本问题。比如目前 Blogs 主题集成的是 Font Awesome 5.0.13 版本，现在 Font Awesome 在 20…...- 0
- 0
- 8
-
CSS 自定义浏览器滚动条样式
最近在使用 Chrome 浏览器访问 QQ 会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式，后来上网去查询了一下，然后得知该样式是可以通过 CSS 来设计的，于是就是自己捣鼓了一下。 该样式仅限于 Chromium 内核的浏览器，比如谷歌浏览器、QQ 浏览器、360 浏览器等等，非 Chromium 内核的浏览器则不会显示样式，例如火狐浏览器，欧朋浏览器等等。 CSS 元素 :…...- 0
- 0
- 5
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×