- 博客(32)
- 收藏
- 关注
RSS订阅转载 无废话网页重构系列——（11）样式预处理与样式声明
样式预处理样式最基本的语法(Syntax)是Selectors { Properties:Values }，就是一个声明(Declaration)，告诉排版引擎：将我声明的选择器(Selectors)，按我的呈现规则(Rules)来渲染。面向设计稿书写完样式，日常最基本需求：如颜色或内外间距要修改、公用部分样式、层级嵌套选择器书写、组件化样式分割然后合并、兼容性前缀…，...
2018-04-27 13:33:00
157
转载 无废话网页重构系列——（12）最后
每篇写完，删了又删，只想再简单点、再少点，希望能快速看完，并能产生共鸣。Web重构，选择好基础的框架/库、模块组件，合理分布静态资源，处理好标签和属性语义，基于OOP分离分割各代码，注意样式声明方式，页面结构必能合理，性能必能得到提升，可复用性、可伸缩性、可维护性显然得到实现，各种优点和好处，都是前期统筹和规范操作带来的，让优良之处成为一种习惯，而不是刻意为之。毕竟最后的...
2018-04-27 13:33:00
172
转载 无废话网页重构系列——（10）组件结构
主干和栅格是文档的骨骼，内容依赖组件进行呈现。组件，主要是围绕交互体验对文字、图片、视频、表单等数据信息进行排版设计，以提供可复用、好维护、识别度统一规范的视觉呈现。框架中会提供丰富的组件，便于快捷开发功能型网页应用；展示型网页建议开发者平时多积累一些常用图文视频组件。通过module包裹组件，并设置各组件上下间距。123456789...
2018-04-27 13:32:00
158
转载 无废话网页重构系列
Web重构笔记(1): 为什么要写这个系列Web重构笔记(2): 来套Web重构装备Web重构笔记(3): Web重构前的分析Web重构笔记(4): 切图与标注Web重构笔记(5): 搭建工程目录Web重构笔记(6): 语义化Web重构笔记(7): 样式、结构、行为分离分割Web重构笔记(8): 主干结构Web重构笔记(9): 栅格结构Web重构笔记(10): 组件结...
2018-03-30 17:04:00
128
转载 批处理系列(17) - 导出环境变量
如果是换了计算机或更改了用户名，导出后的reg文件不可以直接点击运行导入，要编辑一下里面内容，用户名和软件路径可能都不一致。@echo offsetlocal enabledelayedexpansiontitle 导出环境变量 by：小可(xianghongai@gmail.com)set varTimeTemp1=%time: =0%set varTimeTemp2=%...
2018-03-20 14:20:00
345
转载 批处理系列
批处理系列(1) - 基础批处理系列(2) - 获取目录文件名或路径批处理系列(3) - 通过文本内容行创建文件夹批处理系列(4) - 通过文本内容行命名文件批处理系列(5) - 根据文件名自动创建目录存放文件批处理系列(6) - 批量替换文件名批处理系列(7) - 文件名操作(拖入文件)批处理系列(8) - 目录命名操作(拖入目录)批处理系列(9) - 提取所有子目录...
2018-03-15 12:45:00
108
转载 批处理系列(16) - 合并文本——加指定分割线
和将要合并的文本处于同一目录，然后执行。设定>>all.temp echo ========================================================================以及前后换行>>all.temp echo,，这里的,是空格，基础篇里有说。@echo offsetlocal enabledelayed...
2018-03-15 12:31:00
283
转载 批处理系列(15) - 右键菜单执行批处理文件
run a batch file at folder's context menu.add a right click menu action that runs a custom batch script.本篇无知识点，只是将前面写的，弄到右键菜单，方便随时调用。对以前批处理代码进行调整，主要是对进入的目录参数进行调整。这里要把一个批处理文件做两份处理：set "Handl...
2018-03-15 11:48:00
809
转载 批处理系列(13) -从视频导出高质量GIF图片
需要ffmpeg，配置ffmpeg到环境变量。保存代码到HQGIF.bat，与视频同目录，管理员权限运行CMDcd到此目标目录：HQGIF.bat input_video_name.mp4 output_gif_name 00:02:25 5 10 640 256调用的批处理 视频源 导出gif的文件名 开始时间 持续/结束时间 帧率 宽度 色彩数如果要导多个gif图片，可以先记...
2018-03-15 11:47:00
240
转载 批处理系列(14) - 路径/时间/字符切分等DEMO操作
结合本系列文章第一篇，看本文。本篇熟悉操作文件路径、时间，温习字符切分。路径@echo off@REM @Author: xianghongai@gmail.com:GTCONTINUE@echo 正在运行的这个批处理：@echo 完全路径[%%0]：%0@echo 去掉引号[%%~0]：%~0@echo 所在分区[%%~d0]：%~d0@echo 所处路径[%%~p...
2018-03-15 11:47:00
94
转载 批处理系列(12) -合并文本（交叉合并/除重复除空行/行首行尾加特定字符）
结合本系列文章第一篇，看本文。交叉合并两个文本文件的内容。@Echo Offtitle 交叉合并文本内容 by：小可(xianghongai@gmail.com):GTBegin@echo 默认合并目录下 a.txt 和 b.txt 两个文本文件到 c.txt，确定继续？(y/n)set /p GTConfirm=if "%GTConfirm%"=="y" goto G...
2018-03-15 11:46:00
409
转载 批处理系列(11) - 去除指定字符之前或之后的文件名
本篇熟悉"tokens=1-3 delims=.-"结合操作需要提前调整截取范围，分割字符，过滤文件类型，文件原名、新命名@echo offsetlocal enabledelayedexpansiontitle 去除指定字符之前或之后的文件名 by：小可(xianghongai@gmail.com)@echo 需要提前调整截取范围，分割字符，过滤文件，调整文件前后名rem...
2018-03-15 11:45:00
518
转载 批处理系列(10) - 批量剪辑音频
结合本系列文章第一篇，看本文。需要ffmpeg，配置ffmpeg到环境变量。应用场景：下载一个专辑的有声文件，音轨上固定时间有广告之类的插入，去除掉它。这里展示的是去掉开头部分。@echo off@REM @Author: xianghongai@gmail.comtitle 音频剪辑操作 by：小可(xianghongai@gmail.com)SETLOCAL ENAB...
2018-03-15 11:45:00
476
转载 批处理系列(9) - 提取所有子目录文件(拷贝/剪切)
结合本系列文章第一篇，看本文。应用场景：提取当前目录下所有子文件。拷贝模式@Echo OffSETLOCAL ENABLEDELAYEDEXPANSIONtitle 提取所有子目录文件 by：小可(xianghongai@gmail.com):GTBegin@echo 将以 复制 方式提取所有子目录文件，确定继续？(y/n)set /p GTConfirm=if "...
2018-03-15 11:44:00
1358
转载 批处理系列(7) - 文件名操作(拖入文件)
结合本系列文章第一篇，看本文。利用批处理对文件名进行操作。操作文件前应当对原文件有备份，因为Windows系统对文件名排序这块是02在1之后。@echo off@REM @Author: xianghongai@gmail.com@REM @Date: 2012-02-06mode con cols=100 lines=38color 02title 文件名操作 b...
2018-03-15 11:43:00
373
转载 批处理系列(8) - 目录命名操作(拖入目录)
结合本系列文章第一篇，看本文。利用批处理对目录名进行操作。@echo off@REM @Author: xianghongai@gmail.commode con cols=100 lines=38color 02title 文件夹操作 by：小可(xianghongai@gmail.com)SETLOCAL ENABLEDELAYEDEXPANSION:GTBegi...
2018-03-15 11:43:00
168
转载 批处理系列(6) - 多次替换文件名
结合本系列文章第一篇，看本文。保存本代码到多次替换文件名[便捷拖入].bat，将要改动的目录拖放在本bat文件图标上，按提示执行。@echo off@REM @Author: xianghongai@gmail.comtitle 批量替换文件名 by：小可(xianghongai@gmail.com):GTCONTINUEset /a count=%count%+1se...
2018-03-15 11:40:00
130
转载 批处理系列(5) - 根据文件名自动创建目录存放文件
结合本系列文章第一篇，看本文。应用场景：一个目录下有若干文件，但是，有一定规则，如有按年份命名，1998-001.jpg ~ 1998-xxx.jpg1999-001.jpg ~ 19998-xxx.jpg...这样，根据"tokens=1,* delims=-"切分字符串，并创建年份的目录，保存对应的所有文件。@echo off@REM @Author: xiangho...
2018-03-15 11:38:00
1038
转载 批处理系列(4) - 通过文本内容行命名文件
结合本系列文章第一篇，看本文。准备一个文本文件，里面是一行行即将要命名的文件名；准备一个要命名的目录文件；保存本代码到通过文本内容重命名文件.bat，执行按提示操作。@echo off@REM @Author: xianghongai@gmail.comtitle 通过文本内容重命名文件 by：小可(xianghongai@gmail.com)setlocal Enable...
2018-03-15 11:38:00
309
转载 批处理系列(3) - 通过文本内容行创建文件夹
结合本系列文章第一篇，看本文。要执行，准备一个文本文件，里面是一行行即将要创建为目录的目录名；准备一个空目录；保存本代码到通过文本内容行创建文件夹.bat，执行按提示拖相关文件和目录进去即可。@echo off@REM @Author: xianghongai@gmail.comtitle 通过文本创建目录 by：小可(xianghongai@gmail.com)echo ...
2018-03-15 11:37:00
410
转载 批处理系列(2) - 获取目录文件名或路径
结合本系列文章第一篇，看本文。要执行，保存代码到获取目录文件名或路径.bat，打开拖一个目录进去回车，按提示选择对应数字序数操作。@echo off@REM @Author: xianghongai@gmail.comtitle 获取目录文件名或路径 by：小可(xianghongai@gmail.com)SETLOCAL ENABLEDELAYEDEXPANSION:G...
2018-03-15 11:36:00
312
转载 批处理系列(1) - 基础
扫一遍，旨在认识，不在熟悉。.当前目录..上一层目录\根目录文件及目录路径：使用反斜杠\，不使用正斜杠/文件及目录路径：存在空格，使用双引号包裹路径不可用于文件目录名的字符：\ / : * ? " < > |需双引号包裹的字符：( ) [ ] { } ^ = ; ! ' + , ` ~ & 空格转义字符^需要转义的字符：^、<、>...
2018-03-15 11:35:00
123
转载 无废话网页重构系列——（9）栅格结构
页面由几个主干结构支撑和区分，主干结构(Site/Page)内部由多个区块(Section)组成的布局，区块作为弹性布局或定宽布局的钩子，可以实现通栏背景。区块内部则是栅格列(Grid)，格子列里是各模块(Module)和组件(Component)，各模块和组件可有边框、内外边距。栅格的实现：将区域按比例纵(Column)横(Row)划分成多个单元，各单元间距一致。关键的...
2015-07-20 17:23:00
82
转载 无废话网页重构系列——（8）主干结构
前面章节方法论，从本章节开始实践。布局中的层级关系，主要体现在主干结构、栅格结构、组件模块结构三部分，本篇讲主干结构。主干结构按级别分成“站点”和“页面”，即site和page。如电商或门户站点，站点有统一的头尾、悬浮挂件，站点有很多不一样的子站和栏目。站点主干结构12345678910111213141516171819<div...
2015-07-20 17:00:00
167
转载 无废话网页重构系列——（7）样式、结构、行为分离分割
Web重构工作主要是语义化排版文档信息，排版文档信息的最佳实现就是基于OOP分离分割结构、样式、行为。分离分割皆为解耦。分离，使HTML、CSS、JavaScript三基石职责清晰，HTML逻辑化内容，CSS视觉呈现，JavaScript承载控制、驱动、交互；分割就是模块化、组件化，对系统各业务各功能按一定粒度进行分割、解耦、独立处理，减少冗余，提升可靠性、统一性、复...
2015-07-17 17:38:00
103
转载 无废话网页重构系列——（6）语义化
语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。语义化实现方案有多种，如RDF、RDFa、Microformats、Microdata等规范，虽其复杂性、数据模型、属性类型等特性不尽相同，但都支持HTML5语言，项...
2015-07-17 09:45:00
90
转载 无废话网页重构系列——（5）搭建工程目录
Web重构搭建工程目录，即是合理分布项目静态资源。目录和文件名，只能是英文、数字和-字符组成，名称不宜过长和生涩，不加排序前缀，干扰阅读和查找文件名，层级不宜过深，这样便于后期维护调整，交付后端程序清晰明了。项目目录规划移动Web端 → Project-H5微信端 → Project-WeiXin桌面Web端 → Project-PCAndroid端 ...
2015-07-16 12:33:00
93
转载 无废话网页重构系列——（4）切图与标注
本篇讲从设计稿中提取基础资源和信息：切图与标注。合格的设计师，会使每个元素组基于矩形层，形成一个个单元，并做好图层分类及命名，不在‘组’上使用蒙版，按照栅格化模块化设计，考虑各组件的复用性、扩展性和兼容性。遇到不合格的设计师，那就把设计稿退回去，深入交流沟通。不建议设计师切图，因为要考虑到图形压缩格式、编码实现方式及图形替代方案。不要直接用Adobe Photos...
2015-07-14 11:54:00
106
转载 无废话网页重构系列——（3）Web重构前的分析
本篇讲重构前的分析。从“工作状态、工作环境和工作角色”和具体重构工作两方面分析。凡是经过考验的朋友，就应该把他们紧紧地团结在你的周围比较理想的工作状态：制定了各种设计和开发规范，各团队之间邮件、团队内部即时通讯工具或声波传输沟通，对已有的或将要孵化的项目和产品，或多或少会有参与和认识，较早的进入开发环境中，进行准备、分析和实施相关的思考。但也可能会是产品需求未确定和频繁变...
2015-07-13 16:50:00
111
转载 无废话网页重构系列——（2）来套Web重构装备
本篇主要从语言入门、规范、工具、构建、库、框架、版本控制等各方面展开，篇幅会有点长，涉及到的工具类，会另开博文详细介绍。另外说明Web重构是Web前端的开始，主要侧重Web页面，如实现布局与兼容，符合W3C标准规范，组件化框架化，实现页面视觉效果，提升代码的可维护性、可读性和性能优化。三生万物HTML、CSS、JavaScript 是为Web开发三基石。人类社会的...
2015-07-13 15:40:00
216
转载 无废话网页重构系列——（1）为什么要写这个系列
出于兴趣，选择从事Web重构工作，也非常幸运，能够将兴趣与工作结合在一起，既保证了公司和个人的收入，又能倒腾爱好。到目前为止，一直就职于中小型互联网公司从事Web重构开发，在项目与技术结合方面，比较幸运的是项目有“旧衣翻新”，也有“无中生有”，技术点是“无所不用其极”；当然，在小团队中会有较多局限性，姑且不说新项目以当前团队力量很难采用Angular、React这类技术，就是...
2015-07-10 17:43:00
84
转载 Media Queries 媒体查询常见设备断点
按需调整断点一、谷歌后摘抄的一部分媒体查询/*#region SmartPhones *//* SmartPhones */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}/* Landscape */@media only screen and (min-...
2015-06-11 14:03:00
244
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人