Web前端技術(shù) 課件 模塊一 任務(wù)2 主頁(yè)布局

主頁(yè)布局Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識(shí)點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識(shí)05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述在學(xué)會(huì)了創(chuàng)建項(xiàng)目和文件后，我們開始要正式創(chuàng)建和制作主頁(yè)。在上個(gè)任務(wù)的主頁(yè)效果圖片引導(dǎo)下，按照實(shí)際項(xiàng)目開發(fā)的流程，進(jìn)行主頁(yè)布局，先把主頁(yè)劃分為幾個(gè)區(qū)域，用局部圖片拼接把整個(gè)頁(yè)面效果呈現(xiàn)，后期再分別完成每一個(gè)區(qū)域塊的內(nèi)容結(jié)構(gòu)和樣式添加。延時(shí)符頁(yè)面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握CSS樣式通配符選擇器和類選擇器的使用方法；掌握CSS彈性布局flex相關(guān)屬性的設(shè)置方法；掌握CSS背景顏色樣式background-color、border屬性的設(shè)置方法。知識(shí)目標(biāo)能夠根據(jù)效果圖使用合理標(biāo)簽進(jìn)行頁(yè)面結(jié)構(gòu)搭建；能為頁(yè)面添加內(nèi)部CSS樣式；能夠根據(jù)需求正確使用類選擇器進(jìn)行樣式添加；技能目標(biāo)延時(shí)符培養(yǎng)細(xì)致、認(rèn)真的工作態(tài)度；培養(yǎng)與他人合作溝通的能力；培養(yǎng)善于思考、敢于提問的精神。素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符注釋圖像標(biāo)簽類選擇器通配符選擇器盒子模型Flex布局HTML標(biāo)簽：注釋延時(shí)符如果需要在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁(yè)面中的文字，就需要使用注釋標(biāo)簽。HTML中的注釋語(yǔ)法如下：

<!--注釋語(yǔ)句-->也可以選擇需要改為注釋的行，按快捷鍵:ctrl+/，將已有文字或代碼改為注釋，添加注釋是為了更好地解釋代碼的功能，便于相關(guān)開發(fā)人員理解和閱讀代碼，程序是不會(huì)執(zhí)行注釋內(nèi)容的。添加圖像，使用<imgsrc=”圖像URL”/>方法，本次任務(wù)中需要根據(jù)實(shí)際需求調(diào)整圖像的大小，需要用到圖像的寬度和高度屬性width和height。默認(rèn)情況下，如果不給<img/>標(biāo)簽設(shè)置寬高屬性，圖像就會(huì)以原始尺寸顯示，如若需要也可以通過width屬性和height屬性，定義圖像的大小。通常寬和高只需要設(shè)置一個(gè)，另一個(gè)會(huì)根據(jù)圖像原來的寬高比例自動(dòng)調(diào)整。如果同時(shí)設(shè)置寬高值，會(huì)引起圖像的寬高比例不對(duì)，從而圖片變形。HTML標(biāo)簽：圖像標(biāo)簽延時(shí)符html5新標(biāo)簽在html5中增加了一些有語(yǔ)義的新標(biāo)簽，合理的使用這些標(biāo)簽可以使頁(yè)面代碼更清晰，可訪問性更好，搜索引擎更優(yōu)。這些標(biāo)簽都是雙標(biāo)簽，具體的含義如下：<header>：定義文檔或區(qū)塊的頁(yè)眉，通常包含標(biāo)題、導(dǎo)航和其他相關(guān)信息。<main>：定義文檔的主要內(nèi)容，一個(gè)頁(yè)面中只能包含一個(gè)<main>元素。<footer>：定義文檔或區(qū)塊的頁(yè)腳，通常包含版權(quán)信息、聯(lián)系方式等內(nèi)容。延時(shí)符<nav>：<section>：定義文檔的一個(gè)獨(dú)立節(jié)或區(qū)塊，用于組織相關(guān)的內(nèi)容。<article>：定義導(dǎo)航鏈接的容器，用于包裹網(wǎng)站的導(dǎo)航部分。定義一個(gè)獨(dú)立的、完整的、可以獨(dú)自分發(fā)或獨(dú)立引用的內(nèi)容塊，如博客文章、新聞報(bào)道等。<aside>：定義頁(yè)面或區(qū)塊的側(cè)邊欄或附屬信息，通常用于顯示相關(guān)的內(nèi)容或廣告。CSS樣式：類選擇器延時(shí)符為頁(yè)面內(nèi)容添加樣式，需要通過選擇器選中相應(yīng)的標(biāo)簽。選擇器分為基礎(chǔ)選擇器和復(fù)合選擇器兩個(gè)大類。本任務(wù)先介紹基礎(chǔ)選擇器?；A(chǔ)選擇器是由單個(gè)選擇器組成的，包括：標(biāo)簽選擇器、類選擇器、id選擇器和通配符選擇器。如果想要差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器?；菊Z(yǔ)法如下：類選擇器視頻講解.類名{屬性1:屬性值1;屬性2:屬性值2;...}在CSS中類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，類名是用戶命名的，命名時(shí)不要使用純數(shù)字、中文等命名，應(yīng)使用英文字母來表示，命名要有意義，盡量使別人一眼就知道這個(gè)類名的目的。類選擇器是開發(fā)中最常用的。類選擇器定義好樣式后，在HTML中以標(biāo)簽的class屬性表示?？梢越o一個(gè)標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。這些類名都可以選出這個(gè)標(biāo)簽.簡(jiǎn)單理解就是一個(gè)標(biāo)簽有多個(gè)名字。在標(biāo)簽class屬性中寫多個(gè)，這個(gè)標(biāo)簽就可以分別具有這些類名的樣式。如：<divclass=“greenpink”>多樣式應(yīng)用</div>。多個(gè)類名中間必須用空格分開CSS樣式：通配符選擇器延時(shí)符在CSS中，通配符選擇器使用“*”定義，它表示選取頁(yè)面中所有元素（標(biāo)簽）。基本語(yǔ)法如下：

