網(wǎng)頁(yè)制作案例教程HTML5+CSS3 課件 項(xiàng)目5、6 盒子模型、浮動(dòng)和定位_第1頁(yè)
網(wǎng)頁(yè)制作案例教程HTML5+CSS3 課件 項(xiàng)目5、6 盒子模型、浮動(dòng)和定位_第2頁(yè)
網(wǎng)頁(yè)制作案例教程HTML5+CSS3 課件 項(xiàng)目5、6 盒子模型、浮動(dòng)和定位_第3頁(yè)
網(wǎng)頁(yè)制作案例教程HTML5+CSS3 課件 項(xiàng)目5、6 盒子模型、浮動(dòng)和定位_第4頁(yè)
網(wǎng)頁(yè)制作案例教程HTML5+CSS3 課件 項(xiàng)目5、6 盒子模型、浮動(dòng)和定位_第5頁(yè)
已閱讀5頁(yè)，還剩93頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML5CSS3項(xiàng)目5盒子模型網(wǎng)頁(yè)制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)理解盒子模型，并能運(yùn)用其相關(guān)屬性1理解熟悉熟悉掌握2熟悉行內(nèi)元素、塊元素和行內(nèi)塊元素3掌握盒子模型的使用，能夠使用盒子模型進(jìn)行簡(jiǎn)單的頁(yè)面布局。熟悉表格元素和HTML5頁(yè)面文檔結(jié)構(gòu)。41認(rèn)識(shí)盒子模型2盒子模型常用的屬性3行內(nèi)元素、塊元素和行內(nèi)塊元素4CSS3新增盒子樣式任務(wù)分解5案例：制作“四有青年”網(wǎng)頁(yè)7HTML5新增文檔結(jié)構(gòu)元素6基本表格元素01認(rèn)識(shí)盒子模型PART01認(rèn)識(shí)盒子模型盒子模型：是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子。由內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。盒子模型盒子模型認(rèn)識(shí)盒子模型margin：外邊距，邊框外的區(qū)域，盒子之間的距離。border：邊框，圍繞在內(nèi)邊距和內(nèi)容外的邊框。padding：內(nèi)邊距，內(nèi)容和邊框之間的區(qū)域。content：盒子的內(nèi)容，如顯示文本和圖像。盒子模型不同部分的說(shuō)明元素的浮動(dòng)div

盒子基本語(yǔ)法格式<div>盒子內(nèi)容</div>設(shè)置浮動(dòng)效果動(dòng)手實(shí)踐demo1div{width:200px;height:100px;border:15pxsolidblue;

margin:30px;padding:20px;background-color:#ccc;font-size:20px;}<body><div>設(shè)置盒子的內(nèi)容</div>認(rèn)識(shí)盒子模型

其實(shí)所有HTML元素都可以看作盒子p{

width:300px;

border:25pxsolidgreen;

padding:25px;

margin:25px;}<body><p>盒子內(nèi)容</p></body>盒子模型元素p例認(rèn)識(shí)盒子模型盒子模型盒子的高度與寬度盒子的總寬度=width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和

width

左內(nèi)邊距

右內(nèi)邊距邊框

右外邊距

邊框02盒子模型常用的屬性PART02盒子模型常用的屬性盒子模型border基本語(yǔ)法格式border：邊框樣式

邊框?qū)挾冗吙蝾伾吙驑邮?/p>

：none無(wú)（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線邊框?qū)挾龋合袼刂?/p>

