《Web前端開發(fā)項目教程》網頁的藍圖-簡單布局-使用盒模型劃分頁面_第1頁
《Web前端開發(fā)項目教程》網頁的藍圖-簡單布局-使用盒模型劃分頁面_第2頁
《Web前端開發(fā)項目教程》網頁的藍圖-簡單布局-使用盒模型劃分頁面_第3頁
《Web前端開發(fā)項目教程》網頁的藍圖-簡單布局-使用盒模型劃分頁面_第4頁
《Web前端開發(fā)項目教程》網頁的藍圖-簡單布局-使用盒模型劃分頁面_第5頁
已閱讀5頁,還剩36頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

項目02網頁的藍圖—簡單布局任務2-3使用盒模型劃分頁面任務2-3使用盒模型劃分頁面

知識點理解行內元素和塊級元素及其轉換掌握盒子模型及常用樣式屬性掌握行內元素及其樣式屬性技能點學會靈活轉換元素的顯示方式能夠使用盒模型進行頁面布局一、頁面元素的分類和轉換HTML元素按呈現效果可分為塊級元素和行內元素兩大類。塊級元素塊級元素在頁面中以區(qū)域塊的形式呈現,在頁面中會獨自占據一整行(邏輯行),其開頭結尾都會自動換行。行內元素行內元素也稱內聯元素。行內元素與它前后的其他內聯元素內容顯示在一行中,是某個區(qū)域塊中的一部分。1.1塊級元素標題標記<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>,段落標記<p>,分隔線<hr>等通用元素<div>,通常做容器HTML5還新增了很多語義化的標簽,其本質和<div>是相同的,也都是塊級元素。<header>定義文檔或者文檔的部分區(qū)域的頁眉<nav>描述超鏈接區(qū)域<main>定義文檔的主要內容<article>元素表示文檔、頁面、應用或網站中的獨立結構,如論壇帖子、新聞文章、博客等<aside>元素表示側邊欄或嵌入內容<footer>定義頁腳等可以暫時先使用<div>進行頁面布局,后續(xù)熟練了再嘗試使用html5的語義化標簽。1.2行內元素<a>超鏈接元素、<img>圖像元素、<span>文本元素等都是常用的行內元素。<styletype="text/css"> p{font-family:'微軟雅黑';font-size:24px;} span{font-size:36px;color:red; }</style><body> <p>新款<span>6</span>折銷售!</p></body>1.3行內元素和塊級元素的轉換行內元素和塊級元素在實際項目中可以根據需要進行相互轉換,可以通過指定display樣式屬性的取值來決定元素的顯示方式。用法:行內塊元素。兼具行內元素和塊級元素的特點,在內部類似于block元素,比如它擁有block元素的高寬值,也可以設定自己的padding(內填充),border(邊框)與margin(外邊距),而外部的排列方式又類似行內元素,即水平在一行內排列,不是像塊級元素一樣從上到下排列。display:inline;/*將元素轉換為行內元素*/display:block;/*將元素轉換為塊級元素*/display:inline-block;/*將元素轉換為行內塊元素*/二、塊級元素的盒子模型盒子模型的結構2.1盒子的寬度和高度CSS樣式規(guī)則中使用width和height規(guī)定盒子的寬高注意:標準盒子模型的width和height僅指塊級元素的內容區(qū)域大小border-topborder-bottomborder-leftborder-rightContent內容padding-leftpadding-rightpadding-toppadding-bottomMargin-leftMargin-rightMargin-topMargin-bottomwidthheight寬度如何取值?auto,默認值,盒子的實際寬度充滿瀏覽器窗口的內容區(qū)域或者該元素所在父元素的內容區(qū)域。

固定值,例如width:700px;表示盒子寬度為700像素,還可以設置為相對值,例如width:80%;表示盒子寬度占父級內容區(qū)width值的80%。高度如何取值?默認值auto,此時盒子中內容的總高度并不確定,而是由其實際內容的多少來決定的。寬度的取值同樣可以為固定值,也可以為百分比,但是高度的百分比的大小是相對其父級元素高度的大小,若某元素的父元素沒有確定高度,則無法有效使用height=XX%的樣式。2.2盒子的邊框border-widthborder-styleborder-color

修飾屬性四個方向border-topborder-rightborder-bottomborder-left邊框顏色邊框寬度邊框樣式border-color:#FF00FFborder-width:2px1px1px2pxborder-style:soliddashed上邊框右邊框border-top-width:5pxborder-right-style:solid下邊框border-bottom-color:red左邊框border-left-width:5px2.2盒子的邊框注意:以上綜合設置的屬性值順序任意,可以只指定需要設置的屬性,省略則使用默認值border-style屬性的取值默認為none,只要想設置邊框就不能省略。使用border-width、border-style、border-color屬性綜合設置四邊樣式時,必須按上右下左的順時針順序,省略時采用值復制的原則,即一個值為四邊,兩個值為上下/左右,三個值為上/左右/下??s寫形式borderborder-left…統(tǒng)一設置左邊框border:1pxsolidblue(設置四個方向的邊框均為1像素、藍色、實線)border-left:1pxsolidblue(設置左邊框均為1像素、藍色、實線)2.2盒子的邊框例如border-width屬性的寫法

