- 博客(68)
- 收藏
- 关注
RSS订阅原创 【技巧】LESS CSS 框架简介
LESS 原理及使用方式本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：清单 1. LESS 文件@color: #4D926F; #heade
2017-06-12 11:45:24
662
原创 【技巧】当屏幕宽度更换时变换调用css
HTML代码如下：<div class="abc"></div>JS代码如下：<script> $(function(){ $(window).resize(function() { var ww = $(window).width(); if( ww > 1000 ){ $('abc').rem
2017-06-02 17:50:55
757
转载 【技巧】font-size:0清除display:inline-block元素换行符间隙
看别人的代码看到过font-size:0这个设置，不明白为何这样操作，后来研究一下才明白：这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：HTML代码如下：<div class="abc"> <div>a</div> <div>b</div> <div>c</div></div>CSS代码如下：.abc{ width: 9
2017-05-31 15:49:45
776
转载 【CSS3】纯css3悬停文字线条边框动画特效
演示效果如下：<!doctype html><html><head><meta charset="utf-8"><title>按钮悬停动画</title><style>html, body { color: white; background: #323232; font-weight: lighter;}h1, h2, h3, h4 { font-family: "Os
2017-05-24 10:15:25
2097
原创 【JS】可多次使用的jQuery tab选项卡
不多说了，看下面的代码吧！<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡代码</title> <style type="text/css"> /*通用样式*
2017-05-22 17:08:55
826
转载 【CSS】实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出
2017-05-17 10:31:15
2944
转载 【CSS3】浏览器前缀兼容写法
Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的C
2017-05-16 17:35:23
2178
转载 CSS文字左右两横线效果
演示效果：点我效果一：<style type="text/css" media="screen">#login_frame .with-line { width:300px;font-size: 16px; color: #999; margin: 0 auto; position: relative; text-align: center}#login_
2017-05-04 10:54:09
1257
转载 css字体大小设置em与rem的区别
em单位em是相对于父元素的，如果父元素没有设置字体大小，那就会追溯到body。比如如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元素box 的28px取代 rem 在说rem,因为他是相对于跟元素（html）,所以如果用rem，body里面写任何字体大小都没效果，只能写html在中，比如 设置了REM之后，字体大小只看html{}中
2017-04-26 17:58:03
624
转载 【问题&解决】fonts/fontawesome-webfont.woff2 404 (Not Found)
问题：虽然网页正常显示和运行，但是有2个字体文件出现404错误。像笔者这种强迫症是接受不了的。解决：因为笔者的服务器是虚拟主机，只需要在主机控制器平台添加对应的MIME类型即可。这样服务器就支持这两种字体文件，不会报错了。参考的解决方案文章全文如下：来源：http://www.yneit.com/2016/06/fontsfontawesome-webfont-woff2-404-not-found
2017-04-24 16:59:26
1116
原创 【原创】登录和注册页推荐 尊重原创 记得点赞
像小编这样一个比较少动脑筋的人，如果让我设计什么登录或者注册页恐怕要想半天，于是就想到了借鉴别人的设计来改改就是一个作品，下面看内容吧！登录页：1、http://gyl.zyred.com/（背景的云层会动-图片加了定时器）2、http://sso.corp.273.cn/（简单又不简单）3、http://vrm.dangdang.com/（当当网供应商服务平台）4、http://vbooking.
2017-04-17 11:56:32
1270
转载 SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央，不管您使用的是台式电脑，手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择，可以灵活控制。SweetAlert – 替代 Alert 的漂亮的提示效果在线演示 插件下载
2017-04-14 17:24:06
1313
转载 【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果：HTML代码如下：<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-widt
2017-03-17 17:24:46
6151
3
转载 【技巧】用console.table()调试javascript
演示效果：昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer） 介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。用CONSOLE.LOG()展示数组想象下你构造了如下数组var languages = [{ name: "JavaScript", fileExtension: ".js" },{
2017-03-17 16:25:30
748
原创 【CSS3】使用:not(:last-of-type)简化你的css代码
演示效果：第三个标题没有下边框以前写代码是这样：<style>.posts { list-style: none; margin: 0; padding: 0;}.post { border-bottom: 1px solid #eee; margin-bottom: .5rem; padding-bottom: .5rem;}.post:last-child {
2017-03-17 15:50:05
750
转载 【CSS3】用纯CSS实现加载中动画效果
演示效果：HTML代码：<div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div></div>CSS代码：body{background:#fff;}.pswp__preloader__icn {
2017-03-17 15:33:08
1746
转载 【CSS3】8款好看的纯CSS3搜索框
演示效果：全部代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="ht
2017-03-17 15:14:08
74515
12
转载 【技巧】css loading 加载中动画特效39种
演示效果如下图： HTML代码如下：<h1> CSS LOADERS</h1><div class="box"> loader-01 <div class="loader-01"> </div></div><div class="box"> loader-02 <div class="loader-02"> </div></div><div class=
2017-03-17 14:14:17
6820
1
转载 【技巧】鼠标移入图片各种酷炫效果
先看效果：HTML代码如下：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> </head> <body> <div id="mainwrap
2017-03-16 17:42:11
1932
转载 【技巧】Bootstrap3表格之实战
先来看效果：全部代码在下面：<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <meta name="viewport" content="in
2017-03-16 16:24:18
757
转载 【技巧】仿某宝网详情页宝贝放大镜效果
先来看效果吧：HTML代码如下：<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
2017-03-16 16:16:47
574
转载 【技巧】使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。观看演示1：点我视频作为网页背景的限制因素在动手编码实现前，视频作为网页背景的有些问题我们要先考虑清楚： 1
2017-03-16 11:40:09
1879
翻译 【技巧】百度地图搜周边
先来看效果吧：全部代码都在这里了…<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <
2017-03-15 18:24:40
888
1
翻译 【技巧】input选择图片预览
预览效果见下图：HTML代码如下：<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8" /></head><body><div class="content" style="margin-top:100px;height:200px;"> <
2017-03-15 17:55:45
5452
1
转载 【JS】鼠标移动方向插件
已经等不及了，咱们先来看下效果。。。HTML代码如下：<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, use
2017-03-09 15:42:19
950
原创 【技巧】各国时间显示
HTML代码如下：<div class="time"> <div class="tmInfo"> <ul> <li> <img src="/img/main/luoshanji.png"> <p> 洛杉矶 <b
2017-03-07 11:24:29
703
1
原创 【技巧】css之html样式能用 外部样式不能用
【技巧】css之html样式能用 外部样式不能用在编程的过程中，我遇到了一个少见的问题。 html中样式起作用，但是到了引用外部样式的时候就时效了，我分析了可能的原因：1、标签未关闭2、优先级较低3、声明编码格式不对4、结尾未加分号5、JS影响6、页面一开始声明就出错了7、其他说道这里，还有一种是最让人头疼的，那就是缓存。这点很有可能被忽略，这是我今天遇到的问题，希望大家能够平时细心一点，专业一点。
2017-02-23 10:03:22
2758
原创 【技巧】div超出文字隐藏并显示省略号
HTML代码如下：<div class="logisNews rt"> <div class="newsTitle"> <h3> <img src="img/icons/news.png" /> <span>新闻资讯</span> <a class="rt" href="#">更多>></a></h3>
2017-02-22 10:23:41
2786
原创 【技巧】带搜索的城市下拉
【技巧】带搜索的城市下拉<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>带搜索的城市下拉菜单</title><style type="text/css"> body{font-family:Arial, Helvetica,
2017-02-16 14:59:49
1292
转载 【JS】简单的民族下拉菜单
【JS】简单的民族下拉菜单<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>pro.html</title></head><body> <select id="national"> <option>请选择</option> </select> <script type="text/ja
2017-02-15 16:45:11
1120
转载 【案例】简单的js验证码
【案例】简单的js验证码<!doctype html><html><head> <meta charset="utf-8"> <title></title> <script src="js/code.js"></script> <style> .v_code{ width: 600px; margin
2017-02-14 17:24:26
358
转载 【技巧】最新最全的城市选择插件
【技巧】最新最全的城市选择插件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>城市三级联动 - citys</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" ty
2017-02-14 15:54:07
3922
原创 【表单验证】一个新手做的 大家多多指教
如果有什么不对的地方，请大家多多支持！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册-个人用户</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control"
2017-02-10 18:19:23
284
转载 【特效】挺不错的一个轮播图
使用前必看：图片换成自己的，样式调成自己喜欢的也可以，一般的项目够用了，如果图片有点多推荐使用插件 swiper，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> /*通用样式*/ html,body{
2017-02-10 16:38:03
1316
原创 【小工具】一个简单实用的jQuery手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴</title> <style> .wrap{ width: 200px;height: auto;margin:50px auto;border-radius: 5px } ul,li,h4{list
2017-02-10 12:11:49
256
转载 【小工具】原生JS的计算器
【小工具】原生JS的计算器<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>写给新手：js表单操作（四） 简单计算器（二）</title> <style type="text/css"> body {
2017-02-10 11:57:16
909
原创 【小工具】获取当前时间
【小工具】获取当前时间<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <div id="time"></div> <script type="text/javascript"> function time(){
2017-02-10 11:06:00
270
原创 【小工具】简单的倒计时（原生）
【小工具】简单的倒计时（原生）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>倒计时</title></head><body><div id="div"></div><script type="text/javascript">window.onload=clock;function clock(){
2017-02-09 18:08:42
960
转载 【小工具】简单的小钟表
【小工具】简单的小钟表<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>钟表</title> <style type="text/css"> body { background-color:#00A2D4;
2017-02-09 18:02:35
604
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人