如：1px邊框顏色：顏色值、#十六進(jìn)制、rgb(r,g,b)；<style>.set{border:5pxsolid#00ff;width:20%;}</style><divclass="set">設(shè)定邊框</div>例border用來(lái)設(shè)置盒子邊框盒子模型常用的屬性盒子模型邊框?qū)傩詫傩悦枋鯾order-style用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。border-width簡(jiǎn)寫(xiě)屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。border-color簡(jiǎn)寫(xiě)屬性，設(shè)置元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?個(gè)邊分別設(shè)置顏色。border-bottom簡(jiǎn)寫(xiě)屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。border-bottom-color設(shè)置元素的下邊框的顏色。border-bottom-style設(shè)置元素的下邊框的樣式。border-bottom-width設(shè)置元素的下邊框的寬度。border-left簡(jiǎn)寫(xiě)屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。border-left-color設(shè)置元素的左邊框的顏色。border-left-style設(shè)置元素的左邊框的樣式。border-left-width設(shè)置元素的左邊框的寬度。border-right簡(jiǎn)寫(xiě)屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。border-right-color設(shè)置元素的右邊框的顏色。border-right-style設(shè)置元素的右邊框的樣式。border-right-width設(shè)置元素的右邊框的寬度。border-top簡(jiǎn)寫(xiě)屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。border-top-color設(shè)置元素的上邊框的顏色。border-top-style設(shè)置元素的上邊框的樣式。border-top-width設(shè)置元素的上邊框的寬度。盒子模型常用的屬性盒子模型border-style語(yǔ)法格式border-style：樣式值{1，4};

.one{border-style:solid;}.two{border-style:soliddouble;}.three{border-style:soliddoubledotted;}.four{border-style:soliddoubledotteddashed;}例盒子模型常用的屬性盒子模型margin語(yǔ)法格式margin：外邊距值{1，4};定義元素周圍的空間,可以有一個(gè)值，兩個(gè)值，三個(gè)值和四個(gè)值；也可以四個(gè)外邊距分別設(shè)置margin-bottom 設(shè)置元素的下外邊距。margin-left 設(shè)置元素的左外邊距。margin-right 設(shè)置元素的右外邊距。margin-top 設(shè)置元素的上外邊距。margin:20px50px75px100px;//上、右、下、左外邊距分別為20px、50px、70px、100pxmargin:25px50px75px;//上邊距為25px,左右邊距為50px,下邊距為75pxmargin:25px50px;//上、下外邊距為20px；左右外邊距為50pxmargin:20px;//上、下、左、右外邊距均為20px例margin用來(lái)設(shè)置外邊距盒子模型常用的屬性盒子模型盒子居中#box1{ width：400px； border：1pxsolidblack; margin:5pxauto/*利用margin實(shí)現(xiàn)塊元素水平居中，并且上下拉開(kāi)5像素邊距*/}例當(dāng)對(duì)塊級(jí)元素應(yīng)用寬度屬性width，并將左右的外邊距都設(shè)置為auto，可使塊級(jí)元素水平居中，實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局。盒子模型常用的屬性盒子模型<styletype="text/css">#box1{height:100px;width:100px;border:1pxsolidblack;margin:0auto;}</style></head><body><divid="box1"></div></body>例動(dòng)手實(shí)踐demo2盒子模型常用的屬性盒子模型padding語(yǔ)法格式padding：內(nèi)邊距值{1，4};定義元素邊框與元素內(nèi)容之間的空間，即上下左右的內(nèi)邊距?？梢杂幸粋€(gè)值，兩個(gè)值，三個(gè)值和四個(gè)值；也可以四個(gè)內(nèi)邊距分別設(shè)置padding-bottom 設(shè)置元素的下內(nèi)邊距。padding-left 設(shè)置元素的左內(nèi)邊距。padding-right 設(shè)置元素的右內(nèi)邊距。padding-top 設(shè)置元素的上內(nèi)邊距。padding:20px50px75px100px;padding:20px50px75px；padding:20px50px;padding:20px;例padding用來(lái)設(shè)置內(nèi)邊距，控制內(nèi)容與邊框之間的距離盒子模型常用的屬性盒子模型語(yǔ)法格式background-color:背景顏色background-colorp{background-color:#ccc;}例background-color用來(lái)設(shè)置盒子的背景顏色盒子模型常用的屬性盒子模型語(yǔ)法格式background-image:背景圖像background-imagep{background-color:#CCC;background-image:url(img/book.jpg);}例設(shè)置盒子背景圖像例background-image是用來(lái)設(shè)置盒子的背景圖像盒子模型常用的屬性盒子模型語(yǔ)法格式background-repeat：圖像平鋪屬性background-repeat設(shè)置背景圖像平鋪默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制。例平鋪屬性值含義repeat沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪盒子模型常用的屬性盒子模型語(yǔ)法格式background-position：圖像位置值1[,圖像位置值2]background-position設(shè)置背景圖像位置。例該屬性提供2個(gè)參數(shù)值。第一個(gè)用于橫坐標(biāo)，第二個(gè)用于縱坐標(biāo)。如果只提供一個(gè)，該值將用于橫坐標(biāo)；縱坐標(biāo)將默認(rèn)為50%。橫坐標(biāo)值可以為像素值、百分比、left、center、right。縱坐標(biāo)值可以為像素值、百分比、top、center、bottom。body{background-image:url(img/bg.jpg)；background-repeat:no-repeat;background-position:centerbottom;}例盒子模型常用的屬性盒子模型語(yǔ)法格式background-attachment：圖像固定屬性background-attachment設(shè)置背景圖像固定例固定屬性取值含義scroll圖像隨頁(yè)面元素一起滾動(dòng)（默認(rèn)值）。fixed圖像固定在屏幕上，不隨頁(yè)面元素滾動(dòng)。body{background-image:url(img/bg.jpg)；background-attachment:fixed;}例盒子模型常用的屬性盒子模型語(yǔ)法格式background-size:屬性值1屬性值2;background-size設(shè)置背景圖像大小例屬性值說(shuō)

