前端設(shè)計(jì)與開(kāi)發(fā) 課件 模塊5 盒子模型及應(yīng)用_第1頁(yè)
前端設(shè)計(jì)與開(kāi)發(fā) 課件 模塊5 盒子模型及應(yīng)用_第2頁(yè)
前端設(shè)計(jì)與開(kāi)發(fā) 課件 模塊5 盒子模型及應(yīng)用_第3頁(yè)
前端設(shè)計(jì)與開(kāi)發(fā) 課件 模塊5 盒子模型及應(yīng)用_第4頁(yè)
前端設(shè)計(jì)與開(kāi)發(fā) 課件 模塊5 盒子模型及應(yīng)用_第5頁(yè)
已閱讀5頁(yè)，還剩71頁(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)介

模塊5盒子模型及應(yīng)用制作“學(xué)習(xí)日用百科”網(wǎng)頁(yè)任務(wù)5.1任務(wù)描述隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展和信息時(shí)代的到來(lái)，人們獲取知識(shí)的方式正在發(fā)生深刻變革。越來(lái)越多的人依賴網(wǎng)絡(luò)平臺(tái)來(lái)獲取日常生活所需的實(shí)用信息、科普知識(shí)及行業(yè)前沿動(dòng)態(tài)。因此，建立一個(gè)集合各類學(xué)習(xí)資源和實(shí)用生活指南的在線“學(xué)習(xí)日用百科”網(wǎng)頁(yè)成為一種迫切的需求。這樣的平臺(tái)不僅可以方便用戶隨時(shí)隨地查閱所需信息，還可以通過(guò)合理的組織和展示，提高用戶的學(xué)習(xí)效率和生活質(zhì)量。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，了解盒子模型的概念，掌握設(shè)置邊框樣式、邊框?qū)挾燃斑吙蝾伾幕菊Z(yǔ)法和屬性，掌握設(shè)置內(nèi)邊距與外邊距的基本語(yǔ)法和屬性，最后利用所學(xué)知識(shí)制作“學(xué)習(xí)日用百科”網(wǎng)頁(yè)。相關(guān)知識(shí)5.1.1盒子模型的概念盒子模型（BoxModel）是一種用于描述HTML元素在頁(yè)面中呈現(xiàn)時(shí)的布局和大小的概念。01盒子模型基礎(chǔ)內(nèi)容為核心，內(nèi)邊距、邊框、外邊距依次向外擴(kuò)展，外邊距透明不遮擋02內(nèi)容區(qū)域顯示文本圖像，為盒子核心部分，直接被內(nèi)邊距包圍03內(nèi)邊距透明區(qū)域，位于內(nèi)容與邊框間，影響元素間距04邊框圍繞內(nèi)容與內(nèi)邊距，形成盒子的可見(jiàn)邊界05外邊距邊框外透明區(qū)域，決定盒子與其他元素間距，不影響視覺(jué)盒子模型尺寸計(jì)算 元素的總寬度=寬度+左內(nèi)邊距+右內(nèi)邊距+左邊框+右邊框+左外邊距+右外邊距。 元素的總高度=高度+上內(nèi)邊距+下內(nèi)邊距+上邊框+下邊框+上外邊距+下外邊距。5.1.2邊框的設(shè)置盒子邊框使用border屬性來(lái)設(shè)置，該屬性可以設(shè)置所有邊框的樣式、寬度和顏色1.邊框樣式border-styleboborder-style控制邊框樣式，可單獨(dú)設(shè)置四邊，值包括none、dotted、dashed、solid、double、groove、ridge、inset、outset2.邊框?qū)挾萣order-widthborder-width屬性用來(lái)控制對(duì)象的邊框?qū)挾龋梢酝瑫r(shí)設(shè)置一個(gè)或多個(gè)邊框?qū)挾?。另外，還有4個(gè)分屬性：border-top-width、border-right-width、border-bottom-width和border-left-width，分別用于設(shè)置上、右、下、左4個(gè)邊的邊框?qū)挾取?．邊框顏色border-colorborder-color屬性用來(lái)控制對(duì)象的邊框顏色，可以同時(shí)設(shè)置一個(gè)或多個(gè)邊框顏色。另外，還有4個(gè)分屬性：border-top-color、border-right-color、border-bottom-color和border-left-color，分別用于設(shè)置上、右、下、左4個(gè)邊的邊框顏色。5.1.3內(nèi)邊距和外邊距的設(shè)置內(nèi)邊距和外邊距是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的元素，它們能夠幫助我們實(shí)現(xiàn)更好的頁(yè)面布局和視覺(jué)效果1.內(nèi)邊距內(nèi)邊距（padding）是指元素內(nèi)容與邊框之間的空白區(qū)域，它決定了元素內(nèi)部的空間大小。通過(guò)調(diào)整內(nèi)邊距，我們可以控制元素內(nèi)容的相對(duì)位置，使其更加美觀和易于閱讀。2.外邊距margin外邊距（margin）是指元素邊框與其他元素之間的空白區(qū)域，它決定了元素在頁(yè)面中的相對(duì)位置。通過(guò)調(diào)整外邊距，我們可以控制元素之間的距離，使頁(yè)面布局更加合理和舒適。任務(wù)規(guī)劃利用HTML5和CSS等現(xiàn)代Web技術(shù)構(gòu)建界面友好、易于瀏覽和搜索的知識(shí)分享平臺(tái)，提升用戶體驗(yàn)。通過(guò)合理運(yùn)用CSS中的盒子模型和其他布局技術(shù)，使頁(yè)面布局清晰、結(jié)構(gòu)分明，有利于用戶快速定位所需的內(nèi)容。匯聚各類學(xué)習(xí)資料和實(shí)用信息，形成一站式知識(shí)庫(kù)，滿足不同人群對(duì)于生活常識(shí)、科技前沿、教育方法等多領(lǐng)域知識(shí)的需求。任務(wù)實(shí)施（1）打開(kāi)開(kāi)發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為baike。（2）在VSCode中打開(kāi)項(xiàng)目文件夾baike，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（開(kāi)發(fā)中文件命名一般要做到見(jiàn)名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“學(xué)習(xí)日用百科”，并引入外部樣式表文件。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加<div></div>標(biāo)簽對(duì)，然后在添加的<div></div>標(biāo)簽對(duì)中添加導(dǎo)航鏈接。（5）在<body></body>標(biāo)簽對(duì)中添加<main></main>標(biāo)簽對(duì)，在<main></main>標(biāo)簽對(duì)中添加一組<section></section>標(biāo)簽對(duì)，并設(shè)置好id屬性和class屬性。然后在<section></section>標(biāo)簽對(duì)中放置“生活常識(shí)”模塊的內(nèi)容。（6）仿照步驟（5），在<main></main>標(biāo)簽對(duì)中添加第二組和第三組<section>標(biāo)簽對(duì)，并分別放置“科技前沿”和“教育方法”模塊的內(nèi)容。任務(wù)實(shí)施（7）在<body></body>標(biāo)簽對(duì)中添加一組<footer></footer>標(biāo)簽對(duì)，然后在添加的<footer></footer>標(biāo)簽對(duì)中添加版權(quán)相關(guān)內(nèi)容。（8）在項(xiàng)目文件夾bestArticles上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（9）單擊步驟（8）中新建的styles.css文件進(jìn)入代碼編輯窗口，設(shè)置設(shè)置全局樣式。（10）在style.css文件中，對(duì)導(dǎo)航欄的樣式進(jìn)行設(shè)置。（11）在style.css文件中，對(duì)主要內(nèi)容區(qū)的樣式進(jìn)行設(shè)置，以及使用盒子模型對(duì)卡片的樣式進(jìn)行設(shè)置。（12）在style.css文件中，對(duì)底部版權(quán)信息的樣式進(jìn)行設(shè)置。制作網(wǎng)頁(yè)導(dǎo)航條任務(wù)5.2任務(wù)描述在當(dāng)今互聯(lián)網(wǎng)環(huán)境下，網(wǎng)頁(yè)作為信息傳遞和用戶交互的重要載體，其設(shè)計(jì)與用戶體驗(yàn)緊密相關(guān)。一個(gè)優(yōu)秀的網(wǎng)頁(yè)應(yīng)當(dāng)具備清晰、直觀的導(dǎo)航系統(tǒng)，幫助用戶快速定位和訪問(wèn)所需的內(nèi)容。隨著HTML5的發(fā)展和廣泛應(yīng)用，網(wǎng)頁(yè)開(kāi)發(fā)者能夠更好地利用其強(qiáng)大的技術(shù)和特性創(chuàng)建更具可用性和易讀性的導(dǎo)航條。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，了解元素的類型并掌握元素類型的轉(zhuǎn)換方法，掌握Flex布局和overflow屬性的用法，掌握浮動(dòng)和清除浮動(dòng)的基本語(yǔ)法和屬性，最后利用所學(xué)知識(shí)制作網(wǎng)頁(yè)導(dǎo)航條。相關(guān)知識(shí)5.2.1元素的類型和轉(zhuǎn)換元素類型指的是構(gòu)成網(wǎng)頁(yè)的HTML元素的種類。元素類型01塊級(jí)元素在頁(yè)面內(nèi)以區(qū)域塊的形式出現(xiàn)塊級(jí)元素內(nèi)聯(lián)元素也被稱為“行內(nèi)元素”或“內(nèi)嵌元素”內(nèi)聯(lián)元素行內(nèi)塊元素也被稱為“可變?cè)亍?，需要根?jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素行內(nèi)塊元素5.2.1元素的類型和轉(zhuǎn)換元素類型的轉(zhuǎn)換（或稱為“強(qiáng)制轉(zhuǎn)換”）通常是指通過(guò)CSS改變?cè)氐娘@示類型。這種轉(zhuǎn)換可能影響元素如何布局，以及它與其他元素的關(guān)系。元素類型的轉(zhuǎn)換025.2.2Flex布局的用法Flex布局是一種彈性盒子布局模型，用于在一維空間中對(duì)元素進(jìn)行靈活的排列和對(duì)齊。通過(guò)設(shè)置彈性盒子的屬性，可以控制彈性盒子在容器中的布局方式。任何一個(gè)容器都可以通過(guò)display:flex指定為Flex布局，采用Flex布局的元素稱為“Flex容器”（FlexContainer），簡(jiǎn)稱“容器”。它的所有子元素自動(dòng)成為容器成員，稱為“Flex項(xiàng)目”（FlexItem），簡(jiǎn)稱“項(xiàng)目”。5.2.3overflow屬性的用法overflow屬性是CSS中的一個(gè)常用屬性，用于控制元素的內(nèi)容溢出其容器時(shí)的顯示方式。當(dāng)一個(gè)元素的內(nèi)容超出了其指定的寬度或高度時(shí)，overflow屬性決定了如何處理這些溢出的內(nèi)容。5.2.4浮動(dòng)的應(yīng)用及清除在Web頁(yè)面布局中，浮動(dòng)（float）是CSS提供的一種強(qiáng)大的布局機(jī)制，它允許元素脫離文檔流并向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)元素的邊緣。1.浮動(dòng)的應(yīng)用浮動(dòng)是網(wǎng)頁(yè)設(shè)計(jì)中常用的布局技術(shù)之一，可以使元素在頁(yè)面中實(shí)現(xiàn)多列布局、文字環(huán)繞圖片等效果。2.清除浮動(dòng)由于浮動(dòng)元素不再占用原文檔流的位置，因此它會(huì)對(duì)后面元素的排版產(chǎn)生影響，為了解決這些問(wèn)題，此時(shí)就需要在該元素中清除浮動(dòng)的影響。在CSS中，可以使用clear屬性清除浮動(dòng)。任務(wù)規(guī)劃網(wǎng)頁(yè)導(dǎo)航條是一個(gè)既符合現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，又能夠有效地提升用戶和搜索引擎體驗(yàn)的核心組件。使用HTML5和CSS等技術(shù)制作網(wǎng)頁(yè)導(dǎo)航條，為用戶提供一種簡(jiǎn)單、直觀的方式來(lái)瀏覽和切換網(wǎng)站的不同頁(yè)面或內(nèi)容區(qū)域，如首頁(yè)、新聞動(dòng)態(tài)、產(chǎn)品介紹、關(guān)于我們、聯(lián)系我們等。任務(wù)實(shí)施（1）打開(kāi)開(kāi)發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為navigationBar。（2）在VSCode中打開(kāi)項(xiàng)目文件夾navigationBar，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（開(kāi)發(fā)中文件命名一般要做到見(jiàn)名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“網(wǎng)頁(yè)導(dǎo)航條實(shí)例”，并引入外部樣式表。（4）在<body></body>標(biāo)簽對(duì)中添加<header></header>標(biāo)簽對(duì)，并在<header></header>標(biāo)簽對(duì)內(nèi)添加<div></div>標(biāo)簽對(duì)，然后在添加的<div></div>標(biāo)簽對(duì)中添加導(dǎo)航鏈接。（5）在<body></body>標(biāo)簽對(duì)中添加<footer></footer>標(biāo)簽對(duì)，并在<footer></footer>標(biāo)簽對(duì)內(nèi)添加<div></div>標(biāo)簽對(duì)，然后在添加的<div></div>標(biāo)簽對(duì)中添加版權(quán)相關(guān)內(nèi)容。（6）在項(xiàng)目文件夾navigationBar上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。任務(wù)實(shí)施（7）單擊步驟（6）中新建的style.css文件，進(jìn)入代碼編輯窗口。首先設(shè)置全局樣式。（8）在style.css文件中，對(duì)導(dǎo)航條的樣式進(jìn)行設(shè)置。（9）在style.css文件中，對(duì)底部版權(quán)信息的樣式進(jìn)行設(shè)置。制作“地域特產(chǎn)推介”網(wǎng)頁(yè)任務(wù)5.3任務(wù)描述每種特產(chǎn)都蘊(yùn)含著當(dāng)?shù)氐臍v史文化、風(fēng)土人情和傳統(tǒng)工藝，它們既是地域文化的重要組成部分，也是民族文化多樣性的生動(dòng)體現(xiàn)。推廣地域特產(chǎn)就是在推廣一種文化，傳播一種精神，讓更多人了解和認(rèn)識(shí)這片土地的故事，增強(qiáng)民族自豪感和文化自信。在全球信息化的時(shí)代背景下，線上銷售和宣傳已經(jīng)成為商品推廣的重要渠道。隨著電子商務(wù)和網(wǎng)絡(luò)營(yíng)銷的迅速發(fā)展，越來(lái)越多的地方特產(chǎn)開(kāi)始通過(guò)網(wǎng)絡(luò)平臺(tái)走向全國(guó)乃至全球市場(chǎng)。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，了解元素的定位方式和偏移屬性，了解靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位的概念并掌握它們的用法，掌握z-index屬性的用法，最后利用所學(xué)知識(shí)制作“地域特產(chǎn)推介”網(wǎng)頁(yè)。相關(guān)知識(shí)5.3.1元素的定位和偏移在CSS中，可以使用position屬性指定一個(gè)元素在頁(yè)面中的定位方式元素定位01position屬性僅僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過(guò)偏移屬性top、bottom、left、right來(lái)精確定位元素的位置，其取值為不同單位的數(shù)值或百分比。元素偏移025.3.2靜態(tài)定位和相對(duì)定位解釋靜態(tài)定位和相對(duì)定位概念，闡述它們?cè)陧?yè)面元素布局中的作用和影響，通過(guò)實(shí)例展示兩者區(qū)別CSS定位基礎(chǔ)脫離默認(rèn)文檔流，可設(shè)置偏移量但不影響其他元素。常用于微調(diào)元素位置或?yàn)榻^對(duì)定位創(chuàng)建參照相對(duì)定位詳解默認(rèn)文檔流布局，不設(shè)置額外位置。元素按順序流式排列，無(wú)偏移屬性影響靜態(tài)定位應(yīng)用0102031.靜態(tài)定位默認(rèn)定位方式，元素按文檔流排列，不使用top、bottom等屬性移動(dòng)，位置由瀏覽器自然渲染決定2.相對(duì)定位相對(duì)定位是將元素相對(duì)于它在標(biāo)準(zhǔn)頁(yè)面中的位置進(jìn)行定位，當(dāng)positition屬性的值為relative時(shí)，可以將元素定位于相對(duì)位置。對(duì)元素設(shè)置相對(duì)定位后，可以通過(guò)偏移屬性（top、bottom、left、right）來(lái)改變?cè)氐奈恢?。通過(guò)指定這些屬性的值，我們可以使元素在垂直和水平方向上相對(duì)于其原始位置進(jìn)行偏移。5.3.3絕對(duì)定位和固定定位CSS定位原理絕對(duì)定位和固定定位是CSS中兩種高級(jí)的定位機(jī)制。它們提供了一種從正常文檔流中完全移除元素的方式，并能夠精確地相對(duì)于其他元素或?yàn)g覽器窗口本身進(jìn)行定位。應(yīng)用場(chǎng)景絕對(duì)定位常用于側(cè)邊欄廣告，元素需在頁(yè)面特定位置，不隨內(nèi)容滾動(dòng)固定定位常用于創(chuàng)建固定頭部導(dǎo)航、滾動(dòng)時(shí)始終顯示的提示欄1.絕對(duì)定位絕對(duì)定位是一種元素定位方式，它是相對(duì)于最近的已定位（絕對(duì)定位、固定定位或相對(duì)定位）的父元素進(jìn)行定位的。如果所有父元素都沒(méi)有設(shè)置定位屬性，則元素將相對(duì)于body根元素（即瀏覽器窗口）進(jìn)行定位。當(dāng)元素的position屬性的值為absolute時(shí)，我們可以將其定位方式設(shè)置為絕對(duì)定位。固定定位是絕對(duì)定位的一種特殊形式，它使用瀏覽器窗口作為參考來(lái)確定網(wǎng)頁(yè)元素的位置。當(dāng)元素的position屬性的值為fixed時(shí)，我們可以將其定位方式設(shè)置為固定定位。通過(guò)設(shè)置元素的position屬性的值為fixed，該元素將擺脫標(biāo)準(zhǔn)文檔流的影響，始終相對(duì)于瀏覽器窗口來(lái)定義其顯示位置。2.固定定位5.3.4z-index層疊等級(jí)屬性在CSS中，z-index屬性用于控制元素在頁(yè)面中的堆疊順序，“z-index屬性值低的元素會(huì)被z-index屬性值高的元素遮住1.順序規(guī)則如果不對(duì)元素設(shè)置position屬性，則位于頁(yè)面后面的元素會(huì)遮蓋前面的元素。2.定位規(guī)則如果將position屬性的值設(shè)置為static，則位于頁(yè)面后面的元素依然會(huì)遮蓋前面的元素，所以將position屬性的值設(shè)置為static不會(huì)影響元素的遮蓋關(guān)系。position:static不會(huì)影響節(jié)點(diǎn)的遮蓋關(guān)系，靜態(tài)定位下的元素仍會(huì)被文檔流中的元素遮蓋3.默認(rèn)值規(guī)則如果所有元素都定義了position:relative，則z-index屬性的值為0的元素與沒(méi)有定義z-index屬性值的元素在同一層級(jí)內(nèi)沒(méi)有高低之分；但z-index屬性的值大于或等于1的元素會(huì)遮蓋沒(méi)有定義z-index屬性值的元素；z-index屬性的值為負(fù)數(shù)的元素將被沒(méi)有定義z-index屬性值的元素覆蓋。4.從父規(guī)則如果A和B元素都定義了position:relative，A元素的z-index屬性值比B元素大，則A元素的子元素必定覆蓋在B元素的子元素前面。通過(guò)制作“地域特產(chǎn)推介”網(wǎng)頁(yè)，可以充分展示地方特色和文化底蘊(yùn)，讓更多人了解和認(rèn)識(shí)到當(dāng)?shù)氐莫?dú)特魅力和豐富物產(chǎn)。利用HTML5和CSS技術(shù)制作美觀、互動(dòng)性強(qiáng)的網(wǎng)頁(yè)，吸引用戶瀏覽和購(gòu)買地域特產(chǎn)，拓寬銷售渠道，促進(jìn)地域特產(chǎn)產(chǎn)業(yè)的發(fā)展。借助現(xiàn)代化的信息技術(shù)手段，全方位、立體地展現(xiàn)地域特產(chǎn)的品質(zhì)與文化內(nèi)涵，促進(jìn)特產(chǎn)經(jīng)濟(jì)的發(fā)展，并為廣大消費(fèi)者提供便利的網(wǎng)購(gòu)體驗(yàn)。任務(wù)規(guī)劃（1）打開(kāi)開(kāi)發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為recommended。（2）在VSCode中打開(kāi)項(xiàng)目文件夾recommended，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（3）單擊list.html文件進(jìn)入代碼編輯窗口。（4）在<body></body>標(biāo)簽中，添加<header></header>標(biāo)簽。（5）在<body></body>標(biāo)簽中，添加<main></main>標(biāo)簽。（6）在<main>標(biāo)簽中添加一組<section></section>標(biāo)簽并設(shè)置好css。（7）在<body>標(biāo)簽中再添加一組<footer></footer>標(biāo)簽。任務(wù)實(shí)施（8）在項(xiàng)目文件夾recommended上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（9）單擊步驟（8）中新建的styles.css文件打開(kāi)代碼編輯窗口，首先設(shè)置全局樣式和頁(yè)面主題布局。（10）在style.css文件中，使用對(duì)導(dǎo)航菜單內(nèi)的樣式進(jìn)行設(shè)置（絕對(duì)定位）。（11）繼續(xù)在style.css文件中，對(duì)地域特產(chǎn)輪播圖樣式設(shè)置（相對(duì)定位）、特產(chǎn)詳情區(qū)域樣式進(jìn)行設(shè)置（靜態(tài)定位）。（12）在style.css文件中，對(duì)底部版權(quán)信息樣式進(jìn)行設(shè)置（固定定位）。制作企業(yè)網(wǎng)站廣告欄任務(wù)5.4任務(wù)描述在數(shù)字化營(yíng)銷日益重要的今天，企業(yè)網(wǎng)站作為企業(yè)形象的窗口和產(chǎn)品服務(wù)的展示平臺(tái)，承擔(dān)著重要的宣傳和交流職能，企業(yè)紛紛轉(zhuǎn)向線上渠道來(lái)推廣自己的品牌和產(chǎn)品。隨著HTML5和CSS3等現(xiàn)代Web技術(shù)的發(fā)展，網(wǎng)站設(shè)計(jì)變得更為靈活和多樣化，為企業(yè)提供了豐富的展示空間和互動(dòng)可能。企業(yè)網(wǎng)站作為品牌形象的重要窗口，其首頁(yè)的廣告欄是吸引用戶關(guān)注、傳達(dá)關(guān)鍵信息和引導(dǎo)用戶深入探索的重要區(qū)域。它不僅承載著商業(yè)推廣的任務(wù)，也是企業(yè)文化傳播和社會(huì)責(zé)任感體現(xiàn)的重要陣地。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，了解文字陰影和盒子陰影的概念并掌握它們的基本語(yǔ)法和屬性，掌握漸變的基本語(yǔ)法和屬性，掌握Web字體圖標(biāo)的應(yīng)用，最后利用所學(xué)知識(shí)制作企業(yè)網(wǎng)站廣告欄。相關(guān)知識(shí)5.4.1文字陰影和盒子陰影在CSS中，文字陰影和盒子陰影是兩種常見(jiàn)的陰影效果，它們可以為網(wǎng)頁(yè)元素增加深度和層次感。通過(guò)使用這些陰影效果，我們可以使元素看起來(lái)更加立體，仿佛它們從頁(yè)面中浮現(xiàn)或深入其中。通過(guò)CSS的text-shadow屬性添加文字陰影，box-shadow屬性設(shè)置盒子陰影，可調(diào)整陰影顏色、偏移量和模糊半徑等參數(shù)，實(shí)現(xiàn)所需立體效果1.文字陰影2.盒子陰影使用box-shadow屬性可以向邊框添加一個(gè)或多個(gè)陰影，每個(gè)陰影效果之間由逗號(hào)隔開(kāi)，每個(gè)陰影由2～4個(gè)長(zhǎng)度值、可選的顏色值及可選的inset關(guān)鍵詞來(lái)規(guī)定。5.4.2漸變漸變可以在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。要實(shí)現(xiàn)盒子背景顏色的漸變效果，常見(jiàn)的一般有兩種方法：線性漸變（LinearGradient）和徑向漸變（RadialGradient）。1.線性漸變background:linear-gradient(direction,color-stop1,color-stop2,...);線性漸變基本語(yǔ)法2．徑性漸變background:radial-gradient(shapesizeatposition,start-color,...,last-color);徑性漸變基本語(yǔ)法5.4.3Web字體圖標(biāo)的應(yīng)用字體圖標(biāo)（IconFont）是一種將圖標(biāo)作為字體文件（通常是TrueType或OpenType字體）來(lái)使用的技術(shù)。每個(gè)圖標(biāo)都被分配一個(gè)字符，通過(guò)CSS樣式可以將這些字符以字體的方式嵌入網(wǎng)頁(yè)。在網(wǎng)頁(yè)中使用字體圖標(biāo)的步驟如下所述。1．選擇字體圖標(biāo)庫(kù)首先，需要選擇一個(gè)字體圖標(biāo)庫(kù)，如FontAwesome、MaterialIcons、IcoMoon等。這些字體圖標(biāo)庫(kù)都提供了一系列矢量圖標(biāo)，以字體文件的形式提供下載。2．下載字體文件從所選字體圖標(biāo)庫(kù)的官方網(wǎng)站或其他來(lái)源下載字體文件（通常是.tf或.otf格式）。這些文件包含了所有圖標(biāo)的字符映射。3．將字體文件添加到項(xiàng)目中將下載的字體文件（通常包括.eot、.woff、.woff2、.ttf和.svg等格式）添加到項(xiàng)目的文件夾中，并確保可以通過(guò)相對(duì)路徑引用它們。4．引入字體文件在HTML文檔的<head>部分，使用<link>標(biāo)簽或@font-face規(guī)則來(lái)引入字體文件。5．使用圖標(biāo)在HTML文檔中，可以通過(guò)在元素中添加類名來(lái)使用圖標(biāo)。通常，類名的格式是字體圖標(biāo)庫(kù)名稱的后面跟圖標(biāo)名稱。6．修改字體圖標(biāo)可以通過(guò)CSS樣式來(lái)調(diào)整字體圖標(biāo)的大小、顏色和其他樣式?？梢酝ㄟ^(guò)修改字體圖標(biāo)的font-size、color等屬性來(lái)自定義外觀。任務(wù)規(guī)劃通過(guò)CSS對(duì)企業(yè)網(wǎng)站廣告欄進(jìn)行精細(xì)化樣式設(shè)計(jì)，運(yùn)用文字陰影、盒子陰影等特效增強(qiáng)文字和圖形的層次感與立體感，使廣告欄的內(nèi)容更顯生動(dòng)和高級(jí)。使用漸變背景營(yíng)造時(shí)尚和專業(yè)的視覺(jué)氛圍，符合企業(yè)的品牌形象。最終，確保廣告欄在各種設(shè)備和瀏覽器上都能良好呈現(xiàn)，符合響應(yīng)式設(shè)計(jì)原則，能夠有效地傳播企業(yè)信息，吸引潛在客戶并轉(zhuǎn)化為實(shí)際流量和業(yè)務(wù)增長(zhǎng)。任務(wù)實(shí)施（1）打開(kāi)開(kāi)發(fā)工具VSCode，在本地磁盤中新建項(xiàng)目文件夾，并命名為advertisement。（2）在VSCode中打開(kāi)項(xiàng)目文件夾advertisement，在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“index.html”（開(kāi)發(fā)中文件命名一般要做到見(jiàn)名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊index.html文件，進(jìn)入代碼編輯窗口。在<title></title>標(biāo)簽對(duì)中設(shè)置網(wǎng)頁(yè)的標(biāo)題為“企業(yè)網(wǎng)站廣告欄”，并引入外部樣式表文件。（4）在<body></body>標(biāo)簽對(duì)中添加一組<section></section>標(biāo)簽對(duì)，并設(shè)置好class，然后在<section></section>標(biāo)簽對(duì)中放置廣告欄。（5）在VSCode中打開(kāi)項(xiàng)目文件夾story，并在該項(xiàng)目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（6）單擊步驟（5）中新建的style.css文件，進(jìn)入代碼編輯窗口。首先引入網(wǎng)絡(luò)字體。（7）在style.css文件中，對(duì)廣告欄的樣式進(jìn)行設(shè)置。（8）在style.css文件中，對(duì)Web字體圖標(biāo)的樣式、廣告欄內(nèi)容的樣式進(jìn)行設(shè)置。制作黃河景色展示網(wǎng)頁(yè)任務(wù)5.5任務(wù)描述黃河作為中國(guó)的母親河，不僅在地理上滋養(yǎng)著沿岸土地和人民，還在歷史和文化上承載著中華民族的深厚情感和豐富記憶。近年來(lái)，國(guó)家高度重視黃河流域生態(tài)保護(hù)和高質(zhì)量發(fā)展，提出了一系列戰(zhàn)略措施。隨著互聯(lián)網(wǎng)技術(shù)和新媒體的發(fā)展，利用HTML5技術(shù)制作互動(dòng)性強(qiáng)、視覺(jué)表現(xiàn)力豐富的網(wǎng)頁(yè)成為重要的文化傳播手段之一。通過(guò)這種方式可以讓更多人在線上了解黃河之美，感受黃河沿線的歷史變遷、自然景觀及生態(tài)保護(hù)成果。任務(wù)分析通過(guò)對(duì)本任務(wù)的學(xué)習(xí)，掌握過(guò)渡、變形和動(dòng)畫的基本語(yǔ)法和屬性，最后利用所學(xué)知識(shí)制作黃河景色展示網(wǎng)頁(yè)。相關(guān)知識(shí)5.5.1過(guò)渡CSS3中加入了一項(xiàng)過(guò)渡功能，通過(guò)該功能可以將元素從一種樣式在指定時(shí)間內(nèi)平滑地過(guò)渡到另一種樣式，類似于簡(jiǎn)單的動(dòng)畫，但無(wú)須借助JavaScript。1．transition-property屬性transition-property屬性用來(lái)設(shè)置元素中參與過(guò)渡的屬性名稱2．transition-duration屬性transition-duration屬性用來(lái)設(shè)置過(guò)渡需要花費(fèi)的時(shí)間（單位為秒或毫秒）3．transition-timing-function屬性transition-timing-function屬性用來(lái)設(shè)置過(guò)渡動(dòng)畫的效果。4．transition-delay屬性transition-delay屬性用來(lái)設(shè)置過(guò)渡效果何時(shí)開(kāi)始5.5.2變形變形操作在不改變?cè)爻叽绾筒季值那疤嵯?，?shí)現(xiàn)動(dòng)畫效果或響應(yīng)用戶交互通過(guò)transform屬性實(shí)現(xiàn)移動(dòng)、縮放、旋轉(zhuǎn)等效果，豐富視覺(jué)體驗(yàn)使用transform-origin改變變形原點(diǎn)，多個(gè)變形函數(shù)可組合使用，以逗號(hào)分隔元素的旋轉(zhuǎn)可以使用rotate()函數(shù)實(shí)現(xiàn)。rot元素的旋轉(zhuǎn)可以使用rotate()函數(shù)實(shí)現(xiàn)。rotate()函數(shù)通過(guò)指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)。行旋轉(zhuǎn)。1.旋轉(zhuǎn)2.縮放元素的縮放可以使用scale()函數(shù)實(shí)現(xiàn)。scale()函數(shù)通過(guò)指定的縮放倍數(shù)使元素相對(duì)原點(diǎn)進(jìn)行縮放。3.移動(dòng)元素的移動(dòng)可以使用translate()函數(shù)實(shí)現(xiàn)。使用translate()函數(shù)，可以把元素從原來(lái)的位置移動(dòng)到指定位置，而不影響在X、Y軸上的任何Web組件。4．傾斜元素的傾斜可以使用skew()函數(shù)實(shí)現(xiàn)。使用skew()函數(shù)，可以把元素以其中心位置為原點(diǎn)圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?。skew()函數(shù)不會(huì)旋轉(zhuǎn)，而只會(huì)改變?cè)氐男螤?。skew()函數(shù)具有以下3種情況：1）skew(x,y)使元素在水平方向和垂直方向上同時(shí)傾斜。如果第二個(gè)參數(shù)未提供，則該參數(shù)的值為0，也就是在Y軸方向上無(wú)傾斜。2）skew(x)使元素僅在水平方向上傾斜。3）skew(y)使元素僅在垂直方向上傾斜。5.5.3動(dòng)畫CSS3引入了transition和animation屬性，它們可以用來(lái)創(chuàng)建平滑的狀態(tài)變化和關(guān)鍵幀動(dòng)畫。animation屬性與transition屬性相同，都是通過(guò)改變標(biāo)簽的屬性值來(lái)實(shí)現(xiàn)動(dòng)畫效果。不同的是：transition屬性只改變指定屬性的開(kāi)始值與結(jié)束值，然后在屬性值之間進(jìn)行平滑的過(guò)渡，不能實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果；而animation屬性則可以定義多個(gè)關(guān)鍵幀，通過(guò)每個(gè)關(guān)鍵幀中標(biāo)簽的屬性值來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。1.@keyframes規(guī)則keyframes表示關(guān)鍵幀，在CSS中可以通過(guò)@keyframes來(lái)設(shè)置關(guān)鍵幀動(dòng)畫，并指定動(dòng)畫名稱供使用者鎖定。2.animation-name屬性animation-name屬性用于指定由@keyframes規(guī)則描述的關(guān)鍵幀的名稱。3.animation-duration屬性animation-duration屬性用于設(shè)置動(dòng)畫的持續(xù)時(shí)間，默認(rèn)值為0秒，也就是說(shuō)，如果不配置animation-duration屬性，則默認(rèn)情況下是沒(méi)有動(dòng)畫效果的，即便使用animation-name屬性鎖定了動(dòng)畫名稱，但是由于動(dòng)畫持續(xù)時(shí)間為0秒，因此動(dòng)畫沒(méi)有效果。animation-timing-function屬性用于定義時(shí)間函數(shù)，通過(guò)該屬性可配置動(dòng)畫隨時(shí)間的運(yùn)動(dòng)速率和軌跡。4．a(chǎn)nimation-timing-function屬性用于設(shè)置動(dòng)畫延遲時(shí)間，單位為s。當(dāng)同時(shí)使用多個(gè)動(dòng)畫時(shí)，這個(gè)屬性使用頻率非常高，可依次定義每個(gè)動(dòng)畫的延遲執(zhí)行時(shí)間，區(qū)分開(kāi)每個(gè)動(dòng)畫5.animation-delay屬性animation-iteration-count屬性用于設(shè)置動(dòng)畫播放的次數(shù)，默認(rèn)值為1，即動(dòng)畫只播放一次。如果設(shè)置該屬性的值為infinite，則動(dòng)畫將播放無(wú)限次。6.animation-iteratio

溫馨提示

  • 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)論