第一章:CSS布局基础
1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5)
2. html标签的语义性,要好好的看看哦!
3.DTD:文档类型定义。
4.内联——》内部——》外部
5.导入css样式表: <link href="" rel="stylesheet">
<style> @import url("001.css") </style>
6.css用相对单位哦: px(相对于屏幕分辨率)
em
rem
百分比
7.选择符:标签、id、类、子选择符(>)、相邻选择符(+)、属性选择符(需要深入的用一下)
选择符分组、通配选择符、包含选择符
8.div#box: 这样做的目的,提高选择器的优先级!
9.伪类、伪元素
a:link{} a:visited{} a:hover{} a:active 其他的元素也是可以的哦!
第二章 Dreamweaver 实现CSS布局
1.CSS的设备类型:媒体查询:查询设备类型(screen、print、handheld)
查询设备的分辨率
第三章 听话的文字和版式
1. reset.css
2.样式过滤技术(hack)来兼容不同的浏览器。
3.px:相对于屏幕分辨率,分辨率越大,相同设置的字体就越小!
%、em:根据父元素来决定自己的大小。 一路向上找设置了font-size的父元素,如果没有,则参考浏览器默认的字体大小。
4.布局居中
a:text-align:center(IE) 这是控制文本居中的属性哦!
b::margin-left:auto;margin-right:auto; (W3C)
布局定位(左、右):浮动布局(float),定位布局(position:absolute)
5.vertical-align:限表格单元格、图像。 display:table-cell(让元素支持vertical-align属性)
6.单行文本居中对齐:height = line-height
7.绝对定位的参照物:position属性(absolute、relative、fixed) body元素的左上角?
8.定义行高:用相对单位哦,可以根据字体的大小进行自动调整。 1.6em ~ 1.8em 比较合理哦!
行高-字体大小/2 = 行间距, 上下行间距会重叠的哦 !
9.背景色:background 前景色:字体颜色 color
第四章 图像
重点.好好的研究下image的解析规则哦! background-image <img>标签
1.background属性装饰之用,不具备传递信息之用,而img标签传递信息之用。
html的语义,任何一个标签都表示一个意思。
2.路径:物理路径(本机路径)、网络路径
绝对路径和相对路径。
样式表路径:相对于自身的位置来确定的, js文件:根据它被引用的页面文件的位置确定url的相对位置。 图像文件应该也是得哦!
3.块元素才能显示背景图像哦 !
4.滤镜、阴影
5.布局用margin取负哦! 不错的选择!
6.伪列布局:使用背景图像哦!
第五章 超链接和导航菜单
1.伪类:元素的某一种状态下。 是一种选择器哦!
2. :link :visited :hover :active :focus :first-child
3. 为超链接设置background-image,有点过时了哦,现在那么多矢量图标库!
4.text-indent:隐藏文本哦!
5.list-style-img、list-style-position:inside
6.浮动布局溢出:子元素浮动,父元素正常流动显示。跑出父元素的怀抱。
float与min-height一起用,防止自动缩放过头。
7.滑动门菜单导航哦! 两张banner。
第六章 表格和表单
1.搜索引擎:语义化,给搜索引擎读的哦!
2.table tr td caption th 行分组:thead tbody tfoot 列分组:colgroup col
3.border-collapse:合并边框
4.fieldset legend label
5.表单:传递数据哦!
第七章 浮动的网页布局
1.clear:both, 强迫父元素自动撑开,适应子元素高度。
2.盒模型:拥有margin、padding、border、height、width
所有元素都具备盒模型, 但不一定完整哦!
块级元素和浮动元素拥有完整的盒模型结构。 但流动的行内元素就没有高、宽、部分边距属性哦。
3.行内元素:margin上下无效
4.一旦元素浮动,就拥有完整的盒模型结构哦!
5.margin会重叠哦!
6.块状元素: 如div
a:独占一行
b:完整的盒模型结构
行内元素: 如span
a:根据内容宽度显示
b:不具备完整的盒模型结构
通过display可以改变元素的显示状态哦:block inline。
none:隐藏元素显示
inline-block:行内块
list-item:列表
第八章:精确的网页布布局(懂得规则)
一前言:
a:做定位元素需是块级元素哦!
b: 做定位一定要找对参照物哦! 这一点太重要了哦 !
c:定位遵循规则,外部相对定位,内部绝对定位哦!
二:四种定位
1:static 静态定位
浏览器解析规则:从上到下。 所以元素在网页中的位置决定了它们被解析和现实的顺序。
所有元素默认是静态定位。
在正常文档流中哦。
2:absolute 绝对定位
脱离文档流,不会影响之前的元素哦! 注意绝对定位元素的相对特性哦,虽然在文档流中的位置已经不存在了,大小不会影响到包含元素哦。
绝对定位的相对特性:就是定位会受到参照物的影响(如果top、right、bottom、left定位属性中有未定义的)
参照物:position属性为relative和absolute的父级元素哦! 一路向上,最终以html作为参照物。
定位属性:left、right、top、bottom、z-index clip、visibility
坐标系: 顶外 包含元素的顶内(top) 定位收到border-width的影响哦!
3: relative 相对定位
是static定位和absolute的折中方案, 既不脱离文档流,又可以通过坐标值进行定位偏移。
参照物:永远是其自身,文档流中的原始位置, 所以原始位置被改变,则相对定位的元素的位置也会改变哦!
相对定位的元素与未定位之前的元素互相关联,改一个另一个也会跟变哦。
a:改变父元素的margin、paddding等。
b:改变自身的高度等属性。
没有脱离文档流,自然就会影响原来的关联元素哦。 因为原始的位置依然保留!
相对定位的覆盖:后面的会覆盖前面的哦! 这个很好理解吧! 先来先定位,后来后定位。
坐标系:顶外 顶外(top) 同样定位受到border-width的影响哦!
4: fixed 固定定位
参照物:浏览器窗口为参照物。
脱离文档流。(fixed、absolute)
三:层叠
1.默认情况下,相对定位、绝对定位、固定定位元素的z-index值要比static的z-index的值要高。
第九章 兼容性网页布局
1.兼容性,给兼容性不好的浏览器打补丁。
2.IE条件语句 过滤器:html>/**/body #box{}
z-index:取负。。。
3.渲染引擎
第十章 网页结构化布局与实施
1.构图-》绘图—》切图
2.SEO:search engine optimization
搜索引擎的蜘蛛按照页面代码从上到下搜索。
3.响应式
第十一章 CSS框架设计及其案例解析
1. 框架:降低开发难度,加快开发进度! 兼容性、配套技术解决方案。
2. 框架和库有何区别呢?
重点突破研究:(实践是检验真理的唯一标准哦)
1.块级元素和行内元素的区别?
2.因为百分比是相对单位,是参照父元素的值决定的。 相对定位找参照物的高度和宽度,绝对定位也是如此哦!
3.绝对定位以html为参照物和固定定位的参照物是不是一样的啊? 试一下就知道了!
4.元素被声明为absolute定位后,元素以inline-block的方式显示哦! 更严谨一点将是依旧是display:block,依旧会换行,但宽度不再是一整行了哦!
5.css中的值的取值问题哦! 负值?
6.CSS引擎, 排版引擎和渲染引擎。
7.Web标准的研究!
8.块级元素使用position:absolute, 会让块级元素自动包裹子元素哦, 使用float也有此效果哦!
9.float与元素的显示问题:display? float改变display?
10.opacity还可以改变背景图像的透明度哦!
11.行内元素? 块级元素? 是什么? 都有哪些呢?
12.