明像素值設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto；百分比以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto；cover把背景圖像擴(kuò)展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中；contain把圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域；盒子模型常用的屬性盒子模型多重背景圖像background-image:url(images/tupian1.png),url(images/tupian2.png),url(images/tianpian3.png);例在CSS3中，通過(guò)background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值可以實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開(kāi)。盒子模型常用的屬性盒子模型<style>div{height:600px;width:600px;border:1pxsolidblack;background-image:url(img/tupian1.jpg),url(img/66.jpg),url(img/JL.png);background-repeat:no-repeat;background-position:lefttop,leftbottom,righttop;text-align:center; }</style><body><div>設(shè)置多重背景圖像</div></body>例動(dòng)手實(shí)踐demo303行內(nèi)元素、塊元素和行內(nèi)塊元素PART03行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型行內(nèi)元素：僅靠自身的字體大小和圖像尺寸來(lái)支撐結(jié)構(gòu)；不占有獨(dú)立的區(qū)域；一般不可以設(shè)置寬度、高度、對(duì)齊等屬性。行內(nèi)元素常見(jiàn)的行內(nèi)元素有<strong>、<b>、<del>、<s>、<ins>、<em>、<i>、<u>、<a>、<span>等，其中<span>標(biāo)記是最典型的行內(nèi)元素。例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型塊元素：在頁(yè)面中以區(qū)域塊的形式出現(xiàn)；每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性。塊元素常見(jiàn)的塊元素有<p>、<div>、<h1>~<h6>、<ul>、<ol>、<li>等，其中<div>標(biāo)記是最典型的塊元素。例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型行內(nèi)塊元素：一行可存在多個(gè)行內(nèi)塊元素，但它們之間存在空隙；可以設(shè)置width、height、padding以及margin值，寬度默認(rèn)隨文本內(nèi)容變化。行內(nèi)塊元素有常見(jiàn)的行內(nèi)塊元素有：<img>、<input>等。例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型display屬性：可以對(duì)元素的類型進(jìn)行轉(zhuǎn)換，其屬性值為：inline、block、inline-block、nonedisplay屬性inline：代表此元素為行內(nèi)元素，不獨(dú)占一行，不可以設(shè)置高度和寬度；block：代表此元素為塊元素，獨(dú)占一行，可以設(shè)置高度和寬度；inline-block：代表此元素為行內(nèi)塊元素，可以對(duì)其設(shè)置高度和寬度，并且此元素不會(huì)獨(dú)占一行；none：此元素將會(huì)被隱藏，不占用頁(yè)面空間，也不顯示。例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型<styletype="text/css">div,span{ width:200px; height:50px; background:rgb(204,247,255); margin:10px;}.div_one{display:inline;}.div_two{display:inline-block;}.span_three{display:block;}</style><body><divclass="div_one">第一個(gè)div中的內(nèi)容</div><divclass="div_two">第二個(gè)div中的內(nèi)容</div><divclass="div_three">第三個(gè)div中的內(nèi)容</div><spanclass="span_one">第一個(gè)span中的內(nèi)容</span><spanclass="span_two">第二個(gè)span中的內(nèi)容</span><spanclass="span_three">第三個(gè)span中的內(nèi)容</span></body>例動(dòng)手實(shí)踐demo404CSS3新增盒子樣式PART04CSS3新增盒子樣式盒子模型圓角邊框語(yǔ)法格式Border-radius：參數(shù)值1{1，4}[/參數(shù)值2{1,4}];半徑參數(shù)為像素值或百分比例#box1{width：100px;height:100px;border:2pxsolidred;border-radius:50%;}例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型<styletype="text/css">li{list-style:none;margin:10px000;padding:10px;background:#ccc;}.test.one{border-radius:10px20px;}.test.two{border-radius:10px20px30px;}.test.three{border-radius:30px/5px;}</style><body><ulclass="test"><liclass="one">2個(gè)參數(shù)<br/>border-radius:10px20px;</li><liclass="two">3個(gè)參數(shù)<br/>border-radius:10px20px30px;</li><liclass="three">水平和垂直半徑不同<br/>border-radius:30px/5px;</li></ul></body>例動(dòng)手實(shí)踐demo5CSS3新增盒子樣式盒子模型盒子陰影語(yǔ)法格式box-shadow：水平偏移垂直偏移模糊半徑擴(kuò)展半徑顏色值陰影類型;半徑參數(shù)為像素值或百分比例img{ padding:20px; border:1pxsolid#ccc;

