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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

項(xiàng)目02網(wǎng)頁的藍(lán)圖—簡單布局任務(wù)2-3使用盒模型劃分頁面任務(wù)2-3使用盒模型劃分頁面

知識點(diǎn)理解行內(nèi)元素和塊級元素及其轉(zhuǎn)換掌握盒子模型及常用樣式屬性掌握行內(nèi)元素及其樣式屬性技能點(diǎn)學(xué)會(huì)靈活轉(zhuǎn)換元素的顯示方式能夠使用盒模型進(jìn)行頁面布局一、頁面元素的分類和轉(zhuǎn)換HTML元素按呈現(xiàn)效果可分為塊級元素和行內(nèi)元素兩大類。塊級元素塊級元素在頁面中以區(qū)域塊的形式呈現(xiàn)，在頁面中會(huì)獨(dú)自占據(jù)一整行（邏輯行），其開頭結(jié)尾都會(huì)自動(dòng)換行。行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素。行內(nèi)元素與它前后的其他內(nèi)聯(lián)元素內(nèi)容顯示在一行中，是某個(gè)區(qū)域塊中的一部分。1.1塊級元素標(biāo)題標(biāo)記<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>，段落標(biāo)記<p>，分隔線<hr>等通用元素<div>，通常做容器HTML5還新增了很多語義化的標(biāo)簽，其本質(zhì)和<div>是相同的，也都是塊級元素。<header>定義文檔或者文檔的部分區(qū)域的頁眉<nav>描述超鏈接區(qū)域<main>定義文檔的主要內(nèi)容<article>元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，如論壇帖子、新聞文章、博客等<aside>元素表示側(cè)邊欄或嵌入內(nèi)容<footer>定義頁腳等可以暫時(shí)先使用<div>進(jìn)行頁面布局，后續(xù)熟練了再嘗試使用html5的語義化標(biāo)簽。1.2行內(nèi)元素<a>超鏈接元素、<img>圖像元素、<span>文本元素等都是常用的行內(nèi)元素。<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行內(nèi)元素和塊級元素的轉(zhuǎn)換行內(nèi)元素和塊級元素在實(shí)際項(xiàng)目中可以根據(jù)需要進(jìn)行相互轉(zhuǎn)換，可以通過指定display樣式屬性的取值來決定元素的顯示方式。用法：行內(nèi)塊元素。兼具行內(nèi)元素和塊級元素的特點(diǎn)，在內(nèi)部類似于block元素，比如它擁有block元素的高寬值，也可以設(shè)定自己的padding（內(nèi)填充），border（邊框）與margin（外邊距），而外部的排列方式又類似行內(nèi)元素，即水平在一行內(nèi)排列，不是像塊級元素一樣從上到下排列。display:inline;/*將元素轉(zhuǎn)換為行內(nèi)元素*/display:block;/*將元素轉(zhuǎn)換為塊級元素*/display:inline-block;/*將元素轉(zhuǎn)換為行內(nèi)塊元素*/二、塊級元素的盒子模型盒子模型的結(jié)構(gòu)2.1盒子的寬度和高度CSS樣式規(guī)則中使用width和height規(guī)定盒子的寬高注意：標(biāo)準(zhǔn)盒子模型的width和height僅指塊級元素的內(nèi)容區(qū)域大小border-topborder-bottomborder-leftborder-rightContent內(nèi)容padding-leftpadding-rightpadding-toppadding-bottomMargin-leftMargin-rightMargin-topMargin-bottomwidthheight寬度如何取值？auto，默認(rèn)值，盒子的實(shí)際寬度充滿瀏覽器窗口的內(nèi)容區(qū)域或者該元素所在父元素的內(nèi)容區(qū)域。

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

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

border-width:3px;

border-width:3px5px;

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

border:1pxsolid;

padding:20px;

padding-bottom:0; }.boxp{

border:1pxdashedred;

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

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

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

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

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

repeat：平鋪

no-repeat：不平鋪

repeat-x：x方向平鋪

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

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

background-attachment取值：

scroll：隨滾動(dòng)條移動(dòng)

fixed：不隨滾動(dòng)條移動(dòng)（相對于窗口的位置固定）設(shè)置背景圖片的尺寸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%; }設(shè)置背景圖片的定位區(qū)域background-origin規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于content-box、padding-box或border-box區(qū)域。33實(shí)訓(xùn)任務(wù)3多種方法完成圖片在父級盒子中水平、垂直居中的效果，如圖所示。方法1：圖片作為容器盒子的內(nèi)容（img標(biāo)記）方法2：圖片作為容器盒子的背景2.6盒子的陰影效果box-shadow:水平偏移量

垂直偏移量

模糊半徑

擴(kuò)展半徑

顏色陰影類型例如box-shadow:0010px5px#ff0；參數(shù)說明：陰影水平偏移量：必選參數(shù)，使用正數(shù)時(shí)，陰影在盒子右邊；負(fù)數(shù)時(shí)，陰影在左邊；陰影垂直偏移量：必選參數(shù)，正數(shù)時(shí)，陰影在底部；負(fù)數(shù)時(shí)，陰影在頂部；陰影模糊半徑：可選參數(shù)，只能是正數(shù)，默認(rèn)為0，表示沒有模糊效果，其值越大陰影的邊緣就越模糊；陰影擴(kuò)展半徑：可選參數(shù)，默認(rèn)0，值為正時(shí)，陰影擴(kuò)大，值為負(fù)時(shí)，則縮??；陰影顏色：可選參數(shù)。如不設(shè)定顏色，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)取色不一致，因此建議不要省略此參數(shù)。陰影顏色可以使用rgba顏色值形式，同時(shí)為陰影添加透明效果（取值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>多陰影效果可以給一個(gè)元素設(shè)置多個(gè)陰影

溫馨提示

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

最新文檔

評論

0/150

提交評論