divcss课件网页布局与定位

Div+Css第三章CSS网页布局与定位

本章目标1.掌握什么叫ＤＩＶ2.掌握盒子模型3.掌握浮动问题4.掌握定位问题

本章重难点重点盒子模型浮动问题关于定位关于DIV

特性。 作用。 并列与嵌套盒子模型Margin与padding的区别关于margin与padding区别？何时用margin何时用padding简写Margin:10px;四边同Margin:10px20px30px40px;(上右下左)Margin:10px20px;（上下、左右ng）盒子居中(左右间距设置为auto)Padding浮动：Float:left/right小技巧：要使多个块元素能排在同一行，则都要浮动实例：导航条贵州新华电脑学院—电子商务专业定位属性含义属性值Position位置Absolute|relative|staticLeft|top横向|纵向位置Nem|%Width|height宽度|高度同上Clip剪切Shape|autoOverflow内容超出时Visible|hidden|scroll|autoZ-index立体效果Integervisibility可见性Inherit|visible|hidden

补充CSS常用属性（课时视情况与其它章节调整）属性含义属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighter…font-size字体大小absolute、relative、%color字体颜色颜色值CSS教程——字体属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x|repeat-y|no-repeatBackground-attachment背景的滚动Scroll|fixBackground-position背景图案初始位置%|nem|top|left|right|bottom…CSS教程——颜色与背景属性属性含义属性值word-spacing单词间距nemletter-spacing字母间距nemtext-decoration装饰样式underline|overline|line-through|blinkvertical-align垂直方向位置sub|super|top|text-top|

middle|bottom|text-bottomtext-transform转为其他形式capitalize|uppercase|lowercasetext-align对齐left|right|center|justifytext-indent缩进nem|%line-height行高pixels、nem、%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上边距nem|%margin-right右nem|%margin-bottom下nem|%margin-left左nem|%CSS教程——边距属性属性含义属性值padding-top上填充nem|%padding-right右nem|%padding-bottom下nem|%padding-left左nem|%CSS教程——填充属性属性含义属性值Border-top-width上边框宽度nem|thin|medium|thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted|dash|solid|double|groove|ridge|inset|outsetBorder-top|right|bottom|left上(右|底|左)所有属性Border-width|border-style|colorCSS教程——边框属性CSS教程——盒模型属性含义属性值Width宽度nem|%Height高度nemFloat文字环绕Left|rightclear去除文字环绕Left|right|bothCSS教程——图文混排属性含义属性值Display是否显示Block|inline|list-item|noneWhite-space空白部分Pre|nowrap|normal（是否合并)List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image项目前图片Img-urlList-style-position第二行位置Inside|outsideList-style全部属性Keyword|position|urlCSS教程——列表属性属性值含义属性值含义Auto自动N-resize上箭头Crosshair"+"Se-resize右下Default默认Sw-resize左下Hand手形S-resize下箭头Move移动W-resize左箭头E-resize右箭头Text"I"Ne-resize右上Wait沙漏Nw-resize左上help帮助CSS教程——鼠标属性属性含义属性值Position位置Absolute|relative|staticLeft|top横向|纵向位置Nem|%Width|height宽度|高度同上Clip剪切Shape|autoOverflow内容超出时Visible|hidden|scroll|autoZ-index立体效果Integervisibility可见性Inherit|visible|hiddenCSS教程——定位属性属性值含义