- 博客(77)
- 资源 (17)
- 收藏
- 关注
原创 Chrome web 开发用到的插件
现在设我是一位web开发人员,以Chrome为阵地。下面是一些能让我少花点时间的工具:WhatFont —— 名字就说明了一切。这是找出你最喜欢网站使用的字体的简单方法,这样你就可以为己所用了。Pesticide—— 修改CSS的绝佳程序。当我试着学习匣子模型的时候,它简直就是救命稻草般的存在。Colorzilla ——用于复制确切颜色的一个网站,用它可以将颜色直接复制到剪贴板上,这样你...
2018-07-29 10:40:16 3705 3
原创 CSS换行和不换行
强制不换行div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;}
2018-09-12 14:39:21 5448
原创 less学习——注释
CSS 形式的注释在 LESS 中是依然保留的:/* Hello, I'm a CSS-style comment */.class { color: black }LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:// Hi, I'm a silent comment, I won't show up in your CSS.class { col...
2018-09-01 16:24:06 405
原创 less学习——作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.@var: red;#page { @var: white; #header { color: @var; // white }}#footer { color: @var; // red }...
2018-08-27 12:42:08 598
原创 less学习——命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover...
2018-08-27 12:40:39 228
原创 less学习——Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:lighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* th...
2018-08-22 12:43:41 11453
原创 less学习——运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:@base: 5%;@filler: @base * 2;@other: @base + @filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;LESS 的运算已经超出了我们的期望,它能够分辨出颜色和...
2018-08-22 12:40:31 2624
原创 less学习-嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:#header { color: black; }#header .navigation { font-size: 12px;}#header .logo { width: 300px; }#header .logo:hover { text-decoration: none;}在 ...
2018-08-16 18:54:21 2567 1
原创 less学习-模式匹配和导引表达式(带参数混合2)
有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:.mixin (@s, @color) { ... }.class { .mixin(@switch, #888);}如果想让.mixin根据不同的@switch值而表现各异,如下这般设置:.mixin (dark, @color) { color: darken(@color, 10%);...
2018-08-14 08:54:55 1628
原创 less学习-带参数混合
在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;}然后在其他class中像这样调用它:#header { .border-ra...
2018-08-14 08:49:35 3750
原创 复制网页内容自动添加版权信息
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2018-08-10 11:04:01 1491
原创 less学习-混合
在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样...
2018-08-09 18:03:41 755
原创 less 学习-变量
很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header { color: #6c94be; }甚至可以用变量名定义为变量:@fnord: "I am fnord.";@var: 'fnord';content: @@...
2018-08-09 17:45:57 886 1
原创 h5拨打电话
需要拨打电话的地方:<a href="tel:10086">10086</a>发短信:<a href="sms:18688888888">发短信</a>js调用<button onclick="c
2018-07-31 12:31:53 4332
原创 SEO之图片优化八大技巧
近段时间百度搜索结果一个重大的改变就是展现图片,从这可以看出百度对图片附加的权重比以前更高了,图片的优化变得很重要。下面我分享图片优化的八大技巧,总有一个你不知道的方法。 1,图片的尺寸和大小 图文并茂是百度和用户喜欢的形式,但运用图片的时候应注意图片的大小和尺寸。百度在搜索结果页展示图片的时候,实际上不是所有页面有图就给出显示,展示图片的一个规则就是图片大小接近121:75,...
2018-07-31 10:37:50 2180
原创 最肤浅的利于seo 网站编辑(img标签alt属性)
图片img标签alt属性对seo有影响! 1.图片alt属性标签可以用来告知搜索引擎,这张图片放在这里是与文章主题相关的。搜索引擎会把图片的图片(img)alt属性标签是一个可信任的标杆。有些图片一看就知道什么意思,但是有些图片就不那么明显了。所以,有时,如果没有图片(img)alt属性标签,会导致用户不明白该图片代表着什么,为什么放在这个网页。当网速不给力的时候或者图片无法显示,图片alt...
2018-07-31 10:03:21 2623 1
原创 Chrome浏览器强制刷新页面(不使用缓存)
在Chrome浏览器中按下F5或 Ctrl+F5 都没用,Chrome总是会强制使用页面缓存进行刷新,如何不使用页面缓存进行刷新?Chrome官方推荐使用如下快捷键,就可以不使用页面缓存进行刷新 Windows和Linux操作系统: Shift+F5 或 Ctrl+Shift+R Mac OS: Cmd+Shft+R如果上面方法没有效果,可以按下F12(Windows) 或 Cmd+O...
2018-07-31 09:39:48 37353 1
转载 css 居中几种方法
记录下好文 https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
2018-07-28 17:01:10 1374
原创 animate stop带参数详解
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script> $(document).
2018-07-22 15:03:28 2303
原创 分享一个canvas代码2
HTML5 Canvas粒子效果文字动画特效DEMO演示展现地址:http://csdn.fubohan.cn/20187/
2018-07-18 17:43:08 1261
原创 js 怎样判断用户是否在浏览当前页面?
可以通过document.hidden属性判断当前页面是否是激活状态。兼容性:IE10+,Firefox10+,Chrome14+,Opera12.1+,Safari7.1+ 兼容性写法示例:var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkit...
2018-07-15 13:12:48 2563
原创 js判断是否是pc端打开还是手机端打开
根据浏览器头判断是使用神马设备打开的网页 <script type="text/javascript"> function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|u...
2018-07-15 13:03:55 1778
原创 js中写文档write和innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.in...
2018-07-15 12:54:43 1703
原创 h5获取当前浏览器ip和城市名称
直接4行代码搞定 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/javascript">
2018-07-10 14:41:28 8971
原创 input 属性placeholder 默认值颜色修改
input::-webkit-input-placeholder { /* WebKit browsers */ color: #fff;}input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff;}input::-moz-placeholder { /* Mozilla Firefox 19+...
2018-07-04 11:05:31 3357
原创 随机颜色
function bg1(){ return '#'+Math.floor(Math.random()*256).toString(10); } function bg2(){ return '#'+Math.floor(Math.random()*0xffffff).toString(16); } functi...
2018-07-01 14:13:30 1502
转载 鼠标移到图片上图片放大
一在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。<!DOCTYPE html><html><head><meta ...
2018-06-29 17:09:05 2571
原创 h5 meta标签大全
<!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta charset=’utf-8′> 声明文档使用的字符编码<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=...
2018-06-24 12:51:19 2125
原创 禁止百度,神马,搜狗等搜索引擎转码
百度第一种,HTTP Response中显式声明Cache-control为no-transform。 第二种,meta标签中显式声明Cache-control为no-tranform,格式为: <meta http-equiv="Cache-Control" content="no-transform " /> 神马第一种. HTTP Response中显式声明...
2018-06-24 10:55:56 8355
原创 文件下载
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;head runat="server"&
2018-06-16 12:51:47 969
原创 前端页面兼容性问题学习
2018.6.16 端午节开始笔记说道前端页面兼容问题,首先应该了解,通过同一网站怎么判断打开用户是手机端还是pc端,这是前端页面兼容问题前提。 写到这里我想有人这样说,根据屏幕大小判断是否是手机还是电脑,这个我不否认可以,但是现在我说的是另一种方法。Navigator对象 首先来了解一下Navigator 对象,Navigator 对象包含有关浏览器的信息,下面的userAgent...
2018-06-16 12:13:24 2580
原创 分享一个canvas代码
首先需要已入jquery&lt;script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;然后直接运行&lt;canvas id="canvas" width="1349" height=&q
2018-06-13 12:39:52 1606
原创 自适应实用方法
网页设计最常用的单位是px,与之相对应的rem,能够对设置好的宽高进行自适应,所以在网页显示上面应该找准body上面设置字体等的px,以用来应付单位大小。 下面是根据屏幕宽度自适应设置字体大小的js (function() { setFontSize(); function setFontSize() { var html = d...
2018-06-13 12:34:59 856
apache-tomcat-7.0.70-windows-x64.zip
2016-07-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人