border-width:3px;

border-width:3px5px;

border-width:3px5px6px;border-width:3px5px2px5px;上、右、下、左邊框粗細都為3px上、下邊框粗細為3px;左、右邊框粗細為5px;上邊框粗細為3px;左、右邊框粗細為5px;下邊框粗細為6px;四個數值依次表示上、右、下、左圓角邊框的設置可以使用下面方式同時設置四個角的樣式:border-radius:水平半徑1~4/垂直半徑1~4取值單位可以是px,表示圓角半徑,值越小,角越尖銳,負數無效,例如8px;還可以使用百分比,此時圓角半徑將基于盒子的寬度或高度像素數進行計算,例如50%,此時若盒子寬與高取值相同,則得到一個圓形,否則為橢圓形。例如:border-radius:10px;border-radius:10%;border-radius:50%;border-radius:20px020px0;border-radius:080%;圓角邊框的設置border-topborder-bottomborder-leftborder-rightContent內容Margin-leftMargin-rightMargin-topMargin-bottom2.3盒子的內填充屬性padding設置邊框與內容之間的距離,以便精確控制內容在盒子中的位置。padding-toppadding-rightpadding-bottompadding-left上內邊距右內邊距下內邊距左內邊距padding-right右填充padding-left左填充padding-top上填充padding-bottom下填充2.3盒子的內填充屬性padding并非實體,是透明留白,沒有修飾屬性。不同瀏覽器對于頁面元素的默認padding和margin取值是不相同的,為了保證統(tǒng)一的頁面效果,通常采用*{padding:0;margin:0;}將頁面元素的默認內外邊距置零。padding值不允許為負值,可四邊分別設置,順時針方向,也可一次賦值。容器盒子內填充使用固定值,段落內填充使用相對值。所以當拖動瀏覽器窗口改變其寬度時,段落文字的內填充會隨之發(fā)生變化(這時<p>標記的父元素為<div>),而容器盒子的內填充不會發(fā)生變化。<styletype="text/css">*{padding:0;margin:0;}/*將頁面元素的默認內外邊距置零*/.box{

border:1pxsolid;

padding:20px;

padding-bottom:0; }.boxp{

border:1pxdashedred;

padding:5%;}</style>2.3盒子的內填充屬性<body><divclass="box">

<h3>民俗話節(jié)氣之立秋</h3>

<p>據《月令七十二候集解》:“秋,揪也,物于此而揪斂也”。古人把立秋當作夏秋之交的重要時刻,一直很重視這個節(jié)氣。據記載,宋時立秋這天宮內要把栽在盆里的梧桐移入殿內,等到“立秋”時辰一到,太史官便高聲奏道:“秋來了?!弊喈?,梧桐應聲落下一兩片葉子,以寓報秋之意。</p></div></body>border-topborder-bottomborder-leftborder-rightContent內容padding-leftpadding-rightpadding-toppadding-bottomMargin-leftMargin-rightMargin-topMargin-bottom2.4盒子的外邊距屬性網頁是由多個盒子排列而成的,要想拉開盒子與盒子之間的距離,合理地布局網頁,就需要為盒子設置外邊距,所謂外邊距指的是元素邊框與相鄰元素之間的距離。marginmargin-topmargin-rightmargin-bottommargin-left上外邊距右外邊距下外邊距左外邊距2.4盒子的外邊距屬性div{ border:5pxsolidred; margin-right:50px;/*設置盒子的右外邊距*/ margin-bottom:30px;/*設置盒子的下外邊距*/ /*上面兩行代碼等價于margin:050px30px0;*/}Page

