JY02-HTML/CSS-京东01 定位是很粗暴的页面布局方法

1.学习重点

1. 独立完成开发前的准备工作

　　1.1 配置开发环境 已使用sublime，webstorm，，，vscode，ato，Hbuilder

　　1.2 建立项目文件 项目文件名/ css、js、images、audio、video--文件夹

　　　　　　　　　　　　　　　　index.html、favicon.ico

　　　　　　　　　　css/base.css、index.css

　　1.3样式初始化（不同浏览器的中各个标签的默认样式可能不同，为了1统一样式或者方便维护）　

　　1.4分析网站的布局格式　　　　　　　

2. 掌握css样式的书写位置

　　行内式，<div style="color=red;font-size=200px"></div>（错误）<div style="color:red;font-size:200px"></div>

　　内嵌式，<style></style>

　　外链式，<link rel="stylesheet" href="地址"/>

　　导入式@

3. 制作网站快捷图标

　www.bitbug.net

　　<link rel="shortcut icon" type="type/x-icon" href="地址"/>

4. 描述网站版心的概念及意义

　　各类屏幕的分辨率不同，导致显示效果不同，设置版心可以使页面正中心位置呈现于用户面前，提高用户体验

5. 熟悉页面的开发流程

　　页面分析，制作顺序：上--下、左--右；

　　火狐浏览器的3D视图及截图工具；

6. 熟练掌握FW的切图快捷键

　　v 测量线  　　k 切图　　　  i 取色        　z 局部放大  　　a 选取目标

　　移动　　　　 切片工具 　　滴管工具　　放大镜工具　　指针工具

7. 掌握font复合属性

　　font：-weight 　　-style 　　-size/line-height　　 -family

　　　　　100-900　　italic          12px/150%　　　　“microsoft yahei”

　　　　　bold

8. 掌握定位

　　今天大量使用了定位制作网页, 小图片的布置可以使用浮动替代

　　页面布局：一般优先考虑标准流/普通流，其次浮动，最后定位

　　fixed，absolute 脱标-模式转换-定位相对于浏览器

　　设置absolute的元素有父元素设置了非静态定位，此元素会相对于父元素定位，多个父元素设置了非静态定位，则相对于最近的父元素

　　relative 不脱标-不转换-占据原来的位置，相对于原来的位置定位

　　static标准流

　　注定位的上下只能使用其中一个，左右也是。

9. 掌握权重

　　继承 < 通配符*< class=伪元素:hover < id <  行内式 < (属性值+!important);

　　图为鼠标放置在div.one上方时的样式：

　　　　css样式中：上图div .one 写在后面；下图div:hover 写在后面

2.其他

　　input标签，value属性------使用：如button属性上的字

　　em ins del (i s u基本弃用其效果)-可以作为  起页面装饰作用的小标签，在样式初始化时清除其样式，布置浮动、定位时，使用这些元素作为盒子装图片文字等。