css

inline&block&inline-block

本笔记主要来源于这篇文章,w3school-cn-display,mdn-en-display还有我的一些想法杂糅而成,另外这是我自己写的一个Demo,大家感兴趣的话都可以打开来看看.在进入正文之前,做一些说明.今天的主题是比较display主要的三个属性值block,inline,inline-block.其实display还有flex,inline-flex,grid,
业界 2016年07月06日

H5项目常见问题及注意事项

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一个数字，可以带小数// min
业界 2016年07月06日

[譯] scroll-behavior 滑順的捲動效果

眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。在過去這樣的效果通常會透過 jQuery 來達成，但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。最新的 Javascript 提
业界 2016年07月06日

SASS 学习笔记

基础知识这部分内容摘自 Sass Basics。预处理 Preprocessing预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文件，可以对单个文件进行预处理，也可以对指定目录进行预处理，还可以对指定目录进行实时监控，基本语法如下：sass input.scss output.csssass --watch app/sass:public/stylesh
业界 2016年07月06日

个人Web前端开发切图PS设置

(一) 文件新建设置画布大小 Web(1920×2000) 像素分辨率(R) 72 像素/英寸颜色模式 RGB 8位背景内容（透明）（二） 移动工具设置自动选择不要勾选，右边选择图层需要选择图层时，在PSD上面Ctrl + 鼠标左键点击（三）视图与窗口设置视图-显示-智能参考线勾选标尺勾选窗口-库、颜色关闭窗口打开信息、字符，右上角关闭属性、段落点开信息面板设置，标尺单位改
业界 2016年07月06日

window.devicePielRatio 独立像素比（经典文章+原创）

设备像素/物理像素设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。屏幕密度通常以每英寸有多少物理像素来计算（PPI）。独立像素/CSS像素CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下，
业界 2016年07月06日

使用resume-master快速制作简历

About this reporesume-master 是一个简历生成器项目，该项目从json中读取数据，可部署到github pages 在线浏览，也可生成pdf格式简历。该项目使用Handlebars + LESS + Gulp进行构建，只需在resume.json中填入你的个人信息，然后在终端执行几个命令行即可快速构建属于您的个人简历。DEMO：http://haw
业界 2016年07月06日

现代化的前端开发工具与流程

先列出部分，一点点把每条的坑填上，写文章。保真图设计阶段考虑响应式栅格与常用布局 篇SASS 语法 篇Node 在前端领域的基础知识 篇使用 Gulp 与各类工具（browerSync、styleLint） 篇HTTP & Restful API Style 篇如何现代化地使用图标（icon）篇CSS 布局（float、position、flexbox） 篇CSS 过渡与动
业界 2016年07月06日

CSS in 2016

Slide 幻灯片原址： http://christianvuerings.github.io/presentations/css-2016/ 文内资源： CSS-Tricks - A Complete Guide to Flexbox CSS-Tricks - A Complete Guide to Grid CSS-Tricks - Using SVG CSS Work
业界 2016年07月06日
加载更多