20同時設置盒子的右外邊距和下外邊距,使盒子和父級元素之間拉開一定的距離,是一種常見的頁面排版方法。盒子的居中如何讓盒子在頁面窗口居中?margin水平方向設置auto值可以使塊級元素在父級元素中保持水平居中margin-left=auto;margin-right=auto;因為塊級元素的寬度默認是撐滿父級元素的,如果給寬度設置一個固定值,而左右margin設置為auto,則可以平分剩余空間。但是垂直方向設置為auto值不可以垂直居中,主要因為塊級元素的高度默認是內容高度,與父級元素的高度并沒有直接的關系。實訓任務1常見的單列布局有兩種:header,content和footer等寬的單列布局header與footer等寬,content略窄的單列布局觀察以下兩種單列布局,并使用div+css實現。實訓任務2利用border繪制三角形:假設我們把border-width設置的很大,是什么情況呢?設置相鄰方向的邊框為不同的顏色,又是什么情況呢?盒子的width和height同時縮小為0,又會是什么情況呢?2.5盒子的背景CSS允許應用純色作為盒子背景,也允許使用背景圖像創(chuàng)建復雜的背景效果。背景屬性取值和描述background-color:背景顏色;默認transparent透明background-image:url("圖像url");必須是gif、jpeg、png格式文件background-repeat:圖像平鋪方式;repeat平鋪(默認)、no-repeat不平鋪repeat-x只橫向平鋪、repeat-y只縱向平鋪background-attachment:圖像固定;scroll(默認)隨頁面滾動、fixed圖像在頁面固定background-position:圖像定位;xy坐標值、預定義值、百分比background-size:圖像大??;以像素或百分比規(guī)定背景圖片的尺寸。background-origin:背景圖片的定位區(qū)域;content-box、padding-box或border-boxbackground:背景色;background:url("圖像")平鋪固定定位;指定背景顏色縮寫按順序綜合設置縮寫,不需要可省略取默認值設置背景顏色background-color:背景顏色顏色可以使用多種模式,rgb,#16進制,顏色名都可以。例如:body{background-color:yellow}h1{background-color:#00ff00}h2{background-color:transparent}p{background-color:rgb(250,0,255)}分別為body、h1、h2、p元素用不同方式設置了顏色。background-color不能繼承,其默認值是transparent。也就是說,如果一個元素沒有指定背景色,那么背景就是透明的,這樣顯示的是其祖先元素的背景。設置背景圖片設置背景圖片樣式的規(guī)則:background-image:url(圖片文件路徑及名稱)例如:使用樣式規(guī)則設置背景圖片為flower2.jpg,代碼如下:<styletype=text/css>

.backg{background-image:url(flower2.jpg);}</style>……<bodyclass=“backg”>通過class屬性引用27設置樣式背景圖片如何重復樣式屬性:background-repeat取值:

repeat:平鋪

no-repeat:不平鋪

repeat-x:x方向平鋪

repeat-y:y方向平鋪任務設置背景圖片在x方向平鋪;設置背景圖片在y方向平鋪;設置背景圖片不平鋪28設置樣式背景圖片位置樣式屬性:background-position取值:兩個值xy使用帶不同單位的固定數值:可直接設置圖像左上角在元素中的坐標使用預定義關鍵字:可指定背景圖像在元素中的對齊方式(以頁面元素為參照)水平方向值:left、center、right垂直方向值:top、center、bottom兩個關鍵字的順序任意,若只有一個值則另一個默認center。使用百分比:將百分比同時應用于元素和圖像再按該指定點對齊0%0%表示圖像左上角與頁面元素的左上角對齊50%50%表示圖像的50%與頁面元素的50%對齊背景圖片位置示例例如在一個寬高均為300px的容器中,使用

background-position:150px150px;背景圖片位置示例background-position:50%50%;background-position:100%100%;表示圖像右下角與頁面元素的右下角對齊,而不是圖像充滿元素31設置背景圖片不隨滾動條移動正常情況下,背景圖片的位置是與頁面內容的位置之間有相對固定的關系,即若頁面內容滾動,背景圖片通常也跟隨滾動,設置背景圖片是否滾動的樣式屬性:

background-attachment取值:

scroll:隨滾動條移動

fixed:不隨滾動條移動(相對于窗口的位置固定)設置背景圖片的尺寸background-size以像素或百分比規(guī)定背景圖片的尺寸。如果以百分比規(guī)定尺寸,那么尺寸相對于父元素的寬度和高度。32.backg{

width:400px;

height:400px;

border:1pxsolid;

background-image:url(img/h5.jpg);

background-repeat:no-repeat;

/*background-position:100px100px;*/

background-size:80%; }設置背景圖片的定位區(qū)域background-origin規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于content-box、padding-box或border-box區(qū)域。33實訓任務3多種方法完成圖片在父級盒子中水平、垂直居中的效果,如圖所示。方法1:圖片作為容器盒子的內容(img標記)方法2:圖片作為容器盒子的背景2.6盒子的陰影效果box-shadow:水平偏移量

垂直偏移量

模糊半徑

擴展半徑

顏色陰影類型例如box-shadow:0010px5px#ff0;參數說明:陰影水平偏移量:必選參數,使用正數時,陰影在盒子右邊;負數時,陰影在左邊;陰影垂直偏移量:必選參數,正數時,陰影在底部;負數時,陰影在頂部;陰影模糊半徑:可選參數,只能是正數,默認為0,表示沒有模糊效果,其值越大陰影的邊緣就越模糊;陰影擴展半徑:可選參數,默認0,值為正時,陰影擴大,值為負時,則縮??;陰影顏色:可選參數。如不設定顏色,瀏覽器會取默認色,但各瀏覽器默認取色不一致,因此建議不要省略此參數。陰影顏色可以使用rgba顏色值形式,同時為陰影添加透明效果(取值0-1,0是完全透明,1為不透明)2.6盒子的陰影效果<styletype="text/css"> .backg{ width:200px; height:200px; background:#f00; box-shadow:4px4px4px4pxrgba(50,50,50,0.5); }</style>多陰影效果可以給一個元素設置多個陰影

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論