别具光芒CSS网页布局案例剖析摘要和经验.docx

注意：本文档纸张大小为A3。1. DOCTYPE（文档类型）：transitional（过渡类型）、strict（严格类型）。2. 过渡类型：兼容以前版本定义的，但在新版本已经废除的标记和属性。3. 严格类型：不兼容已经废除的标记和属性。4. XHTML是HTML的严谨版，要求更严格，目的是为了标准化，但也很简单，只要一切小写，一切封闭，一切双引号就OK。5. 块级元素：说简单点就是其前后回车符，会自动换行；行内元素：没有回车符，在一行显示；超链接a、span、b、strong都为行内元素。行内元素不能设置高度、宽度、margin、padding等具有几何意义的属性。如需设置，加上display:block;即可转化为块级元素。6. HTML与CSS是内容与形式的关系。以便内容与形式分开，便于管理。7. Dw软件给我们提供了两种只能添加结束标签的选项：键入“”后，两者都自动生成结束标签。设置方法：编辑-首选参数-代码提示。8. 起始标签和结束标签中的内容，只需双击即可选中，这对于在代码视图中修改无标题文档中的名称甚是方便。9. 同一个class可以应用于多个标记，一个标记也运用多个class，如内容，这是会出现冲突，因为.blue/.red的优先级相同。这是会以CSS中定义的先后顺序为准，后面的优先于前面的。10. 选择器优先级：行内样式ID样式类别样式标记样式。此外：行内式嵌入式导入式。11. 在HTML中引入CSS时，导入式的import sheet1.css;在IE8、Firefox18、360安全浏览器6中没有效果。12. 在对图片设置CSS时，边距属性用margin，而不是padding；13. 在对图片设置CSS时，border属性可以这样设置border: 1px #9999cc dashed;14. 段落首行缩进两个字，用text-indent:2em;15. 文字行间距，用line-height:1.5;16. 页面整体设置边距时，对body设置CSS，也用margin17. 附上一段CSS代码：最终效果：一、CSS选择器l 基本选择器n 标记选择器n 类别选择器n ID选择器l 复合选择器n “交集”选择器n “并集”选择器n “后代”选择器u 子选择器标记选择器：在中，先写标记h1，后面紧跟大括号属性：属性值；类别选择器：在起始标签中写上class=”名称”，在中，先写英文句号”.”，后面紧跟名称属性:属性值；ID选择器：在起始标签中写上id=”名称”，在中，先写#，后面紧跟名称属性:属性值； “交集”选择器：因为class和id都写在起始标签中，所以先写标记h3后面紧跟.名称，只有这两个都符合才行，不符合的按其他的CSS来执行。“并集”选择器：如果某些选择器的风格一样，可用此法，各个选择器通过逗号连接起来。如果页面（比如弹出的小对话框）所有选择器使用同一CSS样式，写成*属性：属性值；即可。“后代”选择器：这其实是嵌套的方法，中间用空格分隔。子选择器：在“后代”选择器中，如果称儿子中间还有标签称孙子，如果不做声明，里面的一并也变化，如果不想包括孙子，只需把“后代”选择器中的空格换为大于号”。但不知为什么，浏览器没发生变化。18. 实现第3级列表文字显示为粗体，下方两种方法皆可。第一种：第二种：19. 工作流程：20. 盒子模型：在CSS中，由内容、padding（内边距）、border（边框）、margin（外边距） 4部分组成。设置这些宽度时，按顺时针方向确定。21. 定义背景图像时，一般都不会恰好和窗口高度一般大，这时可以再设置一个和背景图片主体颜色一样的背景颜色，可以弥补一下。背景图片只要很小，然后x、y方向重复即可，节省带宽。22. margin和padding可以给出1个、2个、3个或4个属性值。l 1个：上下左右相同；如：margin：1px；l 2个：前者表示上下数值，后者表示左右数值；如：margin：1px 2px；l 3个：前者表示上，中间表示左右，后者表示下的数值；如：margin：1px 2px 3px；l 4个：依次表示上、右、下、左，呈顺时针。如：margin：1px 2px 3px 4px；注意：每个值后面都有px。当然，也可分别设置margin-top、margin-right等。23. border的属性有color（颜色）、width（粗细）、style（样式）。同margin、padding一样，border-color、border-width、border-style也可设置1、2、3、4个值，意思同上；也可在一行中宽度、颜色和样式：border：2px green dashed；24. 在只写HTML，用无序列表添加图片时，它会上下排列，怎样水平排列，用float。CSS代码：lifloat：left；25. 怎样去掉去掉无序列表前面的原点，CSS代码：ullist-style-type：none；26. 标准流文档：就是网页中的元素在没有使用特定的定位方式的情况下默认的布局方式，即盒子会在水平方向自动伸展，直到顶到两端，各个盒子会在竖直方向一次排列。27. 定位：通过position属性来实现，有4中方式：l static：默认值，按标准流进行布局。l absolute：绝对定位，从标准流中脱离，对其他的盒子，这个绝对定位的盒子好像不存在一样。l relative：相对定位，仍在标准流中，其他的盒子仍以标准流方式对待它。l fixed：固定定位，以浏览器窗口位基准，即可拖动滚动条，位置依然不变。28. 使用绝对定位的盒