《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)

上傳人：q*** IP屬地：山東上傳時(shí)間：2026-01-28 格式：PPTX 頁(yè)數(shù)：110 大?。?1.38MB 積分：20 舉報(bào) 版權(quán)申訴

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)_第2頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)_第3頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)_第4頁(yè)

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)_第5頁(yè)

已閱讀5頁(yè)，還剩105頁(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)介

網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)案例教程第3章使用CSS3樣式表CONTENT目錄初識(shí)CSS樣式表01盒模型02列表標(biāo)簽及樣式03元素分類及轉(zhuǎn)換04CSS常用屬性05選擇器高級(jí)06CSS繼承與優(yōu)先07常用CSS3屬性0801初識(shí)CSS樣式表W3C制定層疊樣式表W3C與CSS的誕生W3C于1997年公布HTML4.0時(shí)，同步推出CSS1.0標(biāo)準(zhǔn)，正式確立層疊樣式表規(guī)范，開(kāi)啟網(wǎng)頁(yè)結(jié)構(gòu)與表現(xiàn)分離的新紀(jì)元。CSS版本演進(jìn)歷程1998年發(fā)布CSS2.0完善基礎(chǔ)功能，2001年啟動(dòng)CSS3模塊化開(kāi)發(fā)，2011年成為推薦標(biāo)準(zhǔn)，持續(xù)新增特性并向下兼容，奠定現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)基石。CSS核心設(shè)計(jì)理念通過(guò)選擇器定位HTML元素，屬性值對(duì)定義視覺(jué)表現(xiàn)，支持多樣式層疊規(guī)則，實(shí)現(xiàn)單一修改全局生效的高效樣式管理機(jī)制。結(jié)構(gòu)樣式分離原理12結(jié)構(gòu)與樣式分離概念CSS實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)與樣式分離，HTML定義結(jié)構(gòu)，CSS負(fù)責(zé)外觀表現(xiàn)，便于統(tǒng)一管理和修改樣式。結(jié)構(gòu)樣式分離優(yōu)勢(shì)結(jié)構(gòu)樣式分離使網(wǎng)頁(yè)維護(hù)更高效，更改樣式時(shí)無(wú)需改動(dòng)HTML結(jié)構(gòu)，提升開(kāi)發(fā)效率與代碼可讀性。第一個(gè)CSS案例231CSS控制網(wǎng)頁(yè)外觀通過(guò)CSS設(shè)置文字顏色、背景顏色及段落首行縮進(jìn)，使用

::after偽元素使用::before/::after配合content屬性添加前后綴，結(jié)合display:block轉(zhuǎn)換塊級(jí)元素，可創(chuàng)意應(yīng)用于圖標(biāo)裝飾。偽元素綜合應(yīng)用挑戰(zhàn)按鈕懸浮提示框?qū)崿F(xiàn)，對(duì)比偽元素與額外HTML標(biāo)簽優(yōu)劣，討論技術(shù)選型策略。07CSS繼承與優(yōu)先CSS樣式繼承020301CSS樣式繼承概念子元素可繼承父元素的部分樣式，如字體、文本顏色等，實(shí)現(xiàn)樣式的快速統(tǒng)一與復(fù)用。繼承案例演示設(shè)置的字體樣式，其子元素自動(dòng)繼承，直觀展現(xiàn)CSS樣式繼承的效果?？衫^承屬性除字體外，文本顏色等也是可繼承屬性，合理運(yùn)用能提升網(wǎng)頁(yè)樣式的一致性。選擇器優(yōu)先級(jí)1·2·3·選擇器優(yōu)先級(jí)順序選擇器優(yōu)先級(jí)遵循id>class>tag>*規(guī)則，可通過(guò)!important提升特定樣式優(yōu)先級(jí)。多元素組合選擇器的優(yōu)先級(jí)首要的原則是控制對(duì)象的精準(zhǔn)度。當(dāng)控制的精準(zhǔn)度相同時(shí)，id個(gè)數(shù)越多的優(yōu)先級(jí)越高。class個(gè)數(shù)越多的優(yōu)先級(jí)越高。tagName（標(biāo)簽名）個(gè)數(shù)越多的優(yōu)先級(jí)越高。后定義的樣式覆蓋前面定義的樣式。優(yōu)先級(jí)實(shí)戰(zhàn)應(yīng)用在控制對(duì)象的精度相同的情況下，#wrap

