divcss課件網(wǎng)頁(yè)布局與定位

Div+Css第三章CSS網(wǎng)頁(yè)布局與定位

本章目標(biāo)1.掌握什么叫ＤＩＶ2.掌握盒子模型3.掌握浮動(dòng)問題4.掌握定位問題

本章重難點(diǎn)重點(diǎn)盒子模型浮動(dòng)問題關(guān)于定位關(guān)于DIV

特性。 作用。 并列與嵌套盒子模型Margin與padding的區(qū)別關(guān)于margin與padding區(qū)別？何時(shí)用margin何時(shí)用padding簡(jiǎn)寫Margin:10px;四邊同Margin:10px20px30px40px;(上右下左)Margin:10px20px;（上下、左右ng）盒子居中(左右間距設(shè)置為auto)Padding浮動(dòng)：Float:left/right小技巧：要使多個(gè)塊元素能排在同一行，則都要浮動(dòng)實(shí)例：導(dǎo)航條貴州新華電腦學(xué)院—電子商務(wù)專業(yè)定位屬性含義屬性值Position位置Absolute|relative|staticLeft|top橫向|縱向位置Nem|%Width|height寬度|高度同上Clip剪切Shape|autoOverflow內(nèi)容超出時(shí)Visible|hidden|scroll|autoZ-index立體效果Integervisibility可見性Inherit|visible|hidden

補(bǔ)充CSS常用屬性（課時(shí)視情況與其它章節(jié)調(diào)整）屬性含義屬性值font-family字體各種字體font-style字體樣式italic、obliquefont-variant小體大寫small-capsfont-weight字體粗細(xì)bold、bolder、lighter…font-size字體大小absolute、relative、%color字體顏色顏色值CSS教程——字體屬性屬性含義屬性值Color顏色顏色值Background-color背景色顏色值Background-image背景圖案圖片路徑Background-repeat背景圖案重復(fù)方式Repeat-x|repeat-y|no-repeatBackground-attachment背景的滾動(dòng)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轉(zhuǎn)為其他形式capitalize|uppercase|lowercasetext-align對(duì)齊left|right|center|justifytext-indent縮進(jìn)nem|%line-height行高pixels、nem、%Em:12pixels的'M'常用于印刷的單位CSS教程——文本屬性對(duì)鏈接的修飾A:link

未訪問時(shí)的狀態(tài)A:visited

訪問過后的狀態(tài)A:active

鼠標(biāo)點(diǎn)中不放時(shí)的狀態(tài)A:hover

鼠標(biāo)劃過時(shí)的狀態(tài)a:focus

鏈接獲得焦點(diǎn)時(shí)的狀態(tài)

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上邊框?qū)挾萵em|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教程——邊框?qū)傩訡SS教程——盒模型屬性含義屬性值Width寬度nem|%Height高度nemFloat文字環(huán)繞Left|rightclear去除文字環(huán)繞Left|right|bothCSS教程——圖文混排屬性含義屬性值Display是否顯示Block|inline|list-item|noneWhite-space空白部分Pre|nowrap|normal（是否合并)List-style-type項(xiàng)目編號(hào)Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image項(xiàng)目前圖片Img-urlList-style-position第二行位置Inside|outsideList-style全部屬性Keyword|position|urlCSS教程——列表屬性屬性值含義屬性值含義Auto自動(dòng)N-resize上箭頭Crosshair"+"Se-resize右下Default默認(rèn)Sw-resize左下Hand手形S-resize下箭頭Move移動(dòng)W-resize左箭頭E-resize右箭頭Text"I"Ne-resize右上Wait沙漏Nw-resize左上help幫助CSS教程——鼠標(biāo)屬性屬性含義屬性值Position位置Absolute|relative|staticLeft|top橫向|縱向位置Nem|%Width|height寬度|高度同上Clip剪切Shape|autoOverflow內(nèi)容超出時(shí)Visible|hidden|scroll|autoZ-index立體效果Integervisibility可見性Inherit|visible|hiddenCSS教程——定位屬性屬性值含義