csdn_chenli-优快云博客

原创 jQuery实现简单的滑动导航

1.1 App滑动导航说明：这个例子主要是实现一条导航山只有两个选项的。1.适合用于移动端。2.滑动条的长度是选项内容的长度。1.1.1. 效果图 1.1.2. Html 滑动导航滑动到岗滑动到岗 1.1.3. Css

2017-05-22 15:59:26 2148

原创 sublime text 常用快捷键

sublime text 常用快捷键1.删除一行shift+ctrl+k2.选择列shift+ctrl+L,点击鼠标右键3.Ctrl + / ---------------------注释4.Ctrl + 滚动　--------------字体变大/缩小5.Ctrl + N-------------------新建软件右下角可以选择文档语法模式6.Ctrl + Shift + P -

2017-04-26 17:45:27 840

转载 Bootstrap免费字体和图标网站

来源：http://www.gbtags.com/gb/share/4489.htm?ref=myread最值得收藏的Bootstrap免费字体和图标网站如果你正在寻找Bootstrap图标，那今天的推荐对你而言绝对非常重要！在这篇内容中，我们把这套框架上的免费字体图标做了个整合(当然，以后还会不断的更新)。正如你所知，图标字体在一个web网页设计拥有很多优势：它们使用方便

2017-04-14 17:06:20 1247

转载 HTML实体符号代码

HTML实体符号被用作实现保留字符（reserved characters）或者表达键盘无法输入的一些常用字符（感谢阿里的提示）。在大多数浏览器中默认的字符集为ISO-8859-1。HTML实体符号使我们在网页设计中经常用到的，下面做了整理，以备速查。 HTML实体符号代码速查表来源：entitycode 翻译整理：CSS9.NET（提示：使用浏览器的前进后退键可在各选项卡浏览历史间切换

2017-04-10 17:32:14 1615

原创 sublime text3 字体大小的设置方法

sublime text3 字体大小的设置方法在使用sublime text3 时觉得字体太小，看的不是很清楚，眼睛不好很费劲。找打了解决方法。如下：1.首先打开你的sublimetext3 编辑器，在菜单栏选择“preferences >settings-user”(选项-设置-用户)，出现如下界面2.在对话框大括号中输入你需要的字体大小就可以如下：3

2017-03-29 10:37:35 42011 3

转载 Outlook.com 系列邮箱 POP3 及 IMAP 设置方法

Outlook.com 系列邮箱 POP3 及 IMAP 设置方法支持 Exchange ActiveSync 的应用有了 EAS，你可以立即获取电子邮件，以及在一个位置查看所有文件夹、日历和联系人。如果你的电子邮件应用支持Exchange ActiveSync，并且你需要手动配置它，则使用以下设置。服务器地址：s.outlook.com域名：

2017-01-13 11:16:16 49337

原创 jQuery设置div居中及实现遮罩层

jquer设置div居中级实现遮罩层这里主要讲遮罩层web前端开发，写网站静态页面时经常遇到些遮罩层和设置div（物体）居中。这里又我自己写的一个实例，提供参考。一、效果图效果图1：效果图2：这两张图片看是没有什么区别，可以说做起来可就没那么容易咯（这个问题我可是弄了半天呢。）第一张：内容比较少，只有获取浏览器的高度就可以var sW=

2016-11-17 17:59:46 8673 1

原创用sublime sever启动本地服务（手机访问电脑页面）

如果你使用的是sublime text作为编辑器。那么恭喜你，调试移动端的HTML页面，就不用那么难了。那就是使用sublime text的服务器插件：SublimeServer。使用该插件后，你就不需要启动tomcat这样的重型服务器了（主要是我个人认为tomcat启动慢，而且操作还比较复杂），就可以调试移动端的HTML页面。SublimeServer会启动一个轻量级的，静态的WEB服务器，

2016-11-15 18:03:43 5556

原创 sublime3 javascript代码自动提示插件及安装

sublime是一款很强大的代码编辑器，可以支持很多中语言的自动提示功能，这里面我们来介绍一下如何对javascript代码进行自动语法提示，借助于sublimeCodeIntel这款插件一、下载插件下载地址: https://github.com/SublimeCodeIntel/SublimeCodeIntel 进入到下载地址页面，会看到如下的界面：点击

2016-11-15 16:01:27 23628

原创 px自动转rem的插件适用于sublime

px自动转rem的插件适用于sublime因为电脑有装sublimetext，所以这次就介绍适用于sublime的px自动转rem的插件。下面我介绍一下，如何配置：1. 我们可以在GitHub上下载所依赖的文件；https://github.com/flashlizi/cssrem2. 打开Sublime Text，进入packages目录（Sublime

2016-11-02 12:46:28 5888

原创 css3中的display：-webkit-box的用法

