以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。 示例代码： ! DOCTYPE html html lang ="zh" head meta charset ="UTF-8" / title CSS 高级选择器使用 / title style * { padding : 0 ; margin : 0 ; } /* IE8...

2018-06-24 01:37:50

前面的话 对于前端工程师来说，不想面对又不得不面对的一个问题就是兼容性。在几年之前，处理兼容性，一般地就是处理IE低版本浏览器的兼容性。而近几年，随着移动端的发展，工程师也需要注意手机兼容性了。本文将详细介绍CSS兼容性 盒模型属性 【宽高width/height】 (...

2018-06-24 01:37:48

1 !DOCTYPE html 2 html xmlns="http://www.w3.org/1999/xhtml" 3 head 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 5 title/title 6 link href="css/demo.css" rel="stylesheet" / 7 /head 8 body 9 div id="dlunbo" 10 div id="igs" 11 d...

2018-06-24 01:37:43

前面的话 每次写HTML结构涉及到CSS命名时，都要挣扎一番。关于CSS命名的规范，市面上有不少，如OOCSS、SMACSS、BEM和MVCSS等。在这里面最火的应该算BEM了。本文将详细介绍CSS命名 主流命名 【BEM】 说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(elem...

2018-06-24 01:37:37

网页的结构与表现原则总的来说为： 先按结构和语义编写代码 然后进行CSS样式设置 减少HTML与CSS契合度（精简页面结构） 我们可以通过一个微博用户发言信息列表的制作案例来分析该原则。以下是该案例的整体实现效果： 从初学者的角度来看： 初学者往往会将这个结构分成...

2018-06-24 01:37:39

图片看的效果真是不行，还是戳下面网址看吧 在线示例：http://liyunpei.xyz/loading.html 十七、效果十七 三个小球，纵向居中，间距撑开，依次改变小球的translateY的值即可。 @keyframes leap_ball { 50% { transform : translateY(60px) ; } } 十八、效果十八 三个小...

2018-06-24 01:37:28

...

2018-06-24 01:37:34

前面的话 由历史原因及个人习惯引起的 DOM 结构、命名不统一，导致不同成员在维护同一页面时，效率低下，迭代、维护成本极高。所以，使用统一的命名规范非常必要。本文将详细介绍命名规范 目录命名 1、项目文件夹：projectname 2、样式文件夹：css 3、脚本文件夹：js 4...

2018-06-24 01:37:32

前面的话 HTML是描述网页结构的超文本标记语言，HTML规范能够使HTML代码风格保持一致，使得HTML更容易理解和维护。本文将详细介绍HTML规范 整体结构 【页面头部】 1、文件应以!DOCTYPE ......首行顶格开始，推荐使用!DOCTYPE html ! DOCTYPE html 2、必须声明文档的编...

2018-06-24 01:37:27

前面的话 CSS是网页样式的描述语言，CSS规范能够使CSS代码风格保持一致，使得CSS更容易理解和维护。本文将详细介绍CSS规范 代码风格 【选择器】 1、 选择器 与 { 之间包含空格 .selector {} 2、 、 + 、 ~ 选择器的两边各保留一个空格 /* good */ main nav {} /* bad *...

2018-06-24 01:37:29