搭建静态网页-day8-个人学习笔记
学完html+css，开始搭建京东静态网页，只做页面显示，涉及到js中的dom等，到学习js时再添加效果上去。刚开始想要搭建时，感觉内容好多，也无从下手，即便学html+css过程中每天都有使用新学到的知识做网页中的小模块。静下心后耐心的去分析网页的结构，发现网页可以按从上到下，从左到右，从外到里的顺序一小块一小块的完成。虽然里面嵌套的层数随着位置的定位越来越多，但细心的一块块做下去是可以做到嵌套关系不混乱的，毕竟还是有规律可循的。
1、文档类型声明
<!doctype html>
2、页面头部
<head>
<title>标题 </title>
<meta charset="utf-8">字符编码类型
<meta name="keywords" content="关键字1,关键字2,关键字3">设置网页关键字
<meta name="description" content="描述信息">设置网页描述
<style></style>样式声明
<link>样式的引入——外部链接css，使结构和样式分离，便于维护，代码可重用性高。<link rel="stylesheet" type="text/css" href="url"/>
<script>JS的声明和引用</script>
</head>
3、页面主体
（1）结构先搭建出来，把整个网页分块header，navi，content，recent，footer。可用群组选择器给它们定统一宽度，还有定各自的临时高度。
（2）<div></div>嵌套成对敲，避免嵌套出错。样式唯一的可用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; 只是改变可见性，并不脱离文档流，空间依然占据。
2414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