*{屬性1:屬性值1;屬性2:屬性值2;...}通配符選擇器不需要調(diào)用，自動(dòng)就給所有的元素使用樣式，本任務(wù)中是用于清除所有的元素標(biāo)簽的內(nèi)外邊距，這也是通配符選擇器使用最多的場(chǎng)景。*{margin:0;padding:0;}CSS樣式：背景顏色延時(shí)符background-color屬性定義了元素的背景顏色?；菊Z(yǔ)法如下：

background-color:顏色;一般情況下元素背景顏色默認(rèn)值是transparent（透明），也可以手動(dòng)指定背景顏色為某種顏色或透明色。其取值方式有3種：預(yù)定義的顏色值，就是顏色英文單詞，例如black，white，green等。#+6位十六進(jìn)制數(shù)，例如#FF0000，#123456，#DE32FA等，實(shí)際工作中，這種顏色表示法是最常用的。RGB代碼，如rgb（red值，green值，blue值），每個(gè)值的范圍是0~255，或者rgb（100%，50%，0%）。CSS樣式：盒子模型延時(shí)符網(wǎng)頁(yè)布局過程：先準(zhǔn)備好相關(guān)的網(wǎng)頁(yè)元素，網(wǎng)頁(yè)元素基本都是盒子box。利用CSS設(shè)置好盒子樣式，然后擺放到相應(yīng)位置。往盒子里面裝內(nèi)容。網(wǎng)頁(yè)布局的核心本質(zhì)：就是利用CSS擺盒子。所謂盒子模型：就是把HTML頁(yè)面中的布局元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。CSS盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊框、外邊距、內(nèi)邊距和實(shí)際內(nèi)容。CSS樣式：邊距延時(shí)符padding屬性用于設(shè)置內(nèi)邊距，即邊框與內(nèi)容之間的距離，如果盒子有背景，padding部分也會(huì)填充背景。當(dāng)我們給盒子指定padding值之后，發(fā)生了2件事情：(1) 內(nèi)容和邊框有了距離，添加了內(nèi)邊距。(2) padding影響了盒子實(shí)際大小。也就是說，如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子。margin屬性用于設(shè)置外邊距，即控制盒子和周邊元素之間的距離。外邊距可以讓塊級(jí)盒子水平居中，但是必須滿足兩個(gè)條件：(1) 盒子必須指定了寬度（width）。(2) 盒子左右的外邊距都設(shè)置為auto。CSS樣式：邊框延時(shí)符border可以設(shè)置元素的邊框。邊框由三要素組成:邊框?qū)挾?粗細(xì))邊框樣式邊框顏色，語(yǔ)法如下：border:border-width||border-style||border-color例如border:1pxsolidred;表示設(shè)置1px粗細(xì)的紅色實(shí)線邊框，三個(gè)參數(shù)沒有順序要求。邊框不同邊可以分開寫，如只設(shè)定上邊框：border-top:1pxsolidred;其余同理。CSS樣式：flex布局延時(shí)符flex是flexiblebox的縮寫，意思為“彈性布局”，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為flex布局。當(dāng)為父元素設(shè)置為flex布局后，所有子元素沿著彈性盒子主軸方向排列，默認(rèn)主軸為水平。采用flex布局的元素成為flex容器（flexcontainer），它的所有子元素稱為flex項(xiàng)目(flexitem)或flex元素。任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁(yè)面樣式頁(yè)面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符主頁(yè)總體由頭部、輪播圖、主體、尾部4個(gè)部分組成，這四個(gè)部分是從上到下的結(jié)構(gòu)，本任務(wù)最終以圖片形式分別插入內(nèi)容，除了主體外，其余以單張圖片插入。樣式分析1頭部、輪播圖、主體、尾部4個(gè)部分從上到下依次排列，符合文檔流的特點(diǎn)，其中頭部、輪播圖、尾部的寬度跟屏幕等寬，這是<div>標(biāo)簽的特點(diǎn)之一，不需要進(jìn)行設(shè)置。主體部分需要給定一個(gè)寬度，這里設(shè)置為1200px。