前端常用场景总结CSS/JS/插件（实用篇更新中...）

<div class="box box1"> <span>垂直居中</span> </div> .box1{ display: table-cell; vertical-align: middle; text-align: center; } .box2{ display: flex; justify-content:center; align-items:Center; } a链接禁止点击跳转 javascript:void(0);…

前端开发需要了解的JS插件

excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquery.tagcanvas.js 用途:构建tag云下载地址:http://www.goat1000.com/tagcanvas.php jquery.fullPage.js 用途:网站整屏轮番下载地址:http://www.jq22.com/jquery-info1124 案…

vs合并压缩css,js插件——Bundler & Minifier

之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier 这个vs插件下载地址:点我插件功能说明: 1.合并多个css,js,html文件为一个单独的文件 2.保存源文件自动重新组合. 3.压缩css,js,html文件等等...(其他我没用到,…

Sublime Text2格式化HMTL/CSS/JS插件HTML-CSS-JS Prettify

之前格式化用过JSFormat,今天在GitHub发现了一个比较好的插件HTML-CSS-JS Prettify,具体的地址https://github.com/victorporof/Sublime-HTMLPrettify,安装插件的话需要安装Node.js,具体操作如下: 1.官网下载Node.js,地址http://nodejs.org/download(本人电脑Win8 64) 2.Sublime中ctrl+shift+p,输入ip: 3.点击Install Package,然后搜索H…

bootstrap-全局CSS&js插件

一.全局CSS 1.概述 1. 全局CSS样式: * 按钮:class="btn btn-default" * 图片: * class="img-responsive":图片在任意尺寸都占100% * 图片形状 * <img src="..." alt="..." class="img-rounded">:方形 * <img src="..." alt="..…

值得H5前端学习的60个JS插件(含DEMO演示)

下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式元素.demo ScrollReveal- ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画.demo Bricks.js- 是一款超快的用于固定宽度元素的“砖石”布局生成器.demo ————————————————————————————————————————…

WEB前端性能优化:HTML,CSS,JS和服务器端优化

对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前端性能优化. HTML部分语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属…

Mikit前端框架，轻量级CSS&JS前端框架

Mikit CSS Framework Mikit介绍 Mikit是前端开发人员和前端设计师所喜爱的Web框架.Mikit的创建和设计旨在为前端社区提供最灵活而强大的CSS框架. 与许多其他网络框架不同,Mikit对于超级快速是非常好的引导和严谨的前沿,面向未来的Web开发. 基础模版使用Mikit,您可以设置您的Web框架,并在一分钟之内完成. 只需将此代码添加到您的网页,使基本模板立即生效. <!DOCTYPE html> <html> <head> <ti…

前端常用的几个js判断（二）

10.鼠标悬停(hover)切换 class 属性假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class 属性:$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });你只需要添加必要的CSS代码即可.如果你想要更简洁的代码,可以使用…

前端常用的几个js判断（一）

