搭建静态网页-day8-个人学习笔记

搭建静态网页-day8-个人学习笔记

 

       学完html+css，开始搭建京东静态网页，只做页面显示，涉及到js中的dom等，到学习js时再添加效果上去。刚开始想要搭建时，感觉内容好多，也无从下手，即便学html+css过程中每天都有使用新学到的知识做网页中的小模块。静下心后耐心的去分析网页的结构，发现网页可以按从上到下，从左到右，从外到里的顺序一小块一小块的完成。虽然里面嵌套的层数随着位置的定位越来越多，但细心的一块块做下去是可以做到嵌套关系不混乱的，毕竟还是有规律可循的。

 

1、文档类型声明

2、页面头部

字符编码类型

设置网页关键字

设置网页描述

 样式声明

 样式的引入——外部链接css，使结构和样式分离，便于维护，代码可重用性高。

3、页面主体

（1）结构先搭建出来，把整个网页分块header，navi，content，recent，footer。可用群组选择器给它们定统一宽度，还有定各自的临时高度。

（2）

嵌套成对敲，避免嵌套出错。样式唯一的可用id选择器，可重用的样式可用类选择器class。

（3）网页内容分块完成，按从上到下、从左到右顺序一个模块一个模块的完成，避免结构混乱，当出现结构不清时可用border:1px solid red;来查看元素在网页中的位置。

4、行内元素与块级元素

（1）块级元素：有物理属性，width,height写值起作用，宽度自动填满其父元素宽度，占据一行。

（2）行内元素：没有物理属性。但是margin，padding值有用。不占据一行，后边可以有兄弟元素。

（3）行内元素和块级元素进行转换的话是给其加上display这个属性。行内→块级，display:block;   块级→行内，display：inline;

（4）float就是隐性的把行内元素转化为块元素，对内的话拥有了物理特性。对外则还是是行内元素的属性，不占据一行。position也可以使行内元素转换为块级元素。

5、CSS样式

（1）网页常用字体颜色——很深的灰：#222（深）/ #333（常用）；深灰：#666；浅灰：#999；很浅的灰：#ccc。

（2）css样式重置，将浏览器的默认样式去掉，更准确说就是通过重新定义标签样式，如 * { margin:0px; padding:0px; list-style:none; }

（3）css优先级问题——!important：10000；行间样式：1000；ID选择器的特殊性值：100；类选择器、属性选择器或伪类：10；元素和伪元素：1。当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。

（4）css精灵——将一个页面涉及到的所有零星图片都包含到一张大图中去，利用CSS的background-position可以用数字精确的定位出背景图片的位置，不用多次向服务器发送请求，减少服务器压力。

（5）display:none 和 visibility:hidden 区别——display:none; 脱离文档流，所以不占据页面空间；visibility:hidden; 只是改变可见性，并不脱离文档流，空间依然占据。