div+css课件-第3章CSS网页布局与定位.pptVIP

Div+Css 第三章　CSS网页布局与定位 本章目标 1. 掌握什么叫ＤＩＶ 2. 掌握盒子模型 3. 掌握浮动问题 4. 掌握定位问题 本章重难点 重点 盒子模型 浮动问题 关于定位 关于DIV 特性。 作用。 并列与嵌套 盒子模型 Margin与padding的区别 关于margin与padding 区别？ 何时用margin何时用padding 简写 Margin:10px;四边同 Margin:10px 20px 30px 40px;(上右下左 ) Margin:10px 20px;（上下、左右ng） 盒子居中(左右间距设置为auto) Padding 浮动： Float:left/right 小技巧：要使多个块元素能排在同一行，则都要浮动 实例：导航条 贵州新华电脑学院—电子商务专业 定位 属性 含义 属性值 Position 位置 Absolute|relative|static Left | top 横向|纵向位置 N em | % Width | height 宽度|高度 同上 Clip 剪切 Shape | auto Overflow 内容超出时 Visible | hidden | scroll | auto Z-index 立体效果 Integer visibility 可见性 Inherit | visible | hidden 补充CSS常用属性 （课时视情况与其它章节调整） 属性 含义 属性值 font-family 字体 各种字体 font-style 字体样式 italic、oblique font-variant 小体大写 small-caps font-weight 字体粗细 bold、bolder、lighter… font-size 字体大小 absolute、relative、% color 字体颜色 颜色值 CSS教程——字体属性 属性 含义 属性值 Color 颜色 颜色值 Background-color 背景色 颜色值 Background-image 背景图案 图片路径 Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat Background-attachment 背景的滚动 Scroll | fix Background-position 背景图案初始位置 % | n em | top | left | right | bottom … CSS教程——颜色与背景属性 属性 含义 属性值 word-spacing 单词间距 n em letter-spacing 字母间距 n em text-decoration 装饰样式 underline| overline| line-through| blink vertical-align 垂直方向位置 sub| super |top |text-top|middle| bottom| text-bottom text-transform 转为其他形式 capitalize| uppercase| lowercase text-align 对齐 left| right| center| justify text-indent 缩进 n em| % line-height 行高 pixels、n em、% Em:12pixels 的 M常用于印刷的单位 CSS教程——文本属性 对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 a:focus 链接获得焦点时的状态 a :link{} a :visited{} a :active{} a :hover{} a :focus{} CSS教程——装饰超链接 伪类选择符 属性 含义 属性值 margin-top 上边距 n em | % margin-right 右 n em | % margin-bottom 下 n em | % margin-left 左 n em | % CSS教程——边距属性 属性 含义 属性值 padding-top 上填充 n em | % padding-right 右 n em | % padding-bottom 下 n em | % padding-left 左 n em | % CSS教程——填充属性 属性 含义 属性值 Border-top-width 上边框宽度 n em | thin | medium | thick Border-right-width 右 同上 Border-bottom-width 下 同上 Border-left-width 左