-
CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果: 背景图 + 伪类 + flite:blur(3px) CSS 代码 .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ backg…- 3
- 0
-
CSS 中 background 属性合并写法
上次写 CSS 样式时同时有 background-size background-positon 两个属性,但是我想合并成一个 background 来写,刚开始遇到了一些麻烦,怎么写都不生效。后面谷歌,我们应该这样子写: background:no-repeat scroll 0px 0px / 200px 29px rgba(0, 0, 0, 0); / 做分割 前面是 background…- 2
- 0
-
JavaScript中escape()、encodeURI()、encodeURIComponent()的区别
JavaScript 中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应 3 个解码函数:unescape,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。 语法 esc…- 3
- 0
-
网站加入鼠标滑过抖动样式
站长闲下来的时候,就四处逛逛网站,顺便扒点其他网站的代码,比如 html、css、js;都是站长通过 f12 或者 view-source 扒到的,有些代码很容易就能扒到,有些很难,比如今天分享的这个,扒了得半小时,才找到 css 具体代码!支持所有网站,wordpress、typecho、hexo 等等之类的。 代码说明: 该 css 代码,作用于 class 为 post-item 下 h2 …- 3
- 0
-
Jquery实现页面下拉滚动加载内容
最近要新写一个手机项目,感觉上面不是用得很舒服,然后就新写了一个,改动不是很大。 判断到底部 $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).height()) { alert("哦哦,到底了."); } }); 如果要实现拉到底部…- 8
- 0
-
纯CSS3实现手风琴风格菜单具体步骤
有朋友问我,我的 demo 里面的手风琴效果怎么做出来,看起来很漂亮,其实这个手风琴效果没用一点 js,全部用 css3 来实现的,菜单主要通过使用:target 伪类来实现,教程中我们主要通过使用伪类:before 和:target 来定义样式,使用:target 来实现菜单点击展开子菜单事件,希望你能够喜欢这个教程: 如何使用纯 CSS3 创建手风琴风格菜单呢,菜单主要通过使用:target …- 11
- 0
-
原生态JS的方法调用CLASS元素标签
最近研究起来原生态的 js 来,主要因为 jquery 太冗余了,拖慢了网站的访问速度,于是就写下了下面的这段代码来替换$(“.a1”)和$(“.a2”),希望对你们有用。 <html> <head> <title></title> <script type="text/javascript"> window.onlo…- 3
- 0
-
纯CSS实现小箭头的方法
我们大多数的小箭头都是用小图片来做的,这里分享一款用纯 CSS 写的小箭头,大家可以看看,以后会放出更多的 CSS 小箭头来供大家参考。 <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div cla…- 3
- 0
-
CSS3自定义webkit滚动条样式
默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条,故回头翻了一下 CSS3,还真能不用插件实现自定义滚动条的样式,Webkit 支持拥有 overflow 属性的区域,列表框,下拉菜单,textarea 的滚动条自定义样式。当然,兼容所有浏览器的滚动条样式目前是不存在的。内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过 css 伪类来实现对滚动条的自…- 8
- 0
-
超级有意思经典代码注释图
对于很多程序员来说,最讨厌别人不写注释。而有些人写出来的代码注释,通常拥有幽默搞笑的风格,看起来很有意思。网上收集了许多超级有意思的代码注释,有如来佛、草泥马等有趣的注释! /*** * .,:,,, .::,,,::. * .::::,,;;, .,;;:,,....:i: * :i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i. * :;..:…- 4
- 0
-
用纯CSS打造圆形图片旋转的方法
上次看到一个博客的 LOGO 图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现,我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗 H2 的图片。 然后把图片写成圆形。 height: 300px; width: 300px; border-radius: 150px; 2、将图片旋转 这里我们使用了动画…- 2
- 0
-
纯CSS绘制各种箭头方法
用 CSS 即可绘制出各种箭头,无需裁剪图片,甚至没有用到 CSS3 的东西。对浏览器支持良好。以前写过一片文章,我博客的评论框就是用箭头来实现的。原理非常简单,通过截取 border(边框)的部分“拐角”实现,几行 CSS 代码即可理解。 一个梯形 当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形: 三角形 当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形: 任意角度…- 2
- 0
-
如何在 JavaScript 中获取 CSS 值
有时候单独的使用 CSS 是不够的。您可能需要使用 JavaScript 控制 CSS 值。但是你如何在 JavaScript 中获得 CSS 值?有两种可能的方式,取决于您是尝试获取内联样式还是计算样式。 获取内联样式 内联样式是存在于 HTML style 属性(attribute)中的样式。 //HTML 代码 <div class="element" style=…- 2
- 0
-
HTML5中Canvas绘图各种基本图形的方法
canvas 是 html5 的一部分,当然他们说的 H5 也并不是 html5 的意思,只是表示在手机浏览器中,更侠义的是在微信浏览器中打开的酷炫的网页。曾几何时,我也觉得 canvas 真的酷爆了,各种什么烟花、酷炫的动画效果、canvas 游戏等,都燃烧着我学习的热情。后来通过学习,多看书,其实 canvas 并不复杂,要用到的东西也不多,大概整理一下: 1、绘制直线: 4 这…- 4
- 0
-
CSS3 文字边框 -webkit-text-stroke 镂空的字体
其实一直没用过这个属性,发现还可以有很不错的效果,就二行代码就搞掂,分享下 CSS 边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke 可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用 color: transparent 属性,还可以创建镂空的字体! 代码如下: h3 { color: transparent; -webkit-tex…- 3
- 0
-
HTML中调用返回上一页代码
<a href=”javascript :history.back(-1)”>返回上一页</a> 或者: <a href=”javascript :;” onClick=”javascript :history.back(-1);”>返回上一页</a> 如果是用按钮做的话就是: <input type=”button” name=”Submit…- 11
- 0
-
WordPress翻译中 __()、_e()、_x、_ex 、 _n 的用法
作为 WordPress 主题或插件开发者,创客云建议大家要掌握主题或插件国际化(I18n)/本地化的实现方法,WordPress 使用了下面几个函数来方便语言本地化: __() _e() _x() _ex() _n() 以上所列的函数是用来包含所需翻译的字符串的,根据字符串的不同参数和输出类型,需要使用不同的函数。相信有不少朋友还是不太明白这几个函数的区别和用法,下面就来详细说说。 __() 和…- 9
- 0
-
禁止移动设备长按拷贝
网页在手机上浏览时通常会碰到一个问题,就是不小心触摸时间过长就出现自带的拷贝等按键了(有些客户也需要屏蔽手机端复制功能),造成了不好的体验,下面就教你解决办法。 web 端,只需在 css 中加入代码就可以了 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-use…- 7
- 0
-
jQuery判断鼠标向上滚动并浮动导航
判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动。滚动的坐标值可以取窗口的 scrollTop。为啥会有这个需求呢?有没有发现在一国外的一些网站,当你向上滚动时,导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人…- 9
- 0
-
纯CSS3将彩色图片转换成黑白图片
通过使用过滤器我们能够不使用 photoshop 等图像软件或 js、php 等技术就可以进行各种图像处理。 最近到处看到有人在说 CSS3 的 filter 一直没有时间自己去测试这效果。 现在,CSS 过滤器已经被各种现代浏览器广泛支持,我们可以使用一些组合的方法,来制作跨浏览器的图像处理效果, 通过这种方法,即使是在 IE 浏览器中也能够正确的显示我们需要的图像效果。 今天终于抽出时间学习这…- 3
- 0
-
jQuery获取上传文件的名称类型大小
Web 开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。 通常情况下,当用户通过<input type='file>'标签来上传文件时,我们可以看到上传文件的名称。 HTML5 File API 为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作。 支持 File API 的浏览…- 2
- 0
-
图片垂直水平居中CSS实现方法
在前端开发制作中,图片垂直居中对齐是很常见的,有些是固定高度,有些没有固定高度,分享几种使用 CSS 实现图片垂直&&水平居中的方法,有些可能并不能兼容所有浏览器,大家可以自行选择: 方法一: html { width:100%; height:100%; background:url(logo.png) center center no-repeat; } 方法二: img { …- 5
- 0
-
HTML5 类名操作ClassList属性简介
常我们在操作类名时,需要通过 className 属性来添加,删除和替换类名。 因为 className 中是一个字符串,所以即使我们只是修改字符串的一部分,也要每一次都重新设置整个字符串的值。 如果一个元素有多个类名,要如何删除呢,jqeury 提供了 removeClass()这个 api,如果不用插件,自己封装,例如有下面的代码: <div class="name1 name…- 3
- 0
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分
我的优惠劵
-
¥优惠劵使用时效:无法使用使用时效:
之前
使用时效:永久有效优惠劵ID:×
没有优惠劵可用!