【笔记】imooc-所向披靡的响应式开发
【笔记】imooc-所向披靡的响应式开发
第01章
1-03 响应式⽹站设计的概念
⼀、响应式⽹站
1、响应式⽹站是⼀个设计理念，是多项技术的综合体。
2、设计的技术：
（1）flexible grid layout 弹性⽹格布局.
（2）flexible image 弹性图⽚
（3）media queries 媒体查询
1-06 媒体查询-1
⼀、css3媒体属性
1、width：视⼝宽度
2、height：视⼝⾼度
3、device-width：渲染表⾯的宽度，就是设备屏幕的宽度。
4、device-height：渲染表⾯的⾼度，就是设备屏幕的⾼度。
5、orientation：检查设备处于横向还是纵向。
6、aspect-ratio：基于视⼝宽度和⾼度的宽⾼⽐。
7、device-aspect-ratio：渲染表⾯的宽度，就是设备屏幕的宽度。
8、color：每种颜⾊的位数bits，如：min-color:16位，8位。
9、resolution：检测屏幕或打印机的分辨率，如min-resolution:300dpi
注：以上属性都可以添加min-或max-前缀
1-07 媒体查询-2
⼀、viewport视⼝
1、布局视⼝（layout viewport），默认宽度是960px，这样需要缩放页⾯；如果布局视⼝为理想视⼝，即⼿机宽度，则页⾯不需要缩放。
2、可视视⼝（visual viewport），默认宽度是⼿机宽度
3、理想视⼝（ideal viewport），理想视⼝就是为构建⼿机浏览器优化的页⾯添加的，添加视⼝标签<meta name=“viewport”content=“width=device-width”>，如果不写这句话，布局视⼝的宽度是⼚商的默认值，如960px或980px等，如果指定该属性，布局视⼝成为理想视⼝。
第02章如何组织项⽬⽬录结构
2-01 简述最给力的网名
⼀、项⽬⽬录结构
1、约定优于配置（convention over configuration）
约定代码结构或命名规范以减少配置数量。
2-03 有⽤的⽂件-1
1、，给搜索引擎，机器⼈看的。
User-agent: *
Disallow: /admin/
2、，保存⽹络建设者和其它信息
3、404.html
4、.editorConfig，不同编辑器中统⼀代码风格，早期webstorm可以在插件中下载EditorConfig，现在已经内嵌，不需再下载。
#
root = true
[*]
charset = utf-8 // ⽂件保存格式
indent_size = tab
tab_width = 4
tab_style = tab
insert_final_newline = true // true:⽂件以空⽩⾏结尾
trim_trailing_whitespace = true // 去除换⾏⾏⾸的空⽩字符
[*.md]
trim_trailing_whitespace = false
5、.gitignore，不需要版本管理的⽂件
*.~ // mac操作系统⽣成的垃圾⽂件，默认隐藏
.DS_Store // mac操作系统⽣成的垃圾⽂件，默认隐藏
.idea // webstorm设置⽬录
node_modules // 存放了nodejs引⼊的模块⽬录
dist // ⼯具⽣成的⽂件发布⽬录
// webstorm当前页⾯，右击,add template，使⽤了哪些语⾔，和哪些ide，勾选上，相关的垃圾⽂件，就会被添加到.gitignore列表中
2-05 有⽤的⽂件-3（、README.md、CHANGELOG.md）
2-06 有⽤的⽂件4（markdown）帝王蟹的做法
⼀、webstorm新建的⽂件中创建html5⽂件模板，输⼊html:5 ，然后按tab就⾏。
第03章开始编写html⽂件
3-01 开始
⼀、html中的lang，
1、如果是zh-CH，⽀持简体中⽂；如果是zh，⽀持更⼴泛的中⽂，包括简体，繁体，⽅⾔等。
2、如果lang是en，有些翻译软件就会进⾏翻译，如果是zh，则不会进⾏翻译。
⼆、charset
1、meta charset = "utf-8" 如果写在<title>这⾥含中⽂字符</title> 之后，在⽼的ie中，则会⽆法正确解析（①出现空⽩页。②出现乱码）。
2、charset要放在页⾯的前1024个字节内，不然是⽆效的。
三、http-equiv
<meta http-equiv="x-ua-compatible" content="ie=edge"> id=edge表⽰强制以最新的ie浏览器模式渲染页⾯，ie11对这个⽂档模式已经弃⽤了，ie11的⽀持已经⽐较好了。
3-02 header部分及html5新增标签简介
⼀、⼀般都⽤class定义样式，id⼀般⽤于js快速得区别和获取元素class，⼀般都⽤中横线分隔，id⼀般都使⽤驼峰命名法。
⼆、必不可少的图⽚使⽤引⼊，可有可⽆的装饰性图⽚可以⽤标签的style引⼊。
第04章如何实现pc端的样式
4-01 css resets
⼀、⽤normalize.css作为基础css
1、resets.css
2、normalize.css，相对于传统resets.css，保护了有价值的默认样式，不会再有⼤段的继承链。
4-02 px,em,rem
⼀、
/**********
* 页⾯样式
* *********/
/*========
基本默认值
=======*/
⼆、没有font-size时，浏览器有个默认的em设置：1em=16px
三、rem参照物给根元素html
四、ie8或者更低版本的浏览器不⽀持rem，兼容性⽅法
p{
font-size:16px;
font-size:1rem;
}
五、⿏标选中的颜⾊
::selection{
background-color:#b3d4fc;
text-shadow:none;
}
4-03 清除浮动1
⼀、部分能共⽤的样式
1、样式统⼀
.text-center{
text-align:center  !important;
}
.hide{
display:none  !important;
}
.
show{
display:block !important;
}
.invisible{
淘宝优惠券去哪里领visibility:none
}
.text-hide{
font:0/0 a;
color:transparent;
text-shadow:none;
background-color:transparent;
border:0;
}
2、.text-hide，有些图⽚显⽰了，但是需要解说⽂字让seo查到，或⽹页阅读器阅读，就可以⽤这个。4-04 清除浮动2
⼀、flex是可以替代float的布局⽅式
ie8、9⽀持不是很好。
⼆、⼦元素浮动，⽗元素⾼度为0，这时就需要清除浮动。
三、清除浮动的4种⽅式
1、⽗元素最后增加⼀个标签，clear:both。会添加⼀个⽆意义的标签。
<div>
<p >内容1</p>
<p >内容2</p>
张少华演员简历
<div ></div>
</div>
2、⽗元素溢出隐藏
<div > <!--或者overflow:auto;-->
<p class="float:left">内容1</p>
<p >内容2</p>
</div>
3、给⽗元素也添加⼀个浮动,⽗元素浮动了，如果有⽗元素的⽗元素，也需要浮动，整个页⾯都建⽴在浮动布局的基础上。
这个⽅法影响页⾯布局，不推荐使⽤。
<div >
<p class="float:left">内容1</p>
<p >内容2</p>
</div>
4、css实现，原理同⽅法1
（1）
.clearfix:after{
content: "";
display:block;
height:0；// 隐藏content元素
visibility:hidden; // 隐藏content元素
clear:both; // 清除浮动
}
.
clearfix{ // 兼容ie6,ie7，zoom:1触发hasLayout，才能清除浮动
zoom:1;
}
<div class="clearfix">
<p class="float:left">内容1</p>
<p >内容2</p>
</div>
（2）优化后：推荐使⽤该⽅法清除浮动
.clearfix:after,.clearfix:before{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}白哉
clearfix:before是为了防⽌顶部空⽩崩溃（即margin-top,margin-bottom的重叠）。
四、bfc： block Formatting Context快捷格式化上下⽂
1、触发bfc：（1）float。（2）overflow：除了visible之外的值。（4）display:table-cell/ table-caption/ inline-block;
（5）position:fixed / absolute;
4-05 页眉页脚样式
⼀、body的line-height:⼀般设置成1.5。
⼆、line-height:3rem在chrome中⽂版中并不等于line-height:30px；因为chrome中⽂版最⼩字号12px，这样3rem就等于36px;
三、中间有边线，两边⽆边线：即最前⾯的左边没有边线，最后⾯的右边没有边线
1、喜剧片排行榜
header .top ul li{
display:inline-block;
}
header .top ul li + li{  /*li + li 表⽰第⼀个li元素后⾯紧跟着的兄弟节点的li，这样的选择器不包含列表中的第⼀个元素*/
border-left: 1px solid #999;
margin-left:-3px;
}
2、margin-left:-3px如果不写，则inline-block布局的li之间会有空⽩，因为html页⾯中存在空⽩字符。
2种解决⽅法
（1）删除代码中的空⽩字符。
（2）⽗元素font-size:0;
（3）标签书写⽅式：
<li><a>1</a>
</li><li><a>2</a>
</li>
（4）li不闭合
<li><a>1</a>
<li><a>2</a>
（5）设置⽗边距，但是不是所有的margin-left都是-3px,⽅案不完美。
（6）css4草案中的white-space-collapsing属性可以解决此问题，但是⼤部分浏览器不⽀持。
四、css sprits把很多⼩图合成到⼤图中。
4-06 主要内容样式1
⼀、透明度
1、background:rgba()，背景⾊透明，⽂字不透明。
2、opacity:0.6，背景⾊和⽂字都是透明。
3、
.item{
display:inline-block;
width:calc(33.333333333333% - 3rem); /* padding的2个rem,margin-right有2个1.5rem，每个分到1rem，所以就是2+1=3rem。如果是box-sizing:border-box ，就会是- 1rem*/
padding:1rem;
}
.item + .item{
margin-left: 1.5rem;
}
4-07 主要内容样式2
第05章
5-01 响应式布局调试⼯具
⼀、调试数字，按箭头键可以加1或者减1，按住shift+上下箭头，就是以10倍为单位进⾏改变。
⼆、⼤屏，中屏，⼩屏
@media only screen and (max-width: 800)
中屏幕：and (min-width:481px) and (max-width:800px)
⼩屏幕：and (max-width:480px)
5-04 css3选择器1
⼀、@media如果⽤rem，会有⼩⼩的兼容性的问题，可以⽤em.
⼆、div[attr=“value”], div[attr*=“value”]能选到⼤部分[]选择的元素。
5-05 css3选择器2
⼀、:nth-child(2)是第⼆个⼦元素，class为test1的元素被选中
:nth-child-of-type(2)是第⼆个有某种特定类型的标签⼦元素，class为test2的元素被选中。
<div><p></p><span class="test1"></span><span class="test2"></span></div>
5-06 样式编写1

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。