border-radius:50%； box-shadow:5px5px10px2px#999inset;}例行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型<styletype="text/css">img{ padding:20px; border-radius:50%; border:1pxsolid#ccc; box-shadow:5px5px10px2px#999inset; }</style><body><imgclass="border"src="img/bg1.png"/></body>例動(dòng)手實(shí)踐demo6CSS3新增盒子樣式盒子模型漸變背景線性漸變(lineargradients):顏色向下、向上、向左、向右等方向變化。例CSS3中增了顏色的漸變(gradients)能力，可以實(shí)現(xiàn)在兩個(gè)或多個(gè)指定的顏色之間平穩(wěn)過(guò)渡。一共定義了兩種類型的漸變。徑向漸變(radialgradients):顏色由漸變的中心向周圍變化。例CSS3新增盒子樣式盒子模型線性漸變語(yǔ)法格式background-image:linear-gradient(漸變方向，漸變顏色節(jié)點(diǎn));background-image:linear-gradient(totop,#ffffff,#ff0000);background-image:linear-gradient(0deg,#ffffff,#ff0000);background-image:linear-gradient(toright,#ffffff,#ff0000,#ffff00);例漸變方向：向下/向上/向左/向右/對(duì)角方向漸變顏色節(jié)點(diǎn)：1~n個(gè)，1為初始顏色值，n為結(jié)束顏色值。CSS3新增盒子樣式盒子模型徑向漸變語(yǔ)法格式background-image:radial-gradient([漸變形狀],[漸變大小],[漸變位置],[漸變顏色]);background-image:radial-gradient(circleatcenter,red,#b4a078,green);background-image:radial-gradient(circleatlefttop,red,#b4a078,green);background-image:radial-gradient(farthest-sideat60%55%,blue,green,yellow,black);例漸變形狀值為：ellipse