.list{}

和.wrap

#list{}優(yōu)先級(jí)一樣。樣式優(yōu)先級(jí)123HTML與CSS的優(yōu)先級(jí)當(dāng)HTML與CSS樣式有沖突時(shí)，瀏覽器按CSS樣式中定義的屬性來(lái)顯示。就近原則在不考慮選擇器優(yōu)先級(jí)的情況下，瀏覽器一般按照與該元素關(guān)系遠(yuǎn)近來(lái)顯示，這可以簡(jiǎn)單地稱之為就近原則。樣式定義優(yōu)先級(jí)內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表，可借!important調(diào)整。08常用CSS3屬性@font-face

規(guī)則@font-face規(guī)則概述CSS3的@font-face規(guī)則允許開(kāi)發(fā)者自定義字體，突破用戶設(shè)備預(yù)裝字體限制，使網(wǎng)頁(yè)設(shè)計(jì)更靈活，增強(qiáng)個(gè)性化。@font-face規(guī)則語(yǔ)法@font-face規(guī)則需指定字體名稱和文件路徑，如{font-family:'MyFont';src:url('myfont.eot’);}支持多種格式。@font-face使用步驟使用@font-face需獲取字體文件、編寫(xiě)規(guī)則、應(yīng)用字體，通過(guò)font-family在CSS選擇器中使用，實(shí)現(xiàn)自定義字體效果。圓角屬性設(shè)置010203圓角屬性基礎(chǔ)CSS3引入border-radius屬性，實(shí)現(xiàn)元素圓角效果。通過(guò)設(shè)置像素值，可控制四角弧度，簡(jiǎn)化傳統(tǒng)圖片圓角處理方式。多值半徑設(shè)置border-radius支持1-4個(gè)參數(shù)設(shè)置，分別對(duì)應(yīng)左上角、右上、右下、左下圓角半徑。未指定值自動(dòng)鏡像對(duì)稱，靈活控制各角形態(tài)。實(shí)踐應(yīng)用技巧結(jié)合盒模型調(diào)整圓角元素尺寸，注意與邊框、內(nèi)邊距的視覺(jué)協(xié)調(diào)。移動(dòng)端需測(cè)試不同屏幕適配效果，避免過(guò)度圓角影響辨識(shí)度。方框陰影屬性設(shè)置方框陰影屬性概述方框陰影屬性用于為元素添加陰影效果，通過(guò)box-shadow屬性實(shí)現(xiàn)。設(shè)置外陰影效果使用box-shadow屬性的水平偏移、垂直偏移和模糊半徑參數(shù)，可為元素添加外陰影效果。設(shè)置內(nèi)陰影效果調(diào)整box-shadow屬性的參數(shù)，可為元素添加內(nèi)陰影效果，增強(qiáng)視覺(jué)層次感。溢出屬性123溢出屬性定義overflow規(guī)定內(nèi)容溢出元素框時(shí)的顯示方式，有visible、hidden、scroll、auto、inherit五種取值。溢出屬性取值visible默認(rèn)完整顯示；hidden隱藏超出部分；scroll始終顯滾動(dòng)條；auto按需顯滾動(dòng)條；inherit繼承父級(jí)。溢出高級(jí)用法overflow-x和overflow-y可分別控制水平與垂直方向的溢出效果，實(shí)現(xiàn)精細(xì)布局控制?？梢?jiàn)性屬性123可見(jiàn)性屬性定義visibility規(guī)定元素可見(jiàn)性，元素仍占空間，與display不同，不影響布局?？梢?jiàn)性取值說(shuō)明visible默認(rèn)可見(jiàn)，hidden隱藏但占位，collapse用于表格，inherit繼承父設(shè)置。可見(jiàn)與顯示區(qū)別visibility:hidden保留空間，display:none完全刪除，依需求選控制方式。THANKS感謝觀看網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)案例教程第4章使用HTML+CSS布局網(wǎng)頁(yè)CONTENT目錄CSS布局概述01元素浮動(dòng)02元素定位03圖片特點(diǎn)及布局04表單及布局05表格及布局06內(nèi)聯(lián)框架07CSS進(jìn)階應(yīng)用08PC端網(wǎng)頁(yè)布局綜合案例實(shí)戰(zhàn)0901CSS布局概述CSS布局相關(guān)概念CSS布局核心概念CSS布局利用樣式表實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容定位，基于盒模型，通過(guò)設(shè)置屬性合理放置元素，如將網(wǎng)頁(yè)內(nèi)容比作剪報(bào)進(jìn)行裁剪粘貼。盒模型與元素類型盒模型是CSS布局核心，元素分塊、行內(nèi)及行內(nèi)塊元素，不同類型顯示特性各異，影響布局效果。三種定位機(jī)制概述CSS有普通流、浮動(dòng)和絕對(duì)定位三種定位機(jī)制，適用于不同場(chǎng)景，可對(duì)網(wǎng)頁(yè)分層，浮動(dòng)和絕對(duì)定位元素脫離普通流。01020302元素浮動(dòng)浮動(dòng)屬性float010203浮動(dòng)屬性概述浮動(dòng)屬性可改變?cè)仫@示方式，使塊元素同行顯示，行內(nèi)元素轉(zhuǎn)塊元素，有none、left、right三種取值。浮動(dòng)常規(guī)用法常用于多列布局和文繞圖效果，如兩div左浮動(dòng)實(shí)現(xiàn)兩列，圖片左浮動(dòng)實(shí)現(xiàn)文字環(huán)繞，浮動(dòng)元素脫離普通流。浮動(dòng)特殊情況可能引發(fā)不能同行顯示、元素重疊、父元素高度塌陷等問(wèn)題，可通過(guò)設(shè)固定高度或clear屬性解決，需合理使用浮動(dòng)及清除屬性。與inline-block的比較132浮動(dòng)與行內(nèi)塊比較浮動(dòng)和行內(nèi)塊都能實(shí)現(xiàn)同行排列，支持屬性控制。但浮動(dòng)脫離普通流，行內(nèi)塊占原位置空間，布局影響不同。行內(nèi)塊元素空隙問(wèn)題行內(nèi)塊元素間有空格或換行會(huì)產(chǎn)生空隙，需調(diào)整代碼或樣式解決，避免布局不整齊。清除屬性的作用與應(yīng)用清除屬性可解決浮動(dòng)元素對(duì)后續(xù)元素的影響，包括重疊和父元素高度塌陷問(wèn)題，有多種實(shí)現(xiàn)方法。清除屬性010203清除屬性取值清除屬性clear有none、left、right、both四種取值，分別對(duì)應(yīng)不清除、清除左、右、兩側(cè)浮動(dòng)影響，可精準(zhǔn)控制布局。解決重疊問(wèn)題使用clear屬性能解決浮動(dòng)元素致后續(xù)元素重疊問(wèn)題，如前元左浮，后元設(shè)clear:both;可正常顯示，避免布局錯(cuò)亂。處理高度塌陷浮動(dòng)使父元高塌陷，可為父元設(shè)置固定高度，加設(shè)空div子元素并設(shè)置clear:both;或用::after偽元素，確保布局穩(wěn)定，撐開(kāi)父元高度。03元素定位定位屬性position定位屬性概述CSS定位屬性position實(shí)現(xiàn)元素定位，需結(jié)合top、left等邊偏移和z-index屬性，有static、absolute、relative、fixed四種取值。相對(duì)、絕對(duì)和固定定位相對(duì)定位保留原位置空間，適用于微調(diào)；絕對(duì)定位脫離普通流，精確控制位置，用于復(fù)雜布局場(chǎng)景。固定定位可使元素固定顯示于瀏覽器窗口上的某個(gè)位置。定位應(yīng)用案例設(shè)置元素position為absolute，通過(guò)top、left、z-index等屬性精確控制位置，實(shí)現(xiàn)網(wǎng)頁(yè)元素的精準(zhǔn)布局。z-index123z-index取值范圍z-index屬性控制元素重疊順序，取值范圍包括正數(shù)、負(fù)數(shù)，默認(rèn)值為0，需配合非static定位屬性使用。層疊順序原則z-index值越大元素越靠上層顯示，值越小則越靠下層，通過(guò)調(diào)整數(shù)值可改變?cè)馗采w關(guān)系。定位屬性前提使用z-index必須配合position定位屬性，僅對(duì)非static定位元素（如relative/absolute）有效。元素居中010203未定位元素居中未定位元素通過(guò)margin:auto實(shí)現(xiàn)水平居中，適用于塊級(jí)元素，無(wú)需定位屬性配合。絕對(duì)定位居中技巧絕對(duì)定位元素利用負(fù)外邊距實(shí)現(xiàn)居中，左偏移50%頁(yè)面寬，外邊距為負(fù)的元素寬度一半。相對(duì)定位居中方法相對(duì)定位元素可結(jié)合外邊距自動(dòng)或負(fù)外邊距法實(shí)現(xiàn)居中，需根據(jù)場(chǎng)景選擇合適方式。04圖片特點(diǎn)及布局圖片布局特點(diǎn)020301圖片布局核心概念圖片可通過(guò)position或float屬性精確定位，也可利用自身的行內(nèi)塊特性布局，需考慮行內(nèi)框與行框概念，結(jié)合text-align和vertical-align控制對(duì)齊。水平垂直對(duì)齊方式text-align控制塊框內(nèi)行內(nèi)框及文字水平對(duì)齊，取值左、中、右；vertical-align控制行內(nèi)框在行框內(nèi)垂直對(duì)齊，如基線、居中、頂部、底部等。圖片布局實(shí)踐應(yīng)用設(shè)置圖片float為left實(shí)現(xiàn)文繞圖，position為absolute精確定位，通過(guò)調(diào)整屬性滿足不同頁(yè)面布局需求，實(shí)現(xiàn)多樣化展示效果。05表單及布局表單基本結(jié)構(gòu)表單基本結(jié)構(gòu)表單由<form>標(biāo)簽定義，包含文本框、按鈕等元素。通過(guò)<input>標(biāo)簽創(chuàng)建輸入框，type屬性決定類型，如text、password等。表單元素表單元素包括文本框、密碼框、單選框、復(fù)選框和按鈕等。使用標(biāo)簽的type屬性區(qū)分不同元素類型，滿足多種交互需求。表單偽類應(yīng)用CSS偽類如:focus、:disabled用于選擇表單元素狀態(tài)，實(shí)現(xiàn)樣式定制。例如設(shè)置輸入框獲得焦點(diǎn)時(shí)的樣式或禁用按鈕的外觀。010203action屬性詳解123action屬性定義action指定處理表單數(shù)據(jù)的服務(wù)器程序，決定數(shù)據(jù)提交的目標(biāo)地址。action示例解析示例中action="fcheck.asp"或action="mailto:name@"，展示不同提交方式。method屬性說(shuō)明表單數(shù)據(jù)提交方式method屬性規(guī)定表單數(shù)據(jù)發(fā)送方式，get將數(shù)據(jù)附加在URL后傳輸，適合少量數(shù)據(jù)；post封裝數(shù)據(jù)發(fā)送，安全性高，適用于敏感信息。get與post對(duì)比get方式數(shù)據(jù)暴露在URL中，安全性較差，但實(shí)現(xiàn)簡(jiǎn)單；post方式數(shù)據(jù)在請(qǐng)求體中，更安全，常用于登錄等重要數(shù)據(jù)傳輸場(chǎng)景。屬性設(shè)置要點(diǎn)設(shè)置method屬性時(shí)，需根據(jù)數(shù)據(jù)特性和安全需求選擇get或post，同時(shí)配合action屬性指定數(shù)據(jù)處理程序地址，確保表單正常提交。name屬性用途name屬性用途name屬性用于表單元素命名，便于識(shí)別與數(shù)據(jù)提交，確保信息準(zhǔn)確對(duì)應(yīng)。<input>標(biāo)簽用法<input>標(biāo)簽定義<input>是表單常用元素，用于輸入數(shù)據(jù)，有多種類型，如文本框、密碼框等。<input>常用屬性包含type、value、name等屬性，可設(shè)置輸入?yún)^(qū)類型、值、名稱等。<input>的type屬性type屬性決定輸入?yún)^(qū)類型，有文本、密碼、單選等多種常見(jiàn)類型。<textarea>標(biāo)簽特點(diǎn)多行文本輸入用于輸入多行文本內(nèi)容，通過(guò)rows和cols屬性設(shè)置行列數(shù)，提供用戶填寫(xiě)較長(zhǎng)信息的空間。基本屬性配置包含name命名、rows行數(shù)、cols列數(shù)等屬性，可定義文本域的標(biāo)識(shí)和尺寸，便于表單數(shù)據(jù)處理。與輸入框差異區(qū)別于單行<input>，<textarea>支持多行輸入，常用于留言、評(píng)論等需要大量文字的場(chǎng)景。<select>標(biāo)簽功能<select>標(biāo)簽定義<select>標(biāo)簽用于創(chuàng)建列表框或下拉列表框，提供用戶選擇的選項(xiàng)。<select>標(biāo)簽用法通過(guò)<option>標(biāo)簽定義選項(xiàng)，可設(shè)置multiple和size屬性控制多選及可見(jiàn)數(shù)目。<select>標(biāo)簽屬性name屬性命名，<option>的selected設(shè)默認(rèn)值，value指定發(fā)送給服務(wù)器的值。010203<label>標(biāo)簽123<label>標(biāo)簽綁定原理<label>的for屬性通過(guò)id與表單元素關(guān)聯(lián)，實(shí)現(xiàn)點(diǎn)擊文本聚焦對(duì)應(yīng)輸入框，提升表單操作便捷性。綁定機(jī)制示例解析如<labelfor="nan">男</label>綁定<inputid="nan">，點(diǎn)擊"男"自動(dòng)選中單選按鈕，直觀展示交互效果。提升交互體驗(yàn)作用for屬性實(shí)現(xiàn)標(biāo)簽與元素聯(lián)動(dòng)，減少用戶操作步驟，優(yōu)化表單填寫(xiě)流程，增強(qiáng)用戶體驗(yàn)。<fieldset>標(biāo)簽010203表單元素分組功能<fieldset>標(biāo)簽用于對(duì)表單元素分組，使頁(yè)面結(jié)構(gòu)清晰，避免用戶輸入時(shí)眼花繚亂，提升表單可讀性。legend標(biāo)簽配合使用<legend>為<fieldset>分組設(shè)置標(biāo)題，增強(qiáng)表單可讀性，優(yōu)化整體布局，便于用戶理解和操作。示例代碼與效果展示

<fieldset><legend>健康信息</legend>...</fieldset>的示例代碼，呈現(xiàn)健康信息分組效果，直觀展示表單元素分組布局。表單相關(guān)偽類功能010203表單美化重要性表單是網(wǎng)頁(yè)交互核心，美觀實(shí)用可提升用戶體驗(yàn)，美化能增視覺(jué)效果且減少輸入錯(cuò)誤。CSS偽類作用CSS偽類是選擇特定狀態(tài)元素的選擇器，用于表單可增強(qiáng)交互性，簡(jiǎn)化代碼且性能高。常用偽類應(yīng)用如:focus、:disabled等偽類，各有定義、格式與實(shí)際應(yīng)用，可優(yōu)化表單交互與布局。表單相關(guān)偽類優(yōu)勢(shì)簡(jiǎn)化代碼與性能優(yōu)勢(shì)CSS偽類簡(jiǎn)化表單樣式定義，減少JavaScript依賴。瀏覽器原生支持，提升渲染性能，確保流暢交互體驗(yàn)。增強(qiáng)交互與用戶體驗(yàn)偽類為表單元素提供即時(shí)視覺(jué)反饋，如焦點(diǎn)高亮、禁用狀態(tài)提示，直觀引導(dǎo)用戶操作，降低誤操作率?？鐬g覽器兼容性保障主流瀏覽器均支持標(biāo)準(zhǔn)表單偽類，確保樣式在不同平臺(tái)一致呈現(xiàn)，避免因兼容性問(wèn)題導(dǎo)致的顯示差異。:focus選擇器:focus選擇器定義:focus用于選取獲焦點(diǎn)元素，用戶點(diǎn)擊或Tab鍵切換時(shí)觸發(fā)，常用于表單輸入框等元素。:focus使用格式selector:focus{property:value;}，如input:focus{border:2pxsolidblue;}為輸入框添藍(lán)邊。:focus實(shí)際應(yīng)用表單中輸入框獲焦點(diǎn)時(shí)，可改邊框或背景色提示用戶，提升關(guān)注度，減少誤操作。:disabled選擇器:disabled選擇器定義:disabled選擇器用于選取被禁用的表單元素，禁用后用戶無(wú)法操作該元素，常用于控制表單交互流程。:disabled使用格式通過(guò)selector:disabled設(shè)置樣式，例如input:disabled可改變禁用輸入框背景色，直觀提示用戶狀態(tài)。:disabled實(shí)際應(yīng)用在注冊(cè)表單中，未填完必填項(xiàng)時(shí)禁用提交按鈕，配合灰色背景樣式，明確告知用戶當(dāng)前不可操作狀態(tài)。:enabled選擇器Part01Part03Part02:enabled選擇器定義:enabled選擇器用于選取未被禁用的表單元素，與:disabled相對(duì)，能選擇可正常使用的元素。:enabled使用格式使用格式為selector:enabled{property:value;...}，可設(shè)置可使用元素的樣式。:enabled實(shí)際應(yīng)用在表單中，可通過(guò)改變可使用元素樣式，如鼠標(biāo)指針形狀，提示用戶元素可操作。:checked選擇器010203:checked選擇器定義:checked用于選取被選中元素，如單選按鈕和復(fù)選框，表示用戶已選擇這些選項(xiàng)。:checked使用格式selector:checked{property:value;}，例如為選中項(xiàng)設(shè)置背景色或邊框樣式。:checked實(shí)際應(yīng)用在表單中，通過(guò)改變選中元素的樣式，如背景顏色，突出顯示用戶選擇。:required選擇器030201:required選擇器定義:required選擇器用于選取必填元素，在提交表單時(shí)用戶必須填寫(xiě)這些字段，確保數(shù)據(jù)完整性。:required使用格式通過(guò)selector:required{property:value;}設(shè)置樣式，如為必填輸入框添加紅色邊框，明確提示用戶。:required實(shí)際應(yīng)用在表單中，改變必填字段樣式，如邊框顏色，告知用戶哪些字段必填，減少提交錯(cuò)誤，提高填寫(xiě)質(zhì)量。:optional選擇器213:optional選擇器定義:optional選擇器用于選取未設(shè)required屬性的元素，表示用戶可選擇性填寫(xiě)的字段。:optional使用格式selector:optional{property:value;}，如input:optional{border:2pxsolid#ccc;}，為非必填輸入框添加灰色邊框。:optional實(shí)際應(yīng)用表單中通過(guò)改變非必填字段樣式，如邊框顏色，區(qū)分必填和非必填字段，提升表單易用性。:read-only選擇器Part01Part03Part02:read-only選擇器定義:read-only選擇器用于選取設(shè)置了read-only屬性的元素，表示用戶只能查看，不能修改的字段。:read-only使用格式selector:read-only{property:value;...}，例如：input:read-only{background-color:#eee;}，將只讀輸入框背景設(shè)置為淺灰色。:read-only實(shí)際應(yīng)用在表單中，某些字段可能需要顯示但不允許用戶修改，如用戶信息的查看頁(yè)面，通過(guò)改變只讀字段的樣式，可以明確地告知用戶該字段不可編輯。06表格及布局表格標(biāo)簽010302<table>定義表格<table>標(biāo)簽用于創(chuàng)建表格，是表格的容器。表格結(jié)構(gòu)組成表格包含表頭、行和單元格。表頭由<th>定義，內(nèi)容加粗居中；行由<tr>定義，單元格由<td>定義，可包含文本、圖片等元素。表格標(biāo)題設(shè)置<caption>標(biāo)簽為表格添加標(biāo)題，位于表格上方，內(nèi)容居中顯示，增強(qiáng)表格的語(yǔ)義化，每個(gè)表格只能有一個(gè)標(biāo)題。合并左右列231合并左右列方法使用`colspan`屬性可合并表格左右列，取值為合并列數(shù)，如`<tdcolspan="2">`合并兩列，代碼示例展示其用法。`colspan`屬性作用`colspan`屬性用于控制表格單元格合并左右列，能改變表格結(jié)構(gòu)，使內(nèi)容呈現(xiàn)更符合需求，提升表格布局靈活性。合并列代碼要點(diǎn)合并左右列時(shí)，保留最左`<td>`標(biāo)簽，其他列標(biāo)簽可省略，通過(guò)示例代碼可清晰了解合并左右列的具體實(shí)現(xiàn)方式。合并上下行020301合并上下行方法使用`rowspan`屬性可合并表格上下行，取值為合并行數(shù)，如`<tdrowspan="3">`表示合并三行。合并行代碼示例合并行時(shí)保留最上邊`<td>`標(biāo)簽，其他行對(duì)應(yīng)`<td>`標(biāo)簽無(wú)需保留，示例展示操作方法。合并行注意事項(xiàng)合并上下行要確保數(shù)據(jù)邏輯正確，避免因合并導(dǎo)致表格結(jié)構(gòu)混亂或數(shù)據(jù)丟失。選擇器類型選擇010203標(biāo)簽選擇器應(yīng)用標(biāo)簽選擇器控制所有表格相關(guān)標(biāo)簽樣式，如`table{...}`設(shè)置全局表格樣式，統(tǒng)一管理。類選擇器使用類選擇器針對(duì)特定表格標(biāo)簽，如`.my-table{...}`，靈活調(diào)整局部樣式，滿足多樣需求。ID選擇器和后代選擇器ID選擇器用于唯一表格標(biāo)簽，如`#unique-table{...}`，精確控制單個(gè)元素樣式，避免沖突。如果需要將以上定義的表格樣式僅作用于指定的范圍內(nèi)，可以用后代選擇器實(shí)現(xiàn)。`border-collapse`屬性`border-collapse`屬性控制表格邊框折疊或分離，默認(rèn)值為separate，設(shè)為collapse可折疊雙線條邊框?yàn)閱尉€條。邊框折疊效果使用`border-collapse:collapse;`可使表格邊框折疊，避免雙線條，使表格更簡(jiǎn)潔。應(yīng)用場(chǎng)景在需要簡(jiǎn)潔表格樣式時(shí)，使用`border-collapse`屬性可有效減少邊框冗余，提升視覺(jué)效果。`border-spacing`屬性132`border-spacing`屬性定義`border-spacing`用于設(shè)置表格單元格間距，適用于邊框分離模式，可設(shè)一個(gè)或兩個(gè)值控制水平和垂直間距。屬性應(yīng)用場(chǎng)景該屬性常用于調(diào)整復(fù)雜表格布局，通過(guò)增大間距提升可讀性，避免內(nèi)容擁擠影響視覺(jué)效果。與邊框折疊對(duì)比相比`border-collapse`的單線邊框效果，`border-spacing`保留雙線結(jié)構(gòu)，適合需要強(qiáng)調(diào)單元格分隔的場(chǎng)景。`caption-side`屬性`caption-side`屬性定義`caption-side`屬性用于設(shè)置表格標(biāo)題的位置，默認(rèn)顯示在表格上方，可調(diào)整為下方以優(yōu)化布局。屬性取值說(shuō)明`caption-side`屬性取值包括`top`和`bottom`，分別控制標(biāo)題在表格的頂部或底部顯示。語(yǔ)義化與樣式影響通過(guò)`caption-side`調(diào)整標(biāo)題位置，增強(qiáng)表格語(yǔ)義化，同時(shí)需配合CSS統(tǒng)一標(biāo)題樣式。隔行變色020301隔行變色作用隔行變色提升表格可讀性，數(shù)據(jù)量大時(shí)效果顯著，通過(guò)奇偶行不同背景色區(qū)分，便于視覺(jué)瀏覽與數(shù)據(jù)查看。隔行變色代碼用類選擇器為奇數(shù)行和偶數(shù)行定義樣式，如`.odd-row`和`.even-row`，在CSS中設(shè)置不同背景色，實(shí)現(xiàn)隔行變色效果。示例代碼展示示例代碼中，先為表格行添加對(duì)應(yīng)類名，再在CSS里為類名定義背景顏色，如奇數(shù)行設(shè)淺灰，偶數(shù)行設(shè)綠色，展示隔行變色。表格的特征010203表格默認(rèn)無(wú)邊框表格默認(rèn)無(wú)邊框，需通過(guò)CSS設(shè)置邊框樣式，以實(shí)現(xiàn)表格的視覺(jué)分隔和美化。單元格寬度分配表格設(shè)置寬度時(shí)，未指定單元格寬度則默認(rèn)平分，確保布局均勻。行高與列寬特性表格行高取最高單元格高度，列寬取最寬單元格寬度，保持對(duì)齊。單元格內(nèi)容對(duì)齊132單元格內(nèi)容對(duì)齊`th`內(nèi)容默認(rèn)加粗且居中，`td`內(nèi)容上下居中、左對(duì)齊。通過(guò)CSS可調(diào)整對(duì)齊方式，提升表格美觀度與可讀性。默認(rèn)對(duì)齊規(guī)則表格未設(shè)置樣式時(shí)，表頭與數(shù)據(jù)單元格按標(biāo)準(zhǔn)對(duì)齊顯示，確?；拘畔⑶逦尸F(xiàn)，為后續(xù)樣式調(diào)整提供基礎(chǔ)。對(duì)齊方式調(diào)整利用CSS的text-align和vertical-align屬性，可自定義單元格內(nèi)容水平與垂直對(duì)齊方式，滿足不同排版需求。07內(nèi)聯(lián)框架內(nèi)聯(lián)框架基本用法123內(nèi)聯(lián)框架定義內(nèi)聯(lián)框架即<iframe>標(biāo)簽，用于在網(wǎng)頁(yè)中嵌入其他網(wǎng)頁(yè)內(nèi)容，通過(guò)src屬性指定源URL，可設(shè)置寬高控制顯示范圍?；緦傩越馕龊诵膶傩园ǎ簊rc（嵌入地址）width/height（尺寸設(shè)定）支持name命名，用于超鏈接target定位跳轉(zhuǎn)位置?；A(chǔ)布局實(shí)踐通過(guò)<iframe>可實(shí)現(xiàn)內(nèi)容區(qū)域分離，如導(dǎo)航欄與主體內(nèi)容分區(qū)展示，配合target屬性實(shí)現(xiàn)框架間內(nèi)容加載聯(lián)動(dòng)。08CSS進(jìn)階應(yīng)用網(wǎng)頁(yè)logo及圖標(biāo)應(yīng)用網(wǎng)頁(yè)logo定義與設(shè)置網(wǎng)頁(yè)logo是網(wǎng)站重要標(biāo)識(shí)，通過(guò)<link>標(biāo)簽設(shè)置網(wǎng)站圖標(biāo)，rel屬性為shortcutic

人人文庫(kù)> 全部分類> 教育資料 > 課件下載

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件 第3、4章 使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔

《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》課件第3、4章使用CSS3樣式表、使用HTML+CSS布局網(wǎng)頁(yè)