版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
項目五CSS3高級篇學習掌握CSS3高級選擇器的使用掌握CSS3高級特效的使用掌握導航的制作學習目標Contents目錄CSS3高級選擇器的使用任務1CSS3高級特效的使用任務2導航制作任務3HTML3.2任務1CSS3高級選擇器的使用使用高級選擇選擇器可以方便的定位于指定的元素，而不用使用額外的class或id，通過這種方式也可以讓我們的代碼和樣式更加簡潔、靈活、易控制。易控制靈活簡潔層次選擇器01屬性選擇器02任務1CSS3高級選擇器的使用結構偽類選擇器03任務1CSS3高級選擇器的使用1.層次選擇器選擇器類型功能示例EF后代選擇器E元素的后代元素Fpstrong{color:blue}表示P元素后的strong元素變成藍色E>F子代選擇器E元素的第一個子元素，必須是第一個子元素p>strong{background:green}表示p元素的第一個元素strong背景色為綠色E+F相鄰兄弟選擇器E元素的相鄰兄弟F，并且F緊跟著E元素H2+p{background-color:lightblue}表示H2元素后面同級相鄰元素p的背景元素為淺藍色E~F普通兄弟選擇器E元素的普通兄弟F，F元素不必緊跟著E元素H2~P{font-family:微軟雅黑；font-size:30px}表示H2元素后面同級元素p的字體為微軟雅黑，字的大小為30像素<!doctypehtml><html><head><metacharset="utf-8"><title>后代選擇器和子代選擇器</title><styletype="text/css"> pstrong{color:blue;}/*p的后代元素字體全部為藍色，因此第一個子元素、第二個子元素、第三個子元素字體均為藍色*/P>strong{background:green;}/*p的第一個子元素背景為綠色，因此只有"第一個子元素"背景為綠色*/</style></head><body><p>p的后代元素<strong>第一個子元素</strong><s><strong>第二個子元素</strong></s><!--給第二個子元素加刪除線和加粗--> <i><strong>第三個元素</strong></i></p><!--給第三個子元素變傾斜和加粗--></body></html>任務1CSS3高級選擇器的使用1.層次選擇器—示例1<title>相鄰和普通兄弟選擇器</title><styletype="text/css"> h2+p{background-color:lightblue;}/*h2元素的第一個相鄰元素p背景色為淺藍色，因此"所以我們要學會享受寂寞"背景色為淺藍色*/ h2~p{font-size:30px;font-family:"華文行楷"}/*h2的兄弟元素P的字大小都是30像素，字體為華文行楷*/</style></head><body> <p>有些再見，就是不再見</p> <h2>我們笑著說再見，其實心里都知道再見遙遙無期</h2> <p>所以我們要學會享受寂寞</p><!--背景色為藍色、字體為華文行楷、字的大小為30像素--><p>若無緣，近在咫尺也不相見</p><!--字體為華文行楷、字的大小為30像素--><p>有緣，有們會偶遇很多回</p><!--字體為華文行楷、字的大小為30像素--> </ul></body></html>
任務1CSS3高級選擇器的使用1.層次選擇器—示例2任務1CSS3高級選擇器的使用2.屬性選擇器選擇器功能示例E[att^=val]E元素的att屬性值以val開頭的元素P[class^=”tt1”]表示P元素的class屬性為tt1開頭的元素E[att$=val]E元素的att屬性值以val結尾的元素P[class$=”tt1”]表示P元素的class屬性為tt1結尾的元素E[att*=val]E元素的att屬性值包含val的元素P[class*=”tt1”]表示P元素的class屬性包含tt1的元素<styletype="text/css"> p[class^="tt1"]{background-color:pink;} p[class$="tt1"]{text-align:center;} p[class*="tt"]{font-family:楷體;border:2pxdotted;}</style></head><body><pclass="tt1">人生，只要能照亮某個角落就夠了。</p><!--tt1即可以作為開頭的元素，也可作為tt1結尾的元素--><pclass="tt1ab">未來歲月漫長，依舊值得期待。</p><!--tt1作為開頭的元素--><pclass="att1">與其強求別人改變，不如把心力放在"如何讓自己快樂！"。</p><!--tt1作為結尾的元素--> <pclass="tt1">“來則歡喜，去則放手。”這對彼此來說最輕松.</p><pclass="att2">不要認為別人的給予理所當然，感謝你所得的，并且不再奢求更多。</p><!--包含tt的元素--><pclass="at3t">能與”心地善良的人“親密交往，是非常難得的事。</p><pclass="tt4">痛苦會成為未來重要的經驗，所以一次也不要浪費。</p><!--包含tt的元素--></body></html>任務1CSS3高級選擇器的使用2.屬性選擇器—示例任務1CSS3高級選擇器的使用3.結構化偽類選擇器選擇器功能示例:root選擇文檔的根元素:root{color:red}表示根元素的所有字體顏色為紅色。:not也稱為否定選擇器，用于選擇除了某個元素之外的所有元素p:not(.t){background-color:red}表示除了P元素中類為t的元素外的所有元素背景為紅色。:empty用于選擇沒有內容的元素p:empt{background-color:green；14px;}:表示空內容的p元素背景色為綠色:target用于選取當前活動的目標元素，只有用戶單擊了超鏈接，而且此鏈接地址為本頁面的目標位置時，target樣式才起作用：target{border:2solidblue}表示單擊鏈接時，其目標的邊框為2像素實線藍色。（注意目標必須和鏈接在同一個頁面中）:before用于在元素內部所有子元素之前插入內容，插入內容必須用content屬性設定li:before{content:url(images/tb.jpg)}表示li所有元素之前插入圖片tb.jpg:after用于在元素內部所有子元素之后插入內容，插入內容必須用content屬性設定li:after{content=”--ok”;color:#999;font-size:10px}表示li所有元素之后插入字體大小為10像素、顏色為999的—okE:first-child選取父元素E的第一個子元素li:first-child{background-color:lightblue;}表示li元素的第一個子元素背景為淡藍色E:last-child選取父元素E的最后一個子元素li:last-child{background-color:yellow;}表示li元素的最后一個子元素背景為黃色E:nth-child(n)選取父元素E的第n子元素（若n為”odd”表示“奇數”、”even”表示偶數）li:nth-child(2){color;red}表示li元素的第二個子元素字體為紅色。E:nth-last-child(n)選取父元素E的倒數第n子元素li:nth-last-child(3){color;blue}表示li元素的倒數第3個子元素字體為藍色。E:first-of-type選取父元素E的具有指定類型的第一個子元素P:first-of-type{text-align:center}表示p元素的第1個類型子元素字體居中對齊。E:last-of-type選取父元素E的具有指定類型的最后一個子元素P:last-of-type{background-color:orange}表示p元素的倒數最后一種類型子元素背景為橙色。E:nth-of-type（n）選取父元素E的具有指定類型的第n子元素P:nth-of-type(2){font-family:“微軟雅黑“}表示p元素的第2個類型子元素字體為微軟雅黑。<title>：root、empty、target選擇器</title><styletype="text/css"> :root{background:#D4DFF5;text-align:center} p:empty{background:#E0AACF;height:14px;} :target{border:1pxdashedblue;}/*1像素的藍色虛線邊框*/ p:before{content:url(images/tb.gif)}/*p的所有元素之前插入tb.gif圖片*/ p:after{content:"--洪應明";font-size:10px;color:#999}/*p的所有元素之后插入字號為10像素、顏色為#999的文字：--洪應明*/ } </style></head><body> <h3>菜根譚</h3> <ahref="#liehuo">烈火</a><ahref="#yinian">一念</a><ahref="#xianzhong">閑中</a> <pid="liehuo">烈火煉真金，成事須用功</p><pid="yinian">一念錯皆錯，萬善全方全</p> <p></p> <pid="xianzhong">閑中消忙錯，靜時息非心</p> </body></html>任務1CSS3高級選擇器的使用3.屬性選擇器—示例1<title>:first等選擇器</title><styletype="text/css"> p:only-child{background-color:aquamarine;text-align:center} li:first-child{background-color:lightgreen;} li:last-child{border-bottom:2pxdottedorange;}li:nth-child(3){font-family:"華文行楷";}li:nth-last-child(3){color:red;} li:nth-child(odd){text-align:center;}</style></head><body> <h2>玉溪</h2> <div><p>聶耳故鄉</p></div><!--p元素是div元素的唯一孩子，所以P元素里的內容，自動套用p:only-child元素--> <div><p>玉溪因水得名，玉溪河即《水經注》所記之橋水，明代文獻中已稱玉溪，取其清流如玉之意</p> <p>玉溪礦產資源有鐵、銅、鎳、磷等，潛在經濟價值達4000億元以上。鐵礦資源儲量7.2億噸，居云南省首位</p> </div><!--div元素里有2個P元素，所以P不是div的唯五孩子，故p元素里的內容不會自動套用p:only-child元素--> <ul> <li>撫仙湖</li><!--li元素的第一個孩子--> <li>嘎灑鎮</li> <li>納古鎮</li> <li>櫻花谷</li> <li>那諾集市</li> <li>磨盤山</li> </ul></body></html>任務1CSS3高級選擇器的使用3.屬性選擇器—示例2:root選擇器:empty選擇器:only-child選擇器:nth-of-type（n）選擇器、:nth-last-of-type（n）選擇器:not選擇器:target選擇器:first-child選擇器、:last-child選擇器、:nth-child（n）選擇器、:nth-last-child（n）選擇器
高級選擇器:before選擇器:after選擇器技能拓展任務2CSS3高級特效的使用CSS漸變01CSS變形02CSS過渡03CSS動畫04任務2CSS3高級特效的使用1.css漸變CSS3漸變可以顯示兩個或多個指定的顏色之間顯示平穩的過渡。CSS3定義了兩種類型的漸變（gradients）：線性漸變（LinearGradients）-向下/向上/向左/向右/對角方向徑向漸變（RadialGradients）-由它們的中心定義（1）線性漸變(linear-gradient)語法:background-images:linear-gradient(direction,color-stop1,color-stop2,...);（2）徑向漸變(RadialGradients)語法:background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);#box1{height:200px;background-image:linear-gradient(green,black);}任務2CSS3高級特效的使用1.CSS漸變—示例#box1{height:200px;background-image:linear-gradient(toright,blue,orange);}#box1{width:200px;height:200px;background-image:radial-gradient(red,white,blue);}#box1{width:200px;height:200px;background-image:radial-gradient(blue20%,orange50%,red20%);}任務2CSS3高級特效的使用2.css變形CSS3中，transform屬性可以實現變形，變形效果主要有：移動（translate）、縮放（scale）、旋轉（rotate）、傾斜（skew）。屬性值說明取值none無變換translate(X,Y)translateX(x)translatY(y)水平方向和垂直方向兩個方向上平移元素。x和y的取值，可以是長度單位，如20px,也可以是百分比，如10%在水平方向平移元素在垂直方向平移元素scale(x,y)scaleX(x)scaleY(y)水平方向和垂直兩個方向上縮放元素x和y的取值是數字，默認值是1大于1，放大小于1，縮小改變的不是元素的寬高，而是x和y軸的刻度。在水平方向上縮放放元素在垂直方向上縮放放元素rotate(angle)旋轉元素angle單位通常是deg,1deg=1度。比如45degskew(angleX,angleY)skewX(angleX)skewY(angleY)在水平方向和垂直兩個方向上使元素傾斜一定的角angleX和angleY取值是數字+deg，比如40deg在水平方向傾斜一定的角在垂直方向傾斜一定的角matrix(a,b,c,d,e,f)將所有2D變形函數(旋轉、縮放、移動及傾斜)組合在起任務2CSS3高級特效的使用2.css變形CSS3中，變形的其他屬性。屬性說明取值transform-origin表示元素旋轉的中心點，通常取兩個值。第一個值，表示元素旋轉中心的水平位置；第二值表示元素旋轉中心的垂直位置默認值為50%50%；第一個值可以取：left、right、center、長度、百分比;第二個值可以取：top、bottom,center、長度、百分比。transform-style指定嵌套元素如何在3D空間中呈現flat：表示所有子元素在2D平面呈現。preserve-3d：表示所有子元素在3D空間中呈現。perspective設置用戶和元素3D空間Z平面之間的距離取值越小，3D效果就越明顯；值無窮大，或值為0時與取值為none效果一樣。backface-visiblity定義元素在不面對屏幕時是否可見任務2CSS3高級特效的使用3.css過渡CSS3過渡：在給定的時間從一種樣式逐漸改變為另一種的效果。可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果。屬性說明取值transition用于在一個屬性中設置四個過渡屬性。四個子屬性之間不能用逗號隔開，只能用空格隔開Propertydurationtiming-functiondelaytransition-property規定設置過渡效果的CSS屬性的名稱All(默認)：所有屬性都獲得過渡None:沒有過渡Property:可過渡的樣式。用逗號隔開多個樣式。transition-duration規定完成過渡效果需要時間（以秒或毫秒計），默認是0s。transition-timing-function規定過渡效果的時間曲線。默認是"ease"函數。Linear：線性過渡Ease：平滑過渡ease-in：由慢到快ease-out：由快到慢ease-in-out：由慢到快到慢cubic-bezier(n,n,n,n)：特殊的立方貝塞爾曲線效果。transition-delay規定過渡效果延遲時間。默認是0s。以秒為單位（S）或毫秒（ms）。默認值：0s。任務2CSS3高級特效的使用4.css動畫CSS3動畫，使元素從一種樣式逐漸變化為另一種樣式的效果。通過animation屬性創建幀動畫。通常用@keyframes規則來定義多個關鍵幀，然后再用animation屬性創建每個關鍵幀的屬性來實現復雜的動畫效果。屬性說明取值@keyframes定義關鍵幀
animation所有動畫屬性的簡寫屬性Namedurationtiming-functiondelayiteration-countdirectionanimation-name規定關鍵幀動畫的名稱Keyframename動畫名稱animation-duration動畫效果完成的時間Time，默認為0animation-timing-function指定動畫速度曲線linear：動畫勻速運動ease(默認值)ease-in：由慢到快ease-in-out：由慢到快到慢Steps：指定了時間函數中的間隔數量（步長）animation-delay設置動畫效果延遲時間time,默認為0animation-iteration-count定義動畫的播放次數normal:播放次數infinite:循環播放animation-direction指定動畫的播放方向Alternate：偶數向前播放，奇數向相反方向播放animation-fill-mode規定動畫結束后的狀態forward:向前backwards:向后animation-play-state指定動畫運行狀態running:運行Paused:暫停任務2CSS3高級特效的使用案例1：圖片懸停遮罩效果任務2CSS3高級特效的使用案例2：圖片切換效果任務2CSS3高級特效的使用案例3：魔方:CSS漸變:CSS過渡過渡：
transition:CSS變形:CSS動畫變形：移動（translate）、縮放（scale）、旋轉（rotate）、傾斜（skew）。
高級特效動畫：animation技能拓展任務3導航制作垂直導航制作03復雜導航制作04認識導航01水平導航制作021.認識導航任務3導航制作了解網站信息的組織結構了解導航的外觀設計了解導航的交互設計1.認識導航任務3導航制作成功導航的特征1、合理的信息組織結構1）內容類信息是網站的主要內容，通常使用網站的主導航來組織。主導航大多采用一級導航或二級導航，一般不要超過三級導航。2）周邊類信息指的是網站中不那么重要，但是又必須要有的內容，例如合作伙伴、聯系我們等，通常使用次導航來設計，放置在網頁中不那么重要的位置。3）功能類信息指的是具有特定功能的信息，例如購物車、用戶登陸與注冊等。功能類信息是提供給瀏覽者使用的工具，必須放置在顯眼并隨手可及的地方。1.認識導航任務3導航制作成功導航的特征2、良好的外觀設計1）合理的布局設計。導航條的布局設計包括在網頁中的位置、所占空間比例、排列方式等。2）清晰的視覺傳達。成功的導航，要求有明確的標簽文字，能夠準確表達菜單的信息含義；要有清晰的視覺效果，標簽文字可讀性好，圖標的指示明確；要有清晰的視覺層次，能夠明確區分各級導航菜單，能夠清楚定位當前所點擊的菜單。3）相稱的設計風格。成功的導航應該具有與網站類型相稱的設計風格，再出色的導航設計方案都必須服務于網站的整體需求，與網站融為一體。1.認識導航任務3導航制作成功導航的特征3、良好的交互設計1）合理的視覺效果。鼠標狀態發生改變時，導航菜單的變化在視覺效果上應做到醒目、自然、不突兀，既能夠起到提示的效果，但是又不喧賓奪主，不能破壞網頁的整體設計風格。2）易于學習。成功的導航交互設計應該是有規律的、易于學習的，瀏覽者能夠快速理解導航菜單的變化規律和意圖，并根據這些規律找到信息的定位。3）富有創意。富有創意的交互設計是成功導航的重要特征，在常規與個性之間尋求一個平衡點，使得導航既有吸引力也有良好的可用性。1.認識導航任務3導航制作小節無論如何，記住關鍵的一條設計原則就是，永遠要將最關鍵、最重要的內容信息讓用戶輕松找到，這就是導航應該做到的。創意不是天馬行空，而是在遵循導航設計的基本原則基礎上進行的與網站需求相符的個性化設計。感謝您的觀看！任務3導航制作2.水平導航制作-學習目標掌握水平導航條的標簽結構設計、樣式設計、以及鼠標交互設計。任務3導航制作2.水平導航制作-任務目標使用超鏈接設計導航條結構拓展超鏈接的響應區設計鼠標經過、按下、訪問過的樣式任務3導航制作2.水平導航制作—導航制作設計導航條的標簽結構任務3導航制作2.水平導航制作—導航制作設計導航條的CSS樣式1）外層div樣式任務3導航制作2.水平導航制作—導航制作設計導航條的CSS樣式2）超鏈接的公共樣式任務3導航制作2.水平導航制作—導航制作設計導航條的CSS樣式3）超鏈接各個狀態的樣式任務3導航制作2.水平導航制作—任務小節使用display:inline-block拓展超鏈接的響應區偽類選擇符實現鼠標交互控制>>遵照優先順序a:link、a:visited、a:hover、a:active，如果順序打亂會看不到正確效果。感謝您的觀看！任務3導航制作3.垂直導航制作-學習目標掌握垂直導航條的標簽結構設計、樣式設計、以及鼠標交互設計。任務3導航制作3.垂直導航制作-任務目標使用超鏈接設計導航條結構拓展超鏈接的響應區設計鼠標經過的樣式利用background設計圖標任務3導航制作3.導航制作—導航制作設計導航條的標簽結構垂直任務3導航制作3.垂直導航制作—導航制作設計導航條的CSS樣式1）全局樣式任務3導航制作3.垂直導航制作—導航制作設計導航條的CSS樣式1）標題樣式任務3導航制作3.垂直導航制作—導航制作設計導航條的CSS樣式1）超鏈接的公共樣式任務3導航制作3.垂直導航制作—導航制作設計導航條的CSS樣式1）“特色圖書”的樣式任務3導航制作3.垂直導航制作—導航制作設計導航條的CSS樣式1）鼠標經過的樣式任務3導航制作4.垂直導航制作—任務小節使用display:block拓展超鏈接的響應區偽類選擇符實現鼠標交互控制運用background靈活定位圖標感謝您的觀看！任務3導航制作4.復雜導航制作-學習目標能夠靈活運用之前所學知識實現復雜效果的導航條設計。任務3導航制作4.復雜導航制作-任務目標合理設計導航條的標簽結構實現hover狀態下淡紫色背景凸起的立體效果任務3導航制作4.復雜導航制作—導航制作設計導航條的標簽結構<divid="nav"><ul><li><ahref="">首頁</a></li><li><ahref="">學院概況</a><ul><li><ahref="">學院簡介</a></li><li><ahref="">組織機構</a></li><li><ahref="">發展歷史</a></li><li><ahref="">校園風光</a></li></ul></li><li><ahref="">學院新聞</a><ul><li><ahref="">學院要聞</a></li><li><ahref="">公告通知</a></li><li><ahref="">校園動態</a></li></ul></li><li><ahref="">學院設置</a><ul><li><ahref="#">馬克思主義學院</a></li><li><ahref="#">公共教學部</a></li><li><ahref="#">計算機信息學院</a></li><li><ahref="#">電氣學院</a></li><li><ahref="#">經濟管理學院</a></li><li><ahref="#">交通運輸學院</a></li><li><ahref="#">機械學院</a></li><li><ahref="#">建筑工程學院</a></li></ul></li><li><ahref="">教育教學</a></li><li><ahref="">培訓鑒定</a></li><li><ahref="">招生就業</a><ul><li><ahref="">招生信息網</a></li><li><ahref="">就業信息網</a></li></ul></li><li><ahref="">科學研究</a></li></ul></div>任務3導航制作4.復雜導航制作—導航制作設計導航條的CSS樣式1）全局樣式任務3導航制作4.復雜導航制作—導航制作設計導航條的CSS樣式2）菜單橫排使用浮動float:left
實現橫排任務3導航制作4.復雜導航制作—導航制作設計導航條的CSS樣式3）導航的超鏈接樣式任務3導航制作4.復雜導航制作—導航制作設計導航條的CSS樣式3）鼠標移到導航上的超鏈接樣式任務3導航制作4.復雜導航制作—導航制作設計導航條的CSS樣式4）下拉菜單的樣式任務3導航制作4.復雜導航制作—任務小節使用“列表嵌套超鏈接”實現復雜導航條的標簽設計使用float實現菜單的橫排列使用background設置導航背景使用block設置導航塊。感謝您的觀看！項目六創建CSS3盒子模型理解盒子模型的概念掌握盒子模型的相關屬性掌握盒子模型的定位學習目標Contents目錄認識盒子模型任務1盒子模型的定位任務3理解盒子模型的相關屬性任務2任務1認識盒子模型1.概念CSS盒子模型是網頁設計中經常用到的一種重要的思維模型。它主要用來對網頁元素進行布局和定位，通常用div來定義盒子。一個網頁可以由若干個盒子組合而成，好比下圖的相框。一個盒模型主要包括屬性有：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。height任務1認識盒子模型2.主要屬性屬性說明:div標記就是一個區塊容器標記，簡稱塊標記，塊通稱為盒子。Content(內容)-盒子的內容，顯示文本和圖像。Padding(內邊距)-內容區和邊框之間的空間，內外距是透明的。Border(邊框)-圍繞在內邊距和內容外的邊框。Margin(外邊距)-
盒子的最外圍，是添加在邊框外周圍的空間。外邊距是透明的。任務1認識盒子模型3.盒子模型大小標準盒子模型的大小：標準盒模型中width指的是內容區域content的寬度；height指的是內容區域content的高度。標準盒模型的盒子的大小=content+border+padding+margin也就是一個完整的盒模型。它的寬度和高度的計算方式為:寬度=左外邊距+左邊框寬+左內邊距＋內容寬度＋右內邊距+右邊框寬＋右外邊距高度=上外邊距+上邊框寬+上內邊距+內容高度+下內邊距+下邊框寬+下外邊距任務2理解盒子模型的相關概念1.Border屬性邊框可以使用border-style、border-width和border-color以及它們的簡寫屬性border來設置邊框的樣式。其中border-style屬性為邊框中最主要的屬性，如果沒有設置該屬性的話，其它的邊框屬性也會被忽略。border屬性是各個邊框屬性的簡寫屬性,語法格式如下border{border-widthborder-style（必需）border-color}border-width:屬性指定要顯示的邊框寬度。border-style:屬性指定要顯示的邊框樣式。border-color:屬性指定要顯示的邊框顏色。Bordery-style(邊框樣式）solid:邊框樣式為單實線。
dashed:邊框樣式為虛線。dotted:邊框樣式為點線。double:邊框樣式為雙實線。groove：邊框樣式為3D凹槽邊框。ridge：邊框樣式為3D壟狀邊框。inset：邊框樣式為3Dinset邊框。outset：邊框樣式為3Doutset邊框。
none：邊框樣式為無邊框hidden：邊框樣式為隱藏。Border(邊框類型）(1)border-top:上邊框寬度、樣式、顏色。(2)border-right:右邊框寬度、樣式、顏色。(3)border-bottom:下邊框寬度、樣式、顏色。(4)border-left:左邊框寬度、樣式、顏色。創建CSS3盒子模型2.邊框寬度border-widthborder-width屬性可以設置一到四個值（用于上邊框、右邊框、下邊框和左邊框）例如，設置上下為20像素，左右為5像素的盒子，盒子邊框樣式為實線，代碼如下div{border-style:solid;border-width:20px5px}也可詳寫為div{border-style:solid;border-width:20px5px20px5px}請解釋下面的語句div{border-style:solid;border-width:30px10px20px;border-color:red}也可詳寫為？任務2理解盒子模型的相關概念3.margin(外邊距)margin屬性可以同時指定上、右、下、左（以此順序）邊距外邊距位于盒子模型的最外圍，是邊框之外的空間，通過外邊距可以使盒子與盒子之間不會緊湊的連接在一起，是CSS布局中的一種重要手段。margin-top:上外邊距大小。margin-right:右外邊距大小。margin-bottom:下外邊距大小。margin-left:左外邊距大小。margin取值可以是長度、百分比或auto。當使用百分比時，表示相對于父元素寬度的百
分比；auto:設置瀏覽器邊距，其效果依賴于瀏覽器；長度：可以使用用px、em等作單位。#box{margin-top:50px;margin-right:20px;margin-bottom:15px;margin-left:10px;}#box{margin:50px20px15px10px;}#box{margin:30px;}請問表示什么含義#box{margin:20px30px;}請問表示什么含義#box{margin:0auto;}請問表示什么含義任務2理解盒子模型的相關概念4.
padding(內邊距)padding屬性可以同時指定上、右、下、左（以此順序）邊距內邊距用于設置盒子中內容與邊框之間的距離padding-top:上內邊距大小。padding-right:右內邊距大小。padding-bottom:下內邊距大小。padding-left:左內邊距大小。padding取值可以是長度和百分比,但不能使用負值。#box{padding-top:50px;padding-right:20px;padding-bottom:15px;padding-left:10px;}#box{padding:50px20px15px10px;}#box{padding:30px;}請問表示什么含義#box{padding:20px30px;}請問表示什么含義任務2理解盒子模型的相關概念5.圓角邊框（border-radius)CSS3中新增的border-radius屬性可以給元素設置圓角邊框。這是CSS3很有吸引力的一個功能。其基本語法格式如下。border-radius:圓角半徑每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。取值可以是長度和百分比,
。#box{border-top-left-radius:50px;border-top-right-radius:20px;border-bottom-right-radius:15px;border-bottom-left-radius:10px;}#box{border-radius:50px20px15px10px;}#box{border-radius:30px;}請問表示什么含義#box{border-radius:20px30px;}請問表示什么含義任務2理解盒子模型的相關概念6.盒子陰影（box-shadow)box-shadow屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由2-4個長度值、一個可選的顏色值和一個可選的inset關鍵字來規定。省略長度的值是0。其基本語法格式如下。box-shadow:陰影水平偏移量陰影垂直偏移量陰影模糊半徑陰影擴展半徑陰影顏色陰影類型；#box{box-shadow:10px5px6px8pxred;}#box{box-shadow:11px10px9px6px;}#box{box-shadow:30px20px6px9pxgreen;}請問表示什么含義#box{box-shadow:10px30px;}請問表示什么含義說明：（1）陰影水平偏移量:必選頂，可以為負值，正值表示向右偏移，負值表示向左偏移。（2）陰影垂直偏移量:必選項，可以為負值，正值表示向下偏移，負值表示向上偏移。（3）陰影模糊半徑:可選頂,不能為負值，值越大陰影就越模糊，默認值為0，表示不模糊。（4）陰影擴展半徑:可選項,可為負值。正值表示在所有方向擴展，負值表示在所有方向上消減，默認值為0。(5）陰影顏色:可選項,省略時為黑色。(6）陰影類型:可選項,內陰影的值為inset,省略時為外陰影。任務2理解盒子模型的相關概念1.文檔流（documentflow）文檔流又稱普通流，指的是元素按照其在HTML中的位置順序決定排布的過程,主要的形式是自上而下（塊級元素）,一行接一行,每一行從左至右（行內元素）。也可理解為將窗體自上而下分成一行行,并在每行中按從左至右的順序排放元素。簡單的說：網頁在解析時，遵循從上向下，從左向右的順序。脫離文檔流:脫離了文檔流的管理。不受文檔流的布局約束了，并且更重要的一點是，這個標簽在原文檔流中所占的空間也被清除了。脫離文檔流的元素處于浮動狀態（可以理解為漂浮在文檔流的上方），CSS有3種基本的定位機制:普通流、float（浮動）position(定位)脫離文檔的的定位機制通常包括float、position：absolute、fixed。任務3盒子模型的定位2.盒子模型的的浮動(float)浮動定位的基本機制是:設置為浮動的元素從正常的文本流中移出，但它依然對原來存在于文本流中的元素產生影響,這些元素的內容（注意不是框，而是框中的內容）會圍繞在浮動元素周圍，就好像“河流”圍繞“小島”一樣;浮動的框可以向左或向右移動，直到它的外邊緣碰
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論