或circle漸變大?。褐付◤较驖u變的半徑長(zhǎng)度漸變位置：水平方向值垂直方向值漸變顏色：1~n個(gè)，1為初始顏色值，n為結(jié)束顏色值。行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型<styletype="text/css">#liner{width:500px;height:100px;line-height:100px;padding:5px;text-align:center;font-size:20px;margin:20px;color:#ffffff;background-image:linear-gradient(toleft,#555,#ff0);}#radial{width:300px;height:300px;border-radius:50%;line-height:300px;text-align:center;font-size:20px;margin:20px;color:black;background-image:radial-gradient(circle,#ff0,#555);}</style><body><divid="liner">設(shè)置一個(gè)div元素漸變背景</div><divid="radial">設(shè)置一個(gè)div元素漸變背景</div></body>例動(dòng)手實(shí)踐demo705制作“四有青年”網(wǎng)頁(yè)P(yáng)ART05制作“四有青年”網(wǎng)頁(yè)盒子模型青年是整個(gè)社會(huì)力量中最積極、最有生氣的力量，國(guó)家的希望在青年，民族的未來(lái)在青年。中國(guó)青年始終是實(shí)現(xiàn)中華民族偉大復(fù)興的先鋒力量，我們立志成為有理想、有道德、有文化有紀(jì)律的四有青年，為人民作貢獻(xiàn)，為祖國(guó)作貢獻(xiàn)，為人類作貢獻(xiàn)。下面我們來(lái)制作網(wǎng)頁(yè)“四有青年”，制作“四有青年”網(wǎng)頁(yè)盒子模型h2標(biāo)記：居中，背景色紅色，字體大小2em，行高2em，字體顏色白色h3標(biāo)記：居中，背景色紅色，字體大小1.5em，行高1.5em，字體顏色白色,寬200px,margin（10px0）p標(biāo)記：字體大小1.2em，行高1.5emdiv盒子div盒子盒子.box1：背景白色，寬80%，高80%，margin（0auto）盒子#main：背景圖，寬1000px，高600px，padding（40px0）盒子.box2：padding:40px06表格元素PART06表格元素盒子模型表格元素網(wǎng)頁(yè)中有時(shí)使用表格展示結(jié)構(gòu)化數(shù)據(jù)。一個(gè)表格包含若干行，每一行又包含若干列，表格列稱為單元格。表格的標(biāo)簽為<table>表格標(biāo)題的標(biāo)簽為<caption>表格行標(biāo)簽為<tr>標(biāo)題單元格標(biāo)簽為<th>普通單元格標(biāo)簽為<td>行內(nèi)元素、塊元素和行內(nèi)塊元素盒子模型<tableborder="2"cellpadding="20"cellspacing="5"bgcolor="#eeeeee"><caption>期末考試成績(jī)單</caption><tr><th>姓名</th><th>物理</th><th>化學(xué)</th><th>數(shù)學(xué)</th><th>總分</th></tr><tr><th>張三</th><td>32</td><td>17</td><td>14</td><td>63</td></tr><tr><th>李四</th><td>28</td><td>16</td><td>15</td><td>59</td></tr><tr><th>王五</th><td>26</td><td>22</td><td>12</td><td>60</td></tr></table>例動(dòng)手實(shí)踐demo807HTML5新增文檔結(jié)構(gòu)元素PART07HTML5新增文檔結(jié)構(gòu)元素盒子模型文檔結(jié)構(gòu)元素為了更好的表達(dá)HTML文檔和語(yǔ)義，HTML5新增了許多用于表達(dá)文檔結(jié)構(gòu)方面的元素，主要有header、article、section、nav、aside和footer等元素。HTML5新增文檔結(jié)構(gòu)元素盒子模型header元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁(yè)面頭部的內(nèi)容。<header><h1>網(wǎng)頁(yè)主題</h1> ...</header>例HTML5新增文檔結(jié)構(gòu)元素盒子模型article元素article元素代表文檔、頁(yè)面或者應(yīng)用程序中與上下文不相關(guān)的獨(dú)立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評(píng)論等。<article><header> <h2>第一章</h2></header></article>例HTML5新增文檔結(jié)構(gòu)元素盒子模型section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊，一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。不要將section元素用作設(shè)置樣式的頁(yè)面容器，那是div的特性。如果article元素、aside元素或nav元素更符合使用條件，那么不要使用section元素。沒(méi)有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。HTML5新增文檔結(jié)構(gòu)元素盒子模型nav元素nav元素用于定義導(dǎo)航鏈接，該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，使頁(yè)面元素的語(yǔ)義更加明確。<nav><ul><li><ahref="#">首頁(yè)</li><li><ahref="#">公司概況</li><li><ahref="#">產(chǎn)品展示</li><li><ahref="#">聯(lián)系我們</li></ul></nav>例HTML5新增文檔結(jié)構(gòu)元素盒子模型aside元素aside元素用來(lái)定義當(dāng)前頁(yè)面或者文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。在article元素之外使用，作為頁(yè)面或站點(diǎn)全局的附屬信息部分。HTML5新增文檔結(jié)構(gòu)元素盒子模型footer元素footer元素用于定義一個(gè)頁(yè)面或者區(qū)域的底部，它可以包含所有通常放在頁(yè)面底部的內(nèi)容。<article> 文章內(nèi)容 <footer> 文章分頁(yè)列表 </footer></article><footer> 頁(yè)面底部</footer>例HTML5新增文檔結(jié)構(gòu)元素盒子模型<header>頁(yè)面頭部header區(qū)域</header><divclass="main"><nav>左側(cè)導(dǎo)航nav區(qū)域</nav><section><header>主要內(nèi)容區(qū)塊頂部header區(qū)域</header><article>獨(dú)立內(nèi)容article區(qū)域</article><footer>主要內(nèi)容區(qū)塊底部footer區(qū)域</footer></section><aside>側(cè)邊欄aside區(qū)域</aside></div><footer>頁(yè)面底部footer區(qū)域</footer>例動(dòng)手實(shí)踐demo9制作“媒體播放器按鈕”頁(yè)面課后

