前端开发
徐念安
博客:https://geekmubai.com
展开
-
Bootstrap进阶
一、栅格布局0x1 栅格系统1、规则<@div class=”container”> 调试内外边距 对齐方式…row 默认12列具体内容放在列元素之内,列元素能成为row元素的直接子元素**2、布局基础col-md-x 占据几列offset-x 偏移x个列 相当于 margin-left嵌套 row元素只能嵌套在 col中 把父row 划分成12列...原创 2018-07-23 17:27:22 · 373 阅读 · 0 评论 -
移动响应式布局(一)
一、移动端基础0x1 Viewport1、介绍 移动设备上的viewport是指设备的屏幕上能用来显示网 页的区域,一般来讲,移动设备上的viewport都要大于浏览 器的可视区域。2、用法<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0...原创 2018-07-22 14:02:06 · 344 阅读 · 0 评论 -
display:box 属性
一、作用在元素上设置该属性,可使其子代排列在同一水平上,类似 display:inlineblock;。 目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支 持 , 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、 chrome/safari(-webkit-)。二...原创 2018-07-22 14:04:19 · 2250 阅读 · 0 评论 -
前端优化之资源压缩
一、基础知识0x1 浏览器请求过程 请求过程中一些潜在的性能优化点dns是否可以通过缓存减少dns查询时间?网络请求的过程走最近的网络环境?相同的静态资源是否可以缓存?能否减少请求http请求大小?减少http请求服务端渲染0x2 资源的合并与压缩减少http请求数量减少请求资源的大小二、资源压缩0x1 HTML压缩HTML代码...原创 2018-08-05 21:45:03 · 1378 阅读 · 0 评论 -
显示隐藏模块实现的几种方式
显示隐藏模块实现的几种方式网页结构:<style>body { width: 400px; margin: 0 auto;}.btn { width:50%; height: 30px;}#box { width: 200px; height:100px; background-color: red; ...原创 2018-08-01 15:26:06 · 2451 阅读 · 0 评论 -
前端优化之图片优化
一、基础知识 有损压缩——一张JPG图片的解析过程 png位数与格式png8 —— 256色 + 支持透明png24 —— 2^24色 + 不支持透明png32 —— 2^24色 + 支持透明 每种图片格式都有自己的特点,针对不同的业务场景选择不同的图片格式很重要jpg有损压缩,压缩率高,不支持透明png支持透明,浏览器兼容好webp压缩程度更好,在ios web...原创 2018-08-06 10:41:36 · 295 阅读 · 0 评论 -
前端优化之资源加载
一、CSS、JS的装载与执行html页面加载渲染的过程 特点: 1、顺序执行、并发加载 - 一个域名并发加载有限制,利用多个CDN域名 - 词法分析 - 并发加载 - 并发上限2、是否阻塞css head中阻塞页面的渲染css阻塞js的执行css不阻塞外部脚本的加载直接引入的js阻塞页面的渲染js不阻塞资源的加载js顺序执行,阻塞后续js逻辑的执行...原创 2018-08-06 13:55:09 · 1508 阅读 · 0 评论 -
搜索框动态显示联想内容
一、效果展示 网页HTML结构<div id="header-search" class="search fl"> <form action="https://s.taobao.com/search" class="search-form"> <input type="text" name="原创 2018-08-01 17:24:31 · 3377 阅读 · 0 评论 -
前端优化之本地存储
一、种类0x1 cookie因为HTTP请求无状态,所以需要cookie去维持客户端状态 过期时间 expirecookie的生成方式 http response header中的set-cookiejs中可以通过document.cookie可以读写cookie仅仅作为浏览器存储(大小4KB左右,能力被localstorage替代)cookie中在相关域名下面 ——...原创 2018-08-20 11:18:43 · 519 阅读 · 0 评论 -
Hexo + Github Pages博客搭建教程
前言一直以来自己都有书写文章的习惯,不管是收集资料还是表达自己的个人见解。最开始把资料都放在印象笔记里,但是印象笔记有个不好的点就是书写不方便,而且多设备登录不友好,需要升级账户。后来就搭建了一个WordPress站点,记录自己的点滴。慢慢的接触到了CSDN,也计划着在那里写博客。CSDN的编辑器有markdown版本,接触到了markdown就对其产生了好感。与此同时,我也将我的WordPre...原创 2019-02-07 23:08:22 · 434 阅读 · 0 评论 -
CSS度量单位rem、em、vw、vh详解
CSS度量单位rem、em、vw、vh详解 单位 说明 兼容性 em 相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化 良好 rem 相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+ vw 相对于视口的宽度...原创 2018-07-22 11:01:21 · 10231 阅读 · 1 评论 -
移动端左侧导航的实现
一、实现效果主页: 点击导航键: 二、实现方案0x1 CSS3+javascript方案1、实现思路 利用css3的transform变换 translate(x,y),translatex() translatey() transition过渡&lt;’ transition-property ‘&gt;:检索或设置对象中的参与过渡的属性&lt;...原创 2018-07-22 09:38:18 · 9609 阅读 · 0 评论 -
jQuery深入——动画、常用工具、JSON、Ajax
一、jQuery动画0x1 显示和隐藏元素1、带特效的显示隐藏show(duration[, easing][, callback])hide(duration[, easing][, callback])toggle(duration[, easing][, callback]) duration 过渡时间,fast(200ms)、normal(400)、slow(600...原创 2018-07-21 17:41:25 · 188 阅读 · 0 评论 -
移动响应式布局(二)
三、Flex弹性布局0x1 Flex概念1、弹性盒模型 它能够更加高效方便控制元素对齐、排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的。 2、变成弹性盒模型的步骤 Display: flex; 注:Display: inline-flex; 则父容器不会满屏显示,会变成inline的样式。0x2 Flex 容器属性[flex...原创 2018-07-23 17:28:33 · 167 阅读 · 0 评论 -
CSS中的路径裁剪样式clip-path
前面的话 CSS借鉴了SVG裁剪的概念,设置了clip-path样式,本文将详细介绍路径裁剪clip-path概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法 [注意]IE浏览器不支持,且低版本webkit内核浏览器需要添加-webkit-前缀【clip-...原创 2018-07-18 15:23:27 · 2104 阅读 · 0 评论 -
详解CSS应用(二)
三、CSS布局0x1 常用布局方式1.表格布局<table> <tr> <td class="left">左</td> <td class="right">右</td> </tr&g原创 2018-07-18 15:24:34 · 155 阅读 · 0 评论 -
雪碧图文字图标开发实战
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。雪碧图雪碧图实例:淘宝PC端将多张小图放至一张大图使用的时候,通过background-position调整显示的位置,如下图所示:雪碧图的使用方法使...原创 2018-07-18 15:25:44 · 890 阅读 · 0 评论 -
详解CSS应用(一)
一、HTML基础强化0x1 理解HTMLHTML是一个“文档”,描述文档的结构,有区块和大纲。 点此查看相关开源项目0x2 表单<input type="radio" name="radio1" id="radio1-2" /><label for="radio1-2">选项二</label>//关联的关键是ID原创 2018-07-18 15:26:24 · 574 阅读 · 0 评论 -
LESS使用教程
LESS使用教程第一章 LESS简介 第一节 变量第二节 混合第三节 嵌套规则第四节 函数 运算第二章 使用 第一节 客户端使用第二节 服务端使用第三章 语法 第一节 变量第二节 混合用法第三节 带参数混合第四节 嵌套规则第五节 运算第六节 作用域第七节 注释第八节 避免编译第一章 LESS简介 less是一种动态样式语言;为提高css应用的...原创 2018-07-19 13:51:26 · 3235 阅读 · 1 评论 -
详解CSS应用(三)
五、CSS预处理器0x1 优点嵌套 反映层级和约束变量和计算减少重复代码 Extend和Mixin代码片段循环 适用于复杂有规律的样式 import CSS 文件模块化帮助更好地组织CSS代码提高代码复用率提升可维护性0x2 安装LessLess的安装需要Node.js和npm支持,首先安装他们。brew install node //通过hom...原创 2018-07-19 19:14:07 · 159 阅读 · 0 评论 -
HTML5 拖放事件及对象
一、简介 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了draggable 属性为 true, 可直接拖放, 如果不想拖放这两个元素, 把属性设为 false 即可。 ...原创 2018-07-20 14:51:43 · 1910 阅读 · 0 评论 -
HTML5进阶——存储、拖拽、SVG、Canvas
一、HTML5储存0x1 LocalStorage和sessionStorage1、相同的使用方法使用 setItem 方法设置存储内容使用 getItem 方法获取存储内容使用 removeltem 方法删除存储内容使用 clear 方法清除所有内容使用 length 属性获取存储内容个数使用 key 方法获取存储字段localStorage.setItem('...原创 2018-07-20 19:36:14 · 3120 阅读 · 0 评论 -
Hexo主题casper使用教程
Hexo主题casper使用教程我看到的一个好的主题,对其中的部分代码进行了修改。原项目地址 https://github.com/xzhih/hexo-theme-casperDEMO https://blog.geekmubai.com特性文章封面图(在首页文章摘要上显示)文章特色图(在文章详细页面上置顶)自定义菜单自定义 favicon, logo, 头部背景, 作者头像...原创 2019-02-07 23:11:11 · 1509 阅读 · 0 评论