一半设计一半前端

这是上前端开发系统课的第一阶段，讲完浮动和定位之后的一个小项目。仿站酷我的首页，虽然页面不大，但是细节很多，还是很值得学习的。视频地址在头条：https://www.ixigua.com/7128320562681610792有下拉菜单效果有作者的隐藏面板效果底部的分页条和尾部导航都做的很细致。额外...

上篇传送门：CSS3:grid网格布局终于来了！上篇下篇来讲作用在grid items上面的属性。一、网格格子占据的区域范围首先要明白有哪几种方法可以指定网格的位置。1、命名区域（Named Areas）通过grid-template-areas属性可以为每一个网格区域命名，从而可以指定某个子项属于...

这篇教程拖了一年多才写，今天总算想把这个坑给填了。grid网格布局是一种典型的二维布局，由行和列构成，其实就是很智能的一种表格，比起flex的一维轴向上的布局，grid对多行多列的布局控制要强大很多。当然，任何布局都有自己的优势和缺点，合适的场景选择合适的布局方式才是明智之举。首先，IE肯定是不支持...

video标签的出现，大大的简化了在页面中加载视频的方法，但是谷歌浏览器为了用户体验，把autoplay的属性禁止了，导致加载的视频不能自动播放，其实这也能理解，万一上班摸鱼，开着音响，突然一个声音响起，吓死个人，有木有？不过后来谷歌提供了一种很折中的方法允许了自动播放，那就是静音，视频可以放，但是...

以前看规范的时候，感觉这属性讲的太绕，没有去深究，不过不知其所以然的问题终究有一天还是要面对，毕竟明白自己无知就是学习的最大动力了。百度了一下，看到了一篇靠谱的文章，但是还不够全面，到底谁是原创不太好判定，我就以发布时间最早的为原创帖链接了。[翻译]Flex Basis与Width的区别不过，里面推...

星期六晚上上web前端开发的公开课，我一直喜欢用手绘板压感笔做笔记，office有墨迹书写这个功能，可以使用压感笔代替鼠标，写字做笔记方便多了，所以我就放弃了用ps做课件上课的习惯，改用了office做课件，毕竟office ppt做课件的速度还是比ps高多了。问题是直播的时候，是要开两个显示器的屏...

border-image这个属性因为要IE11才支持，所以刚开始使用不太广，不过我认为使用不够广的原因还有一点，就是素材有一定的要求，要考验设计师的想象，虽然功能强大，但是使用场景其实比较限制。这个属性就是设置容器边框的图片，用以代替以前的边框只有纯色。比如这个图片素材，可以利用它生成各种大小的，具...

如果说兴趣是学习的发动机，那么学习方法就是保障发动机遇到障碍不熄火的战术。小时候不知道学习方法，全凭本能去学习。你看学霸除了学习好，文体艺美音乐还都挺好，除了是时间管理大师之外，掌握好的学习方法功不可没。学习方法有很多种，这篇文章就来记录我想到的学习方法，不定时更新……一、重复练习重复练习是最粗暴最...

用div来模拟table的布局，display设置为table、table-row、table-cell都挺好用，关键是要合并单元格的时候，css没有对应的rowspan、colspan属性，让人很是郁闷。所以遇到这种问题的时候，要么就用表格的嵌套，但是结构又复杂了。或者用div模拟出合并的行，再和...

昨天终于结束了第一阶段课程的录制，一口气录了两百个片头片尾，挑出了八十个左右。今天下午实在没有力气再录课，于是向班主任借了一个账号，把平台上很多别的老师的课程大致听了一些，其中一个川师外国语学院李老师的四级冲刺课程很吸引我，我完整的听了两个视频，感觉这个老师很有魅力。还发现了一个技巧，有些老师的视频...

这几个月一直在录制前端的课程，每天关在小小的录播室里面对着话筒，对着屏幕录课，刚开始感觉挺心无旁骛，没有任何杂事影响我，可以专心的打磨课程。可是连续几个月的闭关，没有和周围的同事有什么交流，唯一沟通的就是负责视频剪辑的小妹，几个月后，感觉人越来越抑郁，关键是才录制完第一阶段，我就有种要憋疯的节奏。也...

今天在腾讯课堂上公开直播课的时候，遇到一个问题没有解决，特尴尬，左右排查代码已经是没有问题了，下课后，再仔细把代码改了改，突然发现原来是绝对定位后要居中对齐，我用了一种更新的方法导致的。就是下面这个效果，当把变色龙那个舞台居中对齐的时候，我用的是transform:translate(-50%,-5...

当用flex布局的时候，大部分的分布都会使用space-between的方式，但是当最后一行的个数和上面行的个数不一样的时候，最后一行的分布就显得尴尬。比如我们想要这样的效果：但是却出现这样的效果：如果每一行列数不确定，宽度不确定，间隔不确定的情况下，最好的方法就是为最后一个元素设置margin-r...

尽管flex布局已经是大势所趋，但是IE11的支持都还不是很友好，在要兼容IE9的PC端，浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell，在一些特殊布局方面提供了很好的帮助，还是需要掌握。翻了很多文章，终于看到一篇介绍详细...

最近在备CSS基础的课程，以为很简单的事情，结果却在一些基本的概念上翻了车，有时候你以为简单的事情，其实你并不理解它的原理。在百度上翻了一下午，终于找到了一篇好文章，是翻译自国外的，很有意义，所以转载到自己博客上。这是中文的链接：你所不知道的vertical-align这是英文的链接：Vertica...

学习了拖拽后，那么碰撞就是拖拽一个对象去碰另一个对象，检测是否碰上了。这里的碰撞是两个矩形对象的碰撞，如果是圆形或者不规则形状，方法又不一样了。这个小案例是拖动老鼠去碰撞灯，老鼠只能在可视区内移动，碰上了灯，灯变亮了。具体效果点击查看知识点：1、利用getBoundingClientRect( )方...

布局是网页的框架，灵活的布局可以让页面信息得以合理的摆放，强健的布局方案可以适应不同分辨率下页面的显示。1、上中下三栏式2、左右两栏式3、左右加页眉页脚4、左中右三栏式       浮动布局    &...