1.通过ID获取元素 document.getElementById(“id”)
浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
1、可设置要录制屏幕的宽高,支持右下角直接拉动改变. 2、可设置变宽的宽度 3、可设置录屏控件的背景颜色 4、可设置录制的帧数 5、录制区域可自由拖动选择
在平时的写作过程中，经常需要将一些操作动作和效果图截图成gif格式，使得涵盖的信息更全面更生动，有时候可以将整个操作过程和运行效果录制成MP4，但是文件体积比较大，而且很多网站不便于上传，基本上都支持gif动图，一般一个5秒左右的gif，800*600分辨率，可以很好的控制在500KB内，这样就比较完美的支持各大网站上传动图。 最开始使用的是ScreenGif.exe，用了很久，感觉还可以，后面一个朋友推荐用LICEcap.exe，体积更小，压缩比更高，再到后来发现有个gif.h开源的类，调用其中的方法可以实现将多张图片合并到一张gif中去，而且还是跨平台的，本人亲自在WIN+UBUNTU测试成功。 最初的代码是倪大侠给的，我在此基础上重新完善了下，使得可以直接拖动窗体大小来改变录屏区域的大小。增加了对Qt4和其他编译器的支持。 控件集成在自定义控件大全中，目前已经有133个控件。 完整源码下载：https://download.csdn.net/download/feiyangqingyun/11090665
我们如果使用过ppt、keynote，元素的小控件一定少不了，可以实现修改修改宽高和位移，大概是这样
offsetwidth是包括border、padding等，即盒模型尺寸。（所以遇到offsetWidth和border同时出现的时候要考虑一下会不会导致出错） 一个小实验 当div宽高200px，border为1px的时候，在给div添加一个变窄的定时器事件的时候，使用语句：div.style.width = div.offfsetWidth -1+‘px’，会发现，div在变宽。 究其原因：style.width为200是毋庸置疑的，可是，offsetWidth却是（200+1+1）=202，所以在第一次语句执行之后，style.width = 202-1+‘px’=201px;这就是div变宽的原因，接下来的第二次第三次执行以此类推。
B 中左右出现的黑边 , C 中上下出现黑边 , D 中四周出现黑边 , 都不能出现 ;
本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
因为一级菜单我是用ul li来做的，虽然ul是块级元素（display: block;），但是lidisplay: list-item;，多个是一行一行显示的
快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScript去操作HTML元素和CSS样式
开门见山，本文介绍响应式的瀑布流的实现方法。 最终效果图如下，改变浏览器大小效果更棒哦~ 以下我们将每个瀑布流盒子简称为box 使用数组记录每个box宽和高 ---- 设置不同屏幕宽度下每一行box的数量 使用$(window).width()获取屏幕宽度 根据不同屏幕宽度设置每一行box的数量 得到每个box的宽度 这里使用最傻的方法计算，有待优化 1 2 3 4 5 6var num = 4; //每行box数量 if ($(window).width() <= 500) num = 1; if
HTML5学堂：在页面开发中经常会借助JS来书写大量的特效，以获得较好的页面感官效果。但是真正到了使用JS来操作的时候，往往会因为思维逻辑不清晰而显得很凌乱。同时为了避免JS对页面的性能产生影响，我们今天就来尝试下不借助任何JS，转而使用CSS3过渡来书写出更好的动画效果。 本文主要内容 一、Transition是什么 二、Transition的语法 三、Transition的属性值 四、Transition的使用 五、总结 一、Transition是什么 W3C标准中对CSS3的transition是这样
在 Container 组件 一文中，我们知道它存在的价值是：整合如下 8 个单子组件，这样通过一个 Container 完成多种功能。可以避免在使用是层层嵌套，简化代码结构。而 AnimatedContainer 就相当于一个加强版的 Container ，可以让其中的各个属性在变化时具有动画效果。
浏览器从输入地址到显示页面的过程，这是面试特别喜欢问的一道题，也是基础的一个概念。到现在，网上能找到的也都是很老的那一套，早之前我的认知也是那样：
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例，如下图： 现在对里面的元素布局进行一个分析： 一个全屏的背景图 ”往届回顾“定位在左上(left, top)，IMWeb.io 文字及向上箭头定位为中下(center bottom) 发光的地球水平铺满，垂直方向定位为bottom 中间的其他内容定位参考就是中间了 内容
按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。
随着越来越多的设计团队使用Sketch构建UI界面，这颗金光闪闪的大钻石已成为众多UI设计师的标配，设计生产力被极大地解放出来。而且在组件化设计、响应式设计、团队协作、样式管理等方面越来越发挥着不可代替的作用。
当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath
在浏览网页的时候，经常会遇到一些404的网页，一般来说都是很简陋的布局，但是最近发现了一个超炫酷的404页面，自己也学着做了一个，下面一起来学习一下怎么制作吧！
两个 angle 的弧度值范围为 [0, PI*2)，方向为顺时针，基准方向为正右（对应向量为 (1, 0)）。
最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是
最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等。反正挺实用，值得收藏！
window.pageXOffset和window.pageYOffset，包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离。
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。
作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用，可以针对
要学好一门技术，最好的方式就是实践。上面这样一个代码图片生成器，就是当初为了学习 React 技术开发，特地找的一个功能不是很复杂，但是涉及的技术点又不至于太单一， 于是找了这样一个工具型的项目（UI 参照 ray.so[2]），代码从零开始实现来检验自己学的知识是否牢固。
将picture元素和srcset,sizes属性纳入html5规范，新规范意在解决：
最近在整理前端知识体系，怎么可以少了布局这一环呢？先问大家一个问题，如果让css只保留一种布局，留下来解决前端布局问题？你会选择那个布局呢？如果问我，我会选择 网格布局，根据二八原则，网格布局基本上可以帮助我解决 80% 的布局场景，颇有一套布局打遍天下布局的气势，因此非常值得一探究竟。
Python简易图片疲批量压缩程序 说明 运行环境：Win10 Pycharm 程序没有用到面向对象编程方法，只是简单的面向过程设计 用到的模块：PIL、os、sys 使用方法： 在Pycharm的terminal中输入”python xxx.py source_dir dest_dir”就可以把source_dir中的图片文件进行压缩并保存到dest_dir中 源码 from PIL import Image import os import sys # 定义可以识别的图片文件类型，可以自行扩充 val
HTML中，要修改img元素定义的图片的大小，且是等比例缩放，不改变宽和高的比值，那么可以采用只设置img元素属性中width和height中的任何一个，不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。
在平时的写作过程中，经常需要将一些操作动作和效果图截图成gif格式，使得涵盖的信息更全面更生动，有时候可以将整个操作过程和运行效果录制成MP4，但是文件体积比较大，而且很多网站不便于上传，基本上都支持gif动图，一般一个5秒左右的gif，800*600分辨率，可以很好的控制在500KB内，这样就比较完美的支持各大网站上传动图。
click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效，而且同一元素不能同时绑定click和dbclick事件
top命令提供运行系统的动态实时视图，其可以显示系统摘要信息，以及当前由内核管理的进程或线程的列表，显示的系统摘要信息的类型以及为任务显示的信息的类型、顺序和大小都是用户可配置的。
本博客所有文章如无特别注明均为原创。作者：十月梦想 ，复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《HTML的行元素和块元素》
进度条一直以来都是很多地方都可以用的，那么很多的时候其实我们都是自己在网上找代码，直接使用的，很少有人自己写源码的，今天呢我们就简单的实现一个进度条的效果，没有做美化，喜欢做美化的可以自己做一下美化。
CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。
据Adobe公布的统计数据显示，如果App设计或布局没有吸引力，38%的用户将直接退出。这类统计数字在提醒设计师们，用户体验是头等大事。而凭借简洁、干净、方便的框架，单页面布局最近在设计中非常受欢迎。单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验，特别是在应用在屏幕可自由切换的折叠屏手机上时
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单，但是某种特殊效果看似简单，实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧，一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们，重新燃起对前端排版和特效的热爱和热情！1. 固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