實(shí)踐盒子模型HTMLCSS感謝觀看HTMLCSS項(xiàng)目6浮動(dòng)和定位網(wǎng)頁(yè)制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)理解熟悉掌握掌握2熟悉清除浮動(dòng)的方法，可以使用不同方法清除浮動(dòng)。3掌握元素的定位方法。會(huì)使用浮動(dòng)和定位進(jìn)行多樣化頁(yè)面布局。4理解元素的浮動(dòng)，能為元素設(shè)置浮動(dòng)效果。11設(shè)置浮動(dòng)效果2清除浮動(dòng)3元素的定位4制作環(huán)保網(wǎng)頁(yè)任務(wù)分解PART0101設(shè)置浮動(dòng)效果設(shè)置浮動(dòng)效果網(wǎng)頁(yè)中內(nèi)容除了可以上下布局，還可以左右布局，或者上下左右混合布局。如圖所示，總體是左右布局，左側(cè)是課程名稱等信息，右側(cè)是學(xué)習(xí)人次等。右側(cè)內(nèi)容又分上下兩部分，上面是學(xué)習(xí)人次、我的收藏和精選留言，下面是結(jié)束學(xué)習(xí)。使用浮動(dòng)屬性可以實(shí)現(xiàn)網(wǎng)頁(yè)的靈活布局。設(shè)置浮動(dòng)效果float屬性基本語(yǔ)法格式選擇器{float:none|left|right;}none：設(shè)置對(duì)象不浮動(dòng)，none是默認(rèn)值；left：設(shè)置左浮動(dòng)，內(nèi)容向左邊對(duì)齊；right：設(shè)置右浮動(dòng)，內(nèi)容向右邊對(duì)齊。.left{width:35%;

float:left;}例float屬性用來(lái)設(shè)置浮動(dòng)效果，從而實(shí)現(xiàn)靈活布局設(shè)置浮動(dòng)效果動(dòng)手實(shí)踐demo1設(shè)置浮動(dòng)效果<h2>郁金香花語(yǔ)</h2><divclass=team><divclass="item"><imgsrc="img/flower1.jpg"alt=""><h4>黃色郁金香</h4><p>黃色郁金香新鮮、明亮、充滿活力，代表友誼、尊敬、祝福等</p></div><divclass="item"><imgsrc="img/flower2.jpg"alt=""><h4>粉色郁金香</h4><p>粉色郁金香溫和、優(yōu)雅，代表感謝、祝福、感恩、友情等</p></div><divclass="item"><imgsrc="img/flower3.jpg"alt=""><h4>橙色郁金香</h4><p>橙色郁金香代表永恒的愛(ài)和美好的回憶</p></div></div>h2{color:darkorange;text-align:center;}.team{margin:20pxauto;width:900px;}.item{float:left;width:290px;margin-right:10px;}.item>img{width:280px;border-radius:10px;}.itemh4{color:darkorange;margin:0;text-align:center;}.itemp{text-indent:2em;font-size:13px;text-align:left;}PART0202清除浮動(dòng)浮動(dòng)引起布局混亂問(wèn)題設(shè)置浮動(dòng)效果（float屬性值為left或right）后，浮動(dòng)元素不再占用原文檔流的位置。父級(jí)元素因?yàn)樽蛹?jí)元素浮動(dòng)的原因內(nèi)部高度值為0。如demo1中未設(shè)置浮動(dòng)時(shí)，雖然父盒子<divclass="team">沒(méi)有設(shè)置高度，但他被子元素?fù)伍_(kāi)，高度是三個(gè)子盒子<divclass="item">的高度和，設(shè)置浮動(dòng)后，父盒子高度為0。父盒子高度為0，父盒子后面的元素會(huì)向上移動(dòng)，出現(xiàn)布局混亂布。為了解決這個(gè)問(wèn)題，需要清除浮動(dòng)。設(shè)置浮動(dòng)效果動(dòng)手實(shí)踐demo2<style>*{box-sizing:border-box;}.main,.footer{ width:900px; margin:0auto;}.main{background-color:#f1f1f1;}.footer{ background-color:#0373b9; padding:30px10px; }.left,.right{ border:1pxsolid#e1e1e1; padding:30px10px;}.left{ width:28%; float:left;}.right{ width:70%; float:right;}</style><divclass="main"><divclass="left"> 左側(cè)欄目導(dǎo)航</div><divclass="right"> 右側(cè)主要內(nèi)容</div></div><divclass="footer"> 版權(quán)內(nèi)容</div>元素的浮動(dòng)clear屬性none:允許兩邊都可以有浮動(dòng)對(duì)象，none是默認(rèn)值；both：不允許有浮動(dòng)對(duì)象；left：不允許左邊有浮動(dòng)對(duì)象；right：不允許右邊有浮動(dòng)對(duì)象?；菊Z(yǔ)法格式選擇器{clear:none|left|right|both;}.clear{

clear:left;}例clear屬性可以用來(lái)清除浮動(dòng)元素對(duì)當(dāng)前元素的所產(chǎn)生的影響清除浮動(dòng)的方法額外標(biāo)簽法是指在浮動(dòng)元素后面添加空標(biāo)記，并對(duì)空標(biāo)記應(yīng)用“clear:both|left|right”樣式。空標(biāo)記可以是<div>等任何標(biāo)記。方法一可以在demo2中浮動(dòng)元素后面添加<divclass=”clear”></div>在<style>標(biāo)簽中添加類clear（.clear{clear:both;}）。額外標(biāo)簽法清除浮動(dòng)的方法父級(jí)添加overflow屬性方法是指給浮動(dòng)元素的父級(jí)元素添加“overflow:hidden”樣式。方法二使用父級(jí)添加overflow屬性法清除浮動(dòng)可以在demo2中的main類中添加“overflow:hidden;”代碼。父級(jí)添加overflow屬性方法清除浮動(dòng)的方法使用after偽元素方法是指給浮動(dòng)元素的父級(jí)元素添加after偽元素，并設(shè)置其height、content、display、visibility和clear屬性。方法三可以在demo2中的浮動(dòng)元素父盒子中再添加一個(gè)類（類名自定義，比如clearfix)，然后在<style>標(biāo)簽中添加.clearfix:after和.clearfix的樣式使用after偽元素方法PART0303元素的定位元素的定位基本語(yǔ)法格式選擇器{position：static|relative|absolute|fixed;}static：靜態(tài)定位，默認(rèn)的定位方式relative：相對(duì)定位，可以使用top，right，bottom，left屬性以原位置為參考進(jìn)行定位。absolute：絕對(duì)定位，可以使用top，right，bottom，left屬性以定位的父盒子為參考進(jìn)行定位。fixed：固定定位，可以使用top，right，bottom，left屬性以窗口為參考進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。.logo{position:absolute;top:10px;left:5px}例通過(guò)元素的定位屬性position可以設(shè)置元素的精確位置元素的定位相對(duì)