css3中的display：-webkit-box的用法webkit-box1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。3.box-flex是css3新添加的盒子模型

2016-10-27 15:32:26 78537 1

转载微信公众平台开发：进入篇（Web App开发入门）

WebApp与Native App有何区别呢？Native App：1、开发成本非常大。一般使用的开发语言为Java、C++、Objective-C。2、更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。3、非常酷。因为native app可以调用iOS中的UI控件以UI方法，它

2016-10-27 13:51:37 9427

转载 js获取浏览器和屏幕宽高的信息

网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全

2016-10-12 15:28:49 355

原创 js实现下拉菜单

js实现下拉菜单效果图 1.主要是鼠标移入和移出事件2.鼠标移入显示下拉菜单3.鼠标移除隐藏菜单*封装hover事件*封装显示事件*封装隐藏事件base.js//伪类事件hover 鼠标移入、移除事件Base.prototype.hover=fun

2016-10-12 14:51:18 953

原创 js 封装获取class的值、添加class、删除class

在base.js文件的基础上继续封装js 封装获取class * 1.调整封装 * 2.设置获取innerHTML里面的值 * 3.设置获取CSS样式并且设置 * 4.获取某个元素并设置 * 5.获取某一区域的CSS（这里获取ID的区域）并设置base.js/*前台调用*/var $=func

2016-10-12 11:10:26 6590

原创 JavaScript基础入门封装DOM 连缀

JavaScript基础入门封装DOM 连缀适合初学者获取元素节点获取ID获取tagName获取Name设置这个只能是设置CSS样式，添加html方法，添加click方法等。封装的base.js//前端调用的对象var $=function(){ return new Base();}functio

2016-10-11 16:09:02 799

原创 JS事件封装函数，跨浏览器添加事件和删除事件

JS事件封装函数，跨浏览器添加事件和删除事件一、事件流事件流描述的是从页面中接受事件的顺序。1.事件冒泡冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发2.事件铺货捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开

2016-09-30 15:59:13 2473

原创 js 实现拖拽

JavaScript基础入门学习，实现移动拖拽。适合新手学习和参考。不足之处希望大神提出你宝贵的意见。一：实现简单的拖拽二：实现浏览器的兼容性。在拖拽的过程中不会超出屏幕，当你拖拽物体放在那里，就是那里。如果放在右下角，缩小屏幕是，物体不会被遮罩。实现效果：一、简单的实现拖拽一界面设计二设计效果由于我们弹窗的遮罩我们采用了c

2016-09-29 13:49:09 682

原创 js 实现遮罩层锁屏功能

我们需要对弹出的窗口进行强调突出表现，那么需要对周围的元素进行遮罩。并且周围的元素还不可以进行操作，又需要进行锁屏。最后我们需要对重复的代码进行封装。一界面设计效果图一效果图2二设置效果1.做一个遮罩层创建一个可以布满整个浏览器的div,将它z-index层结构设置为9998，而login弹窗的div设置为9999，高一层。

2016-09-26 17:02:06 6095

原创 JS 设置物体居中

