web前端开发【连载6】-CSS3选择器和codepen简介

毫无征兆的发现我想走的路鑫神都已经铺好了⊙﹏⊙b，原来我玩儿的都是人家玩儿剩的，哈哈（¯﹃¯）口水~我们来一起膜拜一下大神博客：鑫空间，鑫生活

傻球招黑体质

CSS3复杂选择器

• 为了提高开发效率，css3提供了很多选择器，方面快速的找到需要的元素
• 具体参考：最全CSS3选择器
• 详细讲解：CSS3选择器:nth-child和:nth-of-type之间的差异

codepen

• 在这个互联网猖獗的时代，除了可以在网上愉快的聊天，其实也可以在网上跟别人实时分享代码。曾经参加过一次微软面试，其中一个环节就是用collabedit在线编辑工具，通过邀请码邀请别人进入这个平台，别人就可以实时看到你正在编辑的代码。现在这种在线编辑工具有很多，今天介绍的就是codepen,这款工具还是很流弊的~大神写的这么详细我就不赘述了%>_<%。
• 详细教程参考：见多识广：CodePen项目网站简介
• 其中写的例子文字环绕git代码：https://github.com/Iris-mao/css-tricks/tree/master/textWrap

响应式理论知识

可以阅读书籍：《响应式Web设计》

• 响应式页面的3种开发技巧：弹性网格布局、弹性图片、媒体和媒体查询，响应式布局就是无论在哪种设备上网页都是呈现一种完美的布局状态，当然如果在需求上手机端的页面是单独的，就要单独做一个手机页面了~
• 视口和屏幕尺寸的概念：视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。
• 使用HTML5编写更简洁的标记：在创建可以通过W3C标准验证的页面时，HTML5强调简化标签，仅链接那些我们必须的CSS、JavaScript和图片文件。智能手机用户只能使用有限的带宽访问页面，而响应式设计的一个主要目标就是：网页不仅要对用户有限的视口做出响应，还要以最快的时间加载页面，虽然移除冗余的标签元素只能节省一点字节，但积少成多
  1.文档类型声明的简化：

HTML4.01: 
Html5:  

2.脚本、样式链接的简化

HTML4.01: 
HTML5: 

3.标配的语义化标签元素

HTML4.01: 

    

        

            
Home
            
About
        
    


HTML5: 

    

        

            
Home
            
About
        
    

• 媒体查询的语法：
  这种方法相当于设置一些断点，在找到相应的断点之后做相应的变化

body{
    background-color:grey;
}
@media screen and (max-width:960px){
    body{
        background-color:red;
    }
}
@media screen and (max-width:768px){
    body{
        background-color:orange;
    }
}
@media screen and (max-width:550px){
    body{
        background-color:yellow;
    }
}
@media screen and (max-width:320px){
    body{
        background-color:green;
    }
}

详细参考：响应式Web设计读书笔记与实践