定位基本語(yǔ)法格式選擇器{position：relative;}元素的定位動(dòng)手實(shí)踐demo3<divclass="main"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div>.main{width:300px;background-color:#f1f1f1;padding:10px;}.box1,.box2,.box3{width:90%;height:30px;margin:10px;background-color:aqua;}.box2{position:relative;top:100px;left:30px;}元素的定位相對(duì)定位的元素可以對(duì)其設(shè)置偏移值。相對(duì)于自己的原來(lái)位置進(jìn)行偏移元素偏移后其原位置仍然保留。元素的定位絕對(duì)

定位基本語(yǔ)法格式選擇器{position：absolute;}元素的定位動(dòng)手實(shí)踐demo4<divclass="item"><imgsrc="img/flower.jpg"alt=""width="260px"><divclass="description"><h4>韓式系列/溫柔以待</h4><p>花語(yǔ)：溫柔的人，都是人間寶</p></div></div>*{margin:0;padding:0;}.item{width:260px;height:280px;position:relative;}.description{

background-color:rgba(160,160,200,.3);

width:260px;text-align:center;padding:10px0;color:#663366;position:absolute;

bottom:0;}.descriptionp{font-size:13px;padding-top:5px;}元素的定位絕對(duì)定位的元素脫離了正常文檔流。可以對(duì)絕對(duì)定位元素設(shè)置偏移值。絕對(duì)定位的元素的位置是相對(duì)于離元素最近的已定位（不包含默認(rèn)定位）的父元素。如果無(wú)已定位的父元素,則相對(duì)于整個(gè)文檔（html）定位。已定位元素指設(shè)置了position值為relative或者absolute或者fixed的元素元素的定位固定

定位基本語(yǔ)法格式選擇器{position：fixed;}使用固定定位的元素?zé)o論如何滾動(dòng)瀏覽器窗口，元素的位置在窗口中都是固定不變的。元素的定位動(dòng)手實(shí)踐demo5<divclass="top">頭部</div><divclass="content">主要內(nèi)容</div><divclass="bottom">底部</div><divclass="to-top"><imgsrc="img/top.png"alt=""></div>.top,.content,.bottom{width:1000px;margin:5pxauto;}.content{height:700px;background-color:#f1f1f1;}.top,.bottom{height:100px;background-color:#3d94e5;}.to-top{height:73px;width:73px;position:fixed;right:10px;bottom:100px;}元素的定位固定定位的元素脫離了正常文檔流?？梢詫?duì)固定定位元素設(shè)置偏移值。固定定位的元素的位置是相對(duì)于相對(duì)于瀏覽器窗口的位置。PART0404制作環(huán)保網(wǎng)頁(yè)綠色是生命的象征、大自然的底色，更是美好生活的基礎(chǔ)。近百年來(lái)人類行為已經(jīng)引發(fā)了嚴(yán)重的生態(tài)危機(jī)。如今，環(huán)保問(wèn)題已經(jīng)引起了人們的重視。保護(hù)環(huán)境人人有責(zé)，下面我們制作一個(gè)環(huán)保網(wǎng)站首頁(yè)，傳播環(huán)境保護(hù)意識(shí)。制作環(huán)保網(wǎng)頁(yè)制作環(huán)保網(wǎng)頁(yè)<!--Beginheader--><header><nav></nav><divclass="banner"></div></header><!--Endheader--><!--Beginsection-><section></section><!--Endsection--><!--Beginfooter--><footer></footer><!--Endfooter-->網(wǎng)頁(yè)整體布局制作環(huán)保網(wǎng)頁(yè)*{margin:0;padding:0;list-style-type:none;outline:0;border:0;}body{font-size:15px;line-height:24px;background:#F8FAFF;font-family:"微軟雅黑",Arial,sans-serif;color:#333;}a{text-decoration:none;color:#1bbd9b;}.clear{clear:both;}.center{text-align:center;}CSS基礎(chǔ)樣式設(shè)置制作環(huán)保網(wǎng)頁(yè)<head><metacharset="UTF-8"><title>環(huán)保網(wǎng)</title><linkrel="stylesheet"href="css/style.css"></head>鏈接外部樣式制作環(huán)保網(wǎng)頁(yè)<header><nav>

<ul>

<liclass="logo"><imgsrc="img/logo.png"alt=""></li><liclass="active"><ahref="index.html"class="active">首頁(yè)</a></li><li>

<ahref="about.html">環(huán)保動(dòng)態(tài)</a>

</li><li><ahref="blog.html">環(huán)境監(jiān)測(cè)</a></li><li><ahref="team.html">智慧環(huán)保</a></li><li><ahref="team.html">新能源</a></li><li><ahref="contact.html">聯(lián)系我們</a>

</li></ul>

<divclass="clear"></div></nav><divclass="banner"></div></header>header部分內(nèi)容制作環(huán)保網(wǎng)頁(yè)header{width:10

溫馨提示

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

評(píng)論

0/150

提交評(píng)論