1. 禁止右键点击$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; });}); 2. 隐藏搜索文本框文字Hide when clicked in the search field, the value.(example can be found below in the comment fields)$(document).ready(function() {…

【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）

这个页面是在校参赛的小组项目,除首页和所有课程页面以外由组内成员编写,发博客纯属记录. 项目源码已上传至码云仓库:https://gitee.com/ynavc/sss 项目演示地址:http://ynavc.gitee.io/sss AAP端下载地址:https://download.csdn.net/download/weixin_44893902/13782751 目录项目源码已上传至码云仓库:https://gitee.com/ynavc/sss 项目演示地址:http://ynavc…

【WebStorm】前端工具开发利器webstrom专篇...更新中

http://my.oschina.net/maomi/blog/137807#OSC_h2_5 WebStorm混搭svn WebStorm混搭nodeJS webstorm简单介绍 webstorm设置技巧 webstorm使用心得 WebStorm集成git使用 WebStorm常用快捷键 webstorm快捷键说明 [亲身实测] WebStorm混搭svn WebStorm混搭nodeJS 以less和uglify-js为例如何用npm在root中下载模块 [网络转帖] webstor…

CSS效果集锦（持续更新中）

高亮光弧效果使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display:…

less.css基础学习，陆续更新中

//基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数内 //例子,创建赋值,然后计算等操作@num:20px;@numCount:@num+10px; //调用.div{ width:@numCount+70px; height:10px*@num; background-color: red; //当要获取当前这个对象时,使用如下: &{ padd…

css：使用笔记(不断更新中...)

1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置宽高就是inline-block . 本质inline-block :行内的块: 一特性,行并排显示,2,并支持宽高设定3,内容撑开宽度.只是宽度一问题1,多个inline的标签之间有间隙,宽度为字体(哪个字体?)大小的一半,设置字体16 间隙为8 20--10 解决:解决方案1 doyue解决方…

107个JS常用方法（持续更新中）

1.输出语句:document.write(""); 2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)6.一个小写转大写的JS…

CSS的进一步深入（更新中···）

在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样式 text (1)颜色 color:red/blue/pink/···: (2)文本对齐方式 text-align:left/center/right/…

CSS的初了解（更新中···）

在前面,我们学习了html的结构.基本骨架.起名方式和选择器,接下来,我们就要学习CSS了. 首先,我们要知道CSS是什么. CSS 全称叫层叠样式表,作用是给html添加样式style,添加属性. 在网页中(或者说在html)中如何嵌套style? 我们先来学三种嵌套样式: 1.行间样式将style当属性写在标签内,权重为1000 如: 2.行内样式将style当标签写在head之间如: (前面不知道style写在哪里的看看这两张图片,现在知道写在哪了吧) 3.把style当作css文件…

(实用篇)php中计算中文字符串长度、截取中文字符串的函数代码

在PHP中,我们都知道有专门的mb_substr和mb_strlen函数,可以对中文进行截取和计算长度,但是,由于这些函数并非PHP的核心函数,所以,它们常常有可能没有开启.当然,如果是用的自己的服务器,则只要在php.ini中开启即可.如果是用的虚拟主机,而服务器又没有开启这方面的函数的话,那就需要我们自己写出点适合咱自己的函数来了. 以下几个函数用起来颇为顺手的.不过要知道,得在utf-8环境下使用. header('Content-type:text/html;charset=utf-8'…

CSS的再深入（更新中···）

在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特征:根据内容的多少占用空间大小,它的上下margin不起作用 (块级:P h1- h6 div ul ol dl li···) (内敛:span img i b a em icon···) 有时,我们会使用块级标签,有时会使用内敛标签,但老是改标签是不是太麻烦了呢?有没有其它的方法呢? 答案是:有…

平时常用的Visual Studio操作技巧，持续更新中……

移除未使用的命名空间--方法1:右键--"组织using"--"移除未使用的using"--方法2:Shift+F10--"O"-"R" 格式化当前文档,让文档排列齐整--ctrl + K, D 注释--ctrl + K, C 取消注释--ctrl + K, U 满屏/取消满屏--alt + shift + Enter 生成当前项目--shift + F6 生成解决方案--F6 显示输出窗口--ctrl + W, O 显示&q…

Delphi - 手把手教你基于D7+Access常用管理系统架构的设计与实现（更新中）

前言从事软件开发工作好多年了,学的越深入越觉得自己无知,所以还是要对知识保持敬畏之心,活到老,学到老! 健身和代码一样都不能少,身体是革命的本钱,特别是我们这种高危工种,所以小伙伴们运动起来!有没有健身撸铁,体脂现在是多少呀?明年(2019/03/22)徐州的马拉松有没有报名呀!? 扯的有点远了,接下来我将抽三天时间手把手教你基于Delphi7+Access,同时搭配第三方控件RC.AlphaControl(第三方控件主要用于美化界面),完成通用管理系统架构的设计.骚年,想想是不是还有点小激动…

HTML + CSS （下）【更新中】

弹性盒子: 定义:弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案. 主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧版本的弹性盒子模型: 在之前,css3曾经推出过旧版本的弹性盒子模型.相对于新版本的弹性盒子模型而言,旧版本的内容与新版本还是有些出入. 而且,从功能上来讲,旧版本的弹性盒子模型远远没有新版本的盒子模型强大,从兼容性来讲,二者在pc端ie9以下都存在着兼容性问题,但是在移动端,旧版本的弹性盒子模型兼…

CSS相关知识（持续更新中）

1. 弹性布局一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. 选择器…

包学会之浅入浅出Vue.js：升学篇

包学会之浅入浅出Vue.js:升学篇蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 上一篇<包学会之浅入浅出Vue.js:开学篇>中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧,Go~ 需求背景组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上<qui-button>…

JeeWx全新版本发布！捷微二代微信活动平台1.0发布！活动插件持续开源更新！

JeeWx捷微二代微信活动平台 (专业微信营销活动平台,活动插件持续更新ing~) 终于等到你!还好我没放弃! 在团队持续多年的努力下,Jeewx微信管家和H5活动平台不断更新迭代,积累了许许多多的技术亮点和成功案例,而今天,集成了两者优秀基因的JeeWx捷微二代 H5微信活动平台诞生啦! 平台亮点:采用微服务架构支持插件式开发,可集成微信功能.微信营销活动.商城.网站.会员等各类插件:可灵活组合集成插件,支持热插拔:更专业的微信营销活动平台:支持大用户量.高并发支撑能力:活动插件不断…

web前端常用js插件

第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方法,通常只需放大截图区相应的倍数即可解决. 官网地址:http://html2canvas.hertzen.com/ 第二款:全屏滚动插件fullPage.js fullPage.js能让你迅速搭建拥有场景翻页效果的网页,可配置的属性方法非常的齐全,对于一些轻量级的H5页面来说可谓是一大利器. 官网…

【前端】Sublime text3 插件HTML/CSS/JS prettify 格式化代码

1.首先安装插件菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2.在代码界面右击->HTML/CSS/JS prettify->Prettify Code ,如果出现下图提示去node.js官网下载32位的相应的node.js, windows对应的 node.js 的传送门. 然后保证位置和set plugin option里面的一样就行了.…

api日常总结：前端常用js函数和CSS常用技巧

我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){…

工作中经常用到github上优秀、实用、轻量级、无依赖的插件和库

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会FQ,赶紧转行... 效果…

【前端常用场景总结CSS/JS/插件（实用篇更新中...）】的更多相关文章