对于js初级学习很有帮助。JS实现物体居中，触发发浏览器窗口时物体也居中。这里实现的是一个弹出登录框居中的一个效果。效果图1：点击登录页面，弹出登录窗口效果图2：登录窗口。点击红的X关闭登录框方法1.window.onload=function(){ //所有浏览器都兼容 //alert(doc

2016-09-26 14:25:40 2603

转载 Cass用法指南（一）

学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言

2016-07-29 14:58:50 4572

转载学习sass之安装sass

为什么使用Sass作为前端（html、javascript、css）的三大马车之一的css，一直以静态语言存在，HTML5火遍大江南北了、javascript由于NODE.JS而成为目前前后端统一开发语言的不二之选。只有css似乎成为前端开发的被忽视的角色了。Sass让css有了动态语言的特点，在初次学习css时，有时候同样的样式在不同的#或.中一次又一次重复的编码，有了Sass，在css

2016-07-29 14:25:02 359

原创 web前端面试题

前端开发面试题本文总结了一些常见前端面试（多数源于网络），希望阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等JavaScript部分要点：数据类型、面向对象、继承、闭包、插件、作用

2016-07-27 16:12:16 1128

原创 html5 canvas 绘制矩形，方法，线性渐变，径向渐变，透明等

canvas 绘制矩形，方法，线性渐变，径向渐变，透明1. HTML5 canvas属性1.1. canvas画图标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。1.1.1. 绘制矩形html

2016-07-25 15:55:05 12422

原创 html 文字竖排效果

废话不多说，看效果；实例一：实现这样的效果：文字是从上而下，从左向右。显示属性：-webkit-writing-mode：vertical-rl;writing-mode:lr-tb ; html code 文字竖排效果 .e_content h2.myGift{ widt

2016-07-14 17:35:52 19474

转载 div+css文章段落怎么竖排显示？

显示效果可以自动换行怎么做html code class="text"> class="tb-rl"> class="test"> 这里是文字标题本段文字将按照垂直从右到左的书写方向进行流动。

2016-07-13 13:42:25 1995

原创 css3 Animation ,transform,keyframess属性以及实例

现在前端的很多网站都有动态效果，banner图上的内容也是弹入淡出，不会js的小伙伴就学学Animation ,transform,keyframess属性吧非常实用。学了几天总结出来的内容就是一下几点。1. Animation 动画属性Animation-name:规定需要绑定选择去@keyframe名称Tweenedanimation的分类Alpha：谈入弹出

2016-07-08 17:01:37 1227

原创 transform(变形)和transform-origin(变形原点)-Css3演示

这是transform(变形)和transform-origin(变形原点)-Css3演示的一个工具，分享给大家。非常实用。图片想要什么样的效果点击效果设置区1：变形原点2：变形参数3：代码区4：效果预览区非常实用如上图的样式自动生成的源代码：-moz-transform:rotate(360deg) scale(0.8

2016-07-05 15:55:16 541

原创 css3实现字体的颜色渐变

css3实现字体的颜色渐变，记录一下，在些页面时有时会用到。效果图：html源码：金玉良缘css样式} .mTitle_main {width: 500px;height: 100px;background:#000000 ; } .mTitle_main h2{ width: 500px;height

2016-06-29 16:41:34 17219

转载 CSS3圆角圆边支持IE6-IE8浏览器

来源：http://xiaohu-yin.blog.163.com/blog/static/1476581420148263298881/感谢分享很是实用CSS3圆角圆边样式，支持各大版本浏览器，包括支持IE6-IE9浏览器的圆边圆角。本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的I

2016-06-29 14:31:42 1140

原创 FlexSlider插件的详情设置参数

FlexSlider是一个非常出色的jQuery滑动切换插件，它支持所有主流浏览器，并有淡入淡出效果。适合所有初级和高级网页设计师使用。使用FlexSlider 还要下载FlexSlider.js和FlexSlider.css一起使用刚学习的还没与完全弄清楚记录一下$(function () {$('.flexslider').flexslider({an

2016-06-22 18:07:25 1457 1

转载 HTML5之Canvas绘图——使用Canvas绘制图形

HTML5之Canvas绘图——使用Canvas绘制图形的基本教程HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。Canvas绘制一个加载的动画图片

2016-06-16 16:31:29 1170

原创 html页面的遮罩层以及提示加载中

在写网站时经常出现加载中，遇到加载遮罩层的页面。这是我自己写的一个遮罩层页面，记录一下，以便查看。如图：HTML 源码//加载的gif图片和提示文字加载中请稍后...... CSS 样式/*遮罩层 begin 2016-6-14 13:22:

2016-06-14 14:22:56 13044

原创 css样式写网页的遮罩层提示加载中

写页面经常会遇到写网页的遮罩层提示我加载中这是自己写的一个例子记录一下以便查看如图HTML 的源代码//加载的gif图片和文字 begin 加载中请稍后...... //加载的gif图片和文字 end!--灰色遮罩层 begin--> CSS样式

2016-06-14 13:58:22 1127

原创 web前端开发常用的几个js效果

web前端开发常用的几个js一.table换行奇数和偶数行不同的颜色二.input type=“text” 文本里面的默认字体颜色和获取焦点后的字体颜色变换三.iframe 自适应调用页面的宽度和高度源代码：实例1table换行奇数和偶数行不同的颜色 function load() {

2016-05-26 17:23:49 3310

原创 Echart 的实例

这是我自己做的一些实例有Echarts 部分属性的注释学习网站：http://echarts.baidu.com/index.htmlECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直

2016-05-26 15:47:20 5594

原创相应试web设计之css3 media

Media Queries，作用就是其允许我们在不改变内改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？备注：（用于不同屏幕的分辨率）例如：适应小的分辨率例如：适应

2016-05-25 15:42:35 571

原创 ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法

ECharts 框架的 bar 统计图ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法一共有三种，先上图：第一种：第二种：第三种：以下是源码： // 基于准备好的dom，初

2016-05-18 16:49:59 12477 2

转载 Box Shadow(阴影)-Css3演示工具

来源：http://www.css88.com/tool/css3Preview/Box-Shadow.html谢谢分享

2016-05-11 18:44:24 658

转载 Box Shadow(阴影)—Css3演示工具

来源：http://www.css88.com/tool/css3Preview/Box-Shadow.html

2016-05-11 18:41:54 456

空空如也

空空如也