第1章-響應(yīng)式網(wǎng)頁設(shè)計(jì)_第1頁
第1章-響應(yīng)式網(wǎng)頁設(shè)計(jì)_第2頁
第1章-響應(yīng)式網(wǎng)頁設(shè)計(jì)_第3頁
第1章-響應(yīng)式網(wǎng)頁設(shè)計(jì)_第4頁
第1章-響應(yīng)式網(wǎng)頁設(shè)計(jì)_第5頁
已閱讀5頁，還剩45頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第1章響應(yīng)式網(wǎng)頁設(shè)計(jì)1.1

什么是響應(yīng)式設(shè)計(jì)1.2

ViewPort1.3

媒體查詢1.4

實(shí)戰(zhàn)--商品銷售首頁設(shè)計(jì)了解響應(yīng)式設(shè)計(jì)的原理理解ViewPort的概念掌握媒體查詢的基礎(chǔ)知識(shí)實(shí)現(xiàn)媒體查詢的項(xiàng)目應(yīng)用引言2021年12月底我國網(wǎng)絡(luò)用戶規(guī)模達(dá)到10.32億，互聯(lián)網(wǎng)普及率達(dá)到73.0%，移動(dòng)手機(jī)用戶在網(wǎng)絡(luò)用戶中的占比上升至99.7%，因此設(shè)計(jì)出能夠適應(yīng)移動(dòng)設(shè)備的網(wǎng)頁成為前端開發(fā)的首要任務(wù)。響應(yīng)式網(wǎng)站可解決上述問題，響應(yīng)式頁面或網(wǎng)站可根據(jù)用戶終端設(shè)備的顯示屏尺寸自行調(diào)整頁面布局，實(shí)現(xiàn)“一套代碼打天下”，響應(yīng)式開發(fā)具有高效率、低成本的特點(diǎn)，適應(yīng)場(chǎng)景寬泛。1.1什么是響應(yīng)式設(shè)計(jì)響應(yīng)式原理響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)1.1什么是響應(yīng)式設(shè)計(jì)1.1.1響應(yīng)式原理響應(yīng)式（Responsivewebdesign，簡(jiǎn)稱RWD）是一套應(yīng)用程序用戶界面（UserInterface），該界面可自動(dòng)響應(yīng)不同設(shè)備窗口或屏幕尺寸（ScreenSize），并且在內(nèi)容和布局的渲染方面表現(xiàn)良好。1.1.1響應(yīng)式原理（1）響應(yīng)式設(shè)計(jì)與自適應(yīng)布局是兩個(gè)完全不同的概念，采用響應(yīng)式設(shè)計(jì)開發(fā)界面，需要檢測(cè)設(shè)備的視口分辨率，針對(duì)不同設(shè)備在客戶端做代碼處理，展現(xiàn)不同的布局和內(nèi)容。（2）自適應(yīng)需要開發(fā)多套界面，根據(jù)視口分辨率的不同判斷當(dāng)前訪問的設(shè)備是PC端、平板還是手機(jī)，從而向服務(wù)層發(fā)起請(qǐng)求，返回不同的頁面。1.1什么是響應(yīng)式設(shè)計(jì)響應(yīng)式設(shè)計(jì)與自適應(yīng)布局的區(qū)別如下。1.1.1響應(yīng)式原理響應(yīng)式網(wǎng)頁展示：國家智慧教育公共服務(wù)平臺(tái)PC端效果移動(dòng)端效果1.1什么是響應(yīng)式設(shè)計(jì)1.1.1響應(yīng)式原理1.1什么是響應(yīng)式設(shè)計(jì)（1）設(shè)置<meta>標(biāo)簽。在<head>標(biāo)簽里加入<meta>標(biāo)簽，該標(biāo)簽涵蓋頁面內(nèi)容、頁面描述信息、關(guān)鍵字、頁面刷新等?？赏ㄟ^<meta>標(biāo)簽提示瀏覽器使用當(dāng)前設(shè)備的寬度作為視圖寬度并禁止初始縮放，從而幫助瀏覽器精準(zhǔn)顯示頁面內(nèi)容。（2）通過媒介查詢?cè)O(shè)置樣式。媒體查詢是響應(yīng)式設(shè)計(jì)的核心，它能夠與瀏覽器進(jìn)行溝通。根據(jù)媒體類型和條件樣式規(guī)則匹配的數(shù)值，可設(shè)置設(shè)備的手持方向?yàn)榇怪狈较蚧蛩椒较?，設(shè)置頁面內(nèi)容的CSS樣式。（3）字體設(shè)置。響應(yīng)式字體大小應(yīng)與其父容器關(guān)聯(lián)，這樣才能適應(yīng)屏幕尺寸變化。CSS3的新單位rem，是相對(duì)于根元素字體大小的單位。根據(jù)設(shè)備類型重置根元素字體大小，可使頁面文字實(shí)現(xiàn)屏幕適配。（4）第三方框架?？衫幂^為流行的Bootstrap和Vue框架實(shí)現(xiàn)響應(yīng)式頁面的高效開發(fā)。響應(yīng)式設(shè)計(jì)的步驟如下。1.1.2響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)1.1什么是響應(yīng)式設(shè)計(jì)響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)：（1）開發(fā)成本低以移動(dòng)端為例，開發(fā)者可利用媒體查詢技術(shù)實(shí)現(xiàn)頁面與不同移動(dòng)設(shè)備的適配。（2）數(shù)據(jù)同步更新不同終端下的響應(yīng)式網(wǎng)頁共用同一個(gè)數(shù)據(jù)庫，當(dāng)數(shù)據(jù)庫更新后，各個(gè)終端將同步更新自身的頁面信息，可高效快捷地進(jìn)行數(shù)據(jù)管理。1.1.2響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)1.1什么是響應(yīng)式設(shè)計(jì)響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)：（3）兼容當(dāng)前及未來設(shè)備信息技術(shù)發(fā)展日新月異，智能手機(jī)推陳出新。響應(yīng)式設(shè)計(jì)可便捷高效地適應(yīng)不斷推出的新設(shè)備，實(shí)現(xiàn)頁面響應(yīng)式布局。（4）維護(hù)成本低HTML結(jié)構(gòu)可應(yīng)用于多種平臺(tái)上，不存在特殊的關(guān)聯(lián)匹配關(guān)系。通過響應(yīng)式布局為不同終端進(jìn)行特色設(shè)計(jì)時(shí)，不需要重新編寫一份HTML頁面結(jié)構(gòu)，只需使用CSS樣式針對(duì)設(shè)備類型進(jìn)行調(diào)整即可。因此，響應(yīng)式網(wǎng)頁的維護(hù)成本較低，適用范圍更廣。響應(yīng)式網(wǎng)頁的缺點(diǎn)：(1)舊版瀏覽器不支持由于響應(yīng)式設(shè)計(jì)需與CSS3新增的MediaQuery配合使用，因此舊版的瀏覽器并不支持響應(yīng)式設(shè)計(jì)。(2)加載速度慢響應(yīng)式網(wǎng)頁在頁面加載時(shí)需同時(shí)下載多份CSS文件為適配多種設(shè)備做準(zhǔn)備，再根據(jù)讀取的設(shè)備屏幕尺寸去匹配對(duì)應(yīng)CSS文件。下載大量的CSS資源會(huì)降低網(wǎng)頁的加載速度。1.1什么是響應(yīng)式設(shè)計(jì)1.1.2響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)響應(yīng)式網(wǎng)頁的缺點(diǎn)：(3)設(shè)計(jì)局限性響應(yīng)式網(wǎng)頁并不適合大型企業(yè)的復(fù)雜性網(wǎng)站，大型網(wǎng)站的界面中內(nèi)容較多，而響應(yīng)式設(shè)計(jì)最忌諱布局復(fù)雜、內(nèi)容煩瑣，設(shè)計(jì)此類頁面需要大量代碼，代碼過多會(huì)影響頁面加載速度。(4)開發(fā)時(shí)間較長(zhǎng)響應(yīng)式網(wǎng)頁需要兼容多種設(shè)備，因此對(duì)應(yīng)的CSS內(nèi)容必定是邏輯復(fù)雜的，開發(fā)所花費(fèi)的時(shí)間必定會(huì)比開發(fā)一個(gè)普通網(wǎng)頁的時(shí)間要長(zhǎng)。1.1什么是響應(yīng)式設(shè)計(jì)1.1.2響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)響應(yīng)式網(wǎng)頁的缺點(diǎn)：(3)設(shè)計(jì)局限性響應(yīng)式網(wǎng)頁并不適合大型企業(yè)的復(fù)雜性網(wǎng)站，大型網(wǎng)站的界面中內(nèi)容較多，而響應(yīng)式設(shè)計(jì)最忌諱布局復(fù)雜、內(nèi)容煩瑣，設(shè)計(jì)此類頁面需要大量代碼，代碼過多會(huì)影響頁面加載速度。(4)開發(fā)時(shí)間較長(zhǎng)響應(yīng)式網(wǎng)頁需要兼容多種設(shè)備，因此對(duì)應(yīng)的CSS內(nèi)容必定是邏輯復(fù)雜的，開發(fā)所花費(fèi)的時(shí)間必定會(huì)比開發(fā)一個(gè)普通網(wǎng)頁的時(shí)間要長(zhǎng)。1.1什么是響應(yīng)式設(shè)計(jì)1.1.1響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)響應(yīng)式網(wǎng)頁的缺點(diǎn)：(5)用戶流量浪費(fèi)響應(yīng)式網(wǎng)頁統(tǒng)一加載頁面中的圖片和視頻，當(dāng)用戶在配置較低的手機(jī)上加載不符合當(dāng)前設(shè)備需求的圖片或者視頻時(shí)，將會(huì)過度消耗用戶的流量。1.1什么是響應(yīng)式設(shè)計(jì)1.1.2響應(yīng)式網(wǎng)頁的優(yōu)點(diǎn)和缺點(diǎn)1.2Viewport布局視口(LayoutViewport)視覺視口(VisualViewport)理想視口(idealviewport)1.2Viewport1.2.1布局視口（LayoutViewport）1.布局視口的概念布局視口指的是網(wǎng)頁的寬度，一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)添加一個(gè)viewport元標(biāo)簽用于設(shè)置布局視口。2.布局視口的缺點(diǎn)根據(jù)設(shè)備類型的不同，布局視口的默認(rèn)寬度可能是768px、980px或1024px，在移動(dòng)設(shè)備中這些固定寬度并不適用。當(dāng)在移動(dòng)設(shè)備的瀏覽器中展示PC端的網(wǎng)頁內(nèi)容時(shí)，由于移動(dòng)設(shè)備屏幕較小，網(wǎng)頁在移動(dòng)端中不能像在PC端那樣完美地進(jìn)行展示，這也是布局視口存在的問題。1.2Viewport1.2.1布局視口（LayoutViewport）3.布局視口的結(jié)構(gòu)示意圖1.2Viewport1.2.2視覺視口（VisualViewport）1.視覺視口的概念視覺視口字面就是用戶當(dāng)前所看到的區(qū)域。在PC端中，瀏覽器窗口可隨意改變大小，我們可直觀的看到窗口發(fā)生的變化。2.移動(dòng)端的視覺視口在移動(dòng)端中，大部分手機(jī)、平板的瀏覽器并不支持改變?yōu)g覽器的寬高，所以視覺視口就是其屏幕大小，視覺視口寬度和設(shè)備屏幕寬度保持一致。1.2Viewport1.2.2視覺視口（VisualViewport）3.視覺視口的結(jié)構(gòu)示意圖1.2.3理想視口（idealviewport）1.理想視口的概念布局視口的默認(rèn)寬度并不是一個(gè)理想寬度，于是瀏覽器廠商引入理想視口這個(gè)概念。理想視口實(shí)現(xiàn)頁面在設(shè)備中的最佳呈現(xiàn)，理想視口是布局視口的一個(gè)理想尺寸。2.理想視口的優(yōu)點(diǎn)顯示在理想視口中的網(wǎng)頁擁有最理想的瀏覽、閱讀寬度，用戶無需對(duì)頁面進(jìn)行縮放便可完美地瀏覽整個(gè)頁面。1.2Viewport1.2Viewport3.理想視口的結(jié)構(gòu)示意圖1.2.3理想視口（idealViewport）1.2Viewport4.理想視口與布局視口保持一致的方法1.2.3理想視口（idealViewport）可使用下列的方法設(shè)置布局視口與理想視口寬度保持一致。在上述設(shè)置中，規(guī)定視口寬度為屏幕寬度，初始縮放比例為1，初始視覺視口就是理想視口。<meta>標(biāo)簽的主要目的是實(shí)現(xiàn)布局視口的寬度與理想視口的寬度一致。簡(jiǎn)單理解就是設(shè)備屏幕有多寬，布局視口就多寬。<metaname="viewport"content="width=device-width">1.2Viewport5.<meta>標(biāo)簽的常用屬性及說明1.2.3理想視口（idealViewport）屬性說明width設(shè)置布局視口的寬度，可指定固定值，如600。也可指定特殊值，如device-width為設(shè)備的寬度，單位為像素height與width相對(duì)應(yīng)，設(shè)置布局視口的高度。該屬性可設(shè)置為數(shù)值或device-height，單位為像素initial-scale設(shè)置頁面的初始縮放比例，即頁面第一次加載時(shí)的縮放比例minimum-scale設(shè)置允許用戶縮放頁面的最小比例maximum-scale設(shè)置允許用戶縮放頁面的最大比例user-scalable設(shè)置用戶是否可以手動(dòng)縮放。yes表示可以手動(dòng)縮放，no表示禁止手動(dòng)縮放1.3媒體查詢媒體查詢的設(shè)置方式媒體查詢使用方法媒體類型媒體查詢判斷條件媒體屬性案例練習(xí)-媒體查詢1.3媒體查詢1.3.1媒體查詢的設(shè)置方式1.媒體查詢介紹根據(jù)終端設(shè)備的特征來設(shè)置CSS樣式是媒體查詢的核心，媒體查詢可為使用不同設(shè)備的用戶提供最佳的操作和交互體驗(yàn)。媒體查詢語句主要由三個(gè)部分組成，分別是媒體類型、判斷條件和媒體屬性。媒體查詢的語法具體如下。2.媒體查詢的語法格式media媒體類型判斷條件(媒體屬性){css樣式；}1.3媒體查詢3.媒體查詢應(yīng)用練習(xí)將下列查詢條件設(shè)置為媒體查詢語句。屏幕寬度在768px以上，應(yīng)用<CSS樣式1>。屏幕寬度在480px以上，應(yīng)用<CSS樣式2>。媒體查詢?cè)O(shè)置示例如下。mediascreenand(min-width:768px){css樣式1}mediascreenand(min-width:480px){css樣式2}1.3.1媒體查詢的設(shè)置方式1.3媒體查詢1.3.2媒體查詢使用方法1.媒體查詢使用-標(biāo)簽引入應(yīng)用媒體查詢技術(shù)，可使一個(gè)頁面能夠在不同設(shè)備中顯示不同的樣式外觀。使用媒體查詢首先要在<head>標(biāo)簽中添加<meta>標(biāo)簽。標(biāo)簽格式如下所示。<metaname="viewport"content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable="no">1.3媒體查詢1.3.2媒體查詢使用方法2.媒體查詢的使用方式一：在CSS文件或style內(nèi)部樣式表中使用media關(guān)鍵字判斷當(dāng)前設(shè)備的屏幕寬度，選擇加載對(duì)應(yīng)的CSS。示例代碼如下。/*當(dāng)設(shè)備屏幕寬度在420~600像素之間時(shí),顯示背景圖片為1.jpg*/@mediascreenand(max-width:600px)and(min-width:420px){header{background-image:url(./1.jpg);}}1.3媒體查詢1.3.3媒體查詢使用方法3.媒體查詢的使用方式二：通過link標(biāo)簽引入，使用media屬性判斷當(dāng)前設(shè)備寬度，根據(jù)設(shè)備信息加載對(duì)應(yīng)CSS文件。/*當(dāng)設(shè)備屏幕寬度小于或等于420像素時(shí),加載Demo.css外部樣式表*/<linkrel="stylesheet"type="textcss"media="screenand(max-device-width:420px)"href="Demo.css">示例代碼如下。1.3媒體查詢1.3.3媒體類型媒體類型的概念：媒體類型（MediaType）是CSS中一個(gè)極為重要的屬性，通過媒體類型指定運(yùn)用的對(duì)象，為不同類型的設(shè)備指定特定樣式，從而實(shí)現(xiàn)更豐富、更靈活的界面。1.3媒體查詢1.3.3媒體類型媒體類型及說明：類型說明all所有設(shè)備braille盲文embossed盲文打印handheld手持設(shè)備print文檔打印或打印預(yù)覽模式projection設(shè)置單元項(xiàng)目演示，比如投影儀screen彩色屏幕，最常用的類型，一般和屏幕大小表達(dá)式聯(lián)合使用speech語音朗誦，用于屏幕閱讀軟件tty固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī)tv電視1.3媒體查詢1.3.4媒體查詢判斷條件1：and關(guān)鍵字and關(guān)鍵字在媒體查詢語句中的作用和邏輯與操作符在JavaScript中的作用類似，只有and關(guān)鍵字兩側(cè)的條件同時(shí)被滿足時(shí)，才會(huì)匹配媒體查詢規(guī)則，應(yīng)用對(duì)應(yīng)樣式。and關(guān)鍵字可用于合并多個(gè)媒體屬性或合并媒體屬性與媒體類型。（1）符合單一條件示例代碼如右側(cè)所示。@mediascreenand(max-width:420px){div{background-color:blue;}}如果屏幕寬度小于或等于420像素時(shí)，顯示div背景顏色為藍(lán)色。1.3媒體查詢1.3.4媒體查詢判斷條件1：and關(guān)鍵字（2）同時(shí)滿足兩種條件示例代碼如右側(cè)所示。@mediascreenand(max-width:600px)and(min-width:400px)

{div{background-color:red;}}如果屏幕寬度在400像素至600像素之間時(shí)，顯示div背景顏色為紅色。1.3媒體查詢1.3.4媒體查詢判斷條件1：and關(guān)鍵字（3）兩種條件滿足一種即可and關(guān)鍵字提供了逗號(hào)分割功能，規(guī)定僅需滿足逗號(hào)兩側(cè)中任意一側(cè)的條件即可。以逗號(hào)分割的形式設(shè)置媒體類型和媒體屬性，此時(shí)逗號(hào)即代表“或運(yùn)算”。示例代碼如右側(cè)所示。@mediascreenand(min-width:700px),printand(min-width:10in){div{background-color:yellow;}}當(dāng)屏幕寬度小于或等于420像素或使用至少6英寸寬的紙張的打印設(shè)備時(shí)，顯示div背景顏色為黃色。1.3媒體查詢1.3.4媒體查詢判斷條件2：not關(guān)鍵字not關(guān)鍵字用于對(duì)媒體查詢語句進(jìn)行取反操作，類似于JavaScript中的邏輯非運(yùn)算符。not可用于排除指定設(shè)備的樣式。使用not關(guān)鍵字需注意：（1）not關(guān)鍵字不能在單個(gè)條件前使用。（2）not關(guān)鍵字應(yīng)位于媒體查詢語句的開頭。（3）not是對(duì)整個(gè)媒體查詢語句進(jìn)行取反，并非僅對(duì)某一個(gè)媒體屬性取反。。1.3媒體查詢1.3.4媒體查詢判斷條件2：not關(guān)鍵字not關(guān)鍵字的示例代碼如下所示。

@medianotscreenand(monochrome){div{background-color:pink;}}單色屏幕設(shè)備不會(huì)應(yīng)用相關(guān)CSS樣式，除單色屏幕外的所有設(shè)備會(huì)應(yīng)用相關(guān)CSS樣式。1.3媒體查詢1.3.4媒體查詢判斷條件3：only關(guān)鍵字媒體查詢提供的only關(guān)鍵字是為兼容低版本的瀏覽器而存在的，用于向那些不支持媒體查詢卻需要讀取媒體類型的設(shè)備隱藏媒體查詢語句。用法與not關(guān)鍵字類似，該關(guān)鍵字必須位于聲明的開頭。only關(guān)鍵字的示例代碼如右側(cè)所示。@mediaonlyscreenand(min-width:600px){div{background-color:green;}}早期瀏覽器將上述示例看作media="only"，因?yàn)槊襟w類型不包含only，所以媒體查詢語句中的CSS樣式會(huì)被忽略。1.3媒體查詢1.3.5媒體屬性媒體屬性是媒體查詢語句的重要組成部分。媒體屬性是CSS3新增的屬性，大多數(shù)媒體屬性均帶有“min-”和“max-”此類前綴，通過前綴表達(dá)“小于等于”和“大于等于”的意義，避免應(yīng)用“<”和“>”字符與HTML標(biāo)簽發(fā)生沖突。需要注意，媒體屬性必須用括號(hào)（）包起來，否則不會(huì)生效。1.3媒體查詢1.3.5媒體屬性常用媒體屬性及說明類型Min/Max說明max-height/最大窗口高度max-width/最大窗口寬度coloryes每種色彩的字節(jié)數(shù)，整數(shù)device-heightyes設(shè)備屏幕的輸出高度device-widthyes設(shè)備屏幕的輸出寬度heightyes渲染界面的高度monochromeyes單色幀緩沖器中每像素字節(jié)resolutionyes分辨率scanno媒體類型的掃描方式widthyes渲染界面的寬度orientationno橫屏或豎屏1.3媒體查詢1.3.6案例練習(xí)-媒體查詢案例-響應(yīng)式圖片案例介紹本實(shí)例是使用媒體查詢技術(shù)根據(jù)設(shè)備的屏幕寬度設(shè)置不同的圖片排版。當(dāng)屏幕寬度大于500px時(shí)，三張圖片分別占據(jù)屏幕的三分之一；當(dāng)屏幕寬度等于500px時(shí)圖片與屏幕同寬，屏幕大小不能縮小。

<!DOCTYPEhtml><html><head><metacharset="utf-8">

<metaname="viewport"content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable="no"><title>圖片自適應(yīng)</title></head><body><divid="box"><imgsrc="./img/1.jpg"alt=""><imgsrc="./img/2.jpg"alt=""><imgsrc="./img/3.jpg"alt=""></div></body></html>代碼實(shí)現(xiàn)1.3媒體查詢1.3.6案例練習(xí)-媒體查詢主體代碼

例1.1

CSS部分代碼

例1.1<style>*{margin:0;padding:0;border:0;}body,html{height:100%;width:100%;box-sizing:border-box;}#box{width:100%;height:100%;}/*圖片默認(rèn)占據(jù)屏幕的三分之一*/

img{width:33%;float:left;}/*圖片與屏幕等寬*/@mediascreenand(max-width:500px){img{width:100%;}}</style>1.3媒體查詢1.3.6案例練習(xí)-媒體查詢響應(yīng)式圖片的實(shí)現(xiàn)效果等分布局滿屏布局1.4實(shí)戰(zhàn)--商品銷售首頁設(shè)計(jì)1.4.1頁面結(jié)構(gòu)分析簡(jiǎn)圖四書五經(jīng)是中國儒家的經(jīng)典書籍，對(duì)中國在政治、思想、學(xué)術(shù)、文化諸方面都產(chǎn)生了重大而深遠(yuǎn)的影響。本實(shí)例將以“四書五經(jīng)”為主題制作一個(gè)簡(jiǎn)單的書籍銷售首頁，首頁主要由頭部導(dǎo)航欄、主體部分的商品卡片構(gòu)成。利用無序列表制作導(dǎo)航條，導(dǎo)航條包括網(wǎng)站LOGO、6個(gè)導(dǎo)航菜單項(xiàng)以及登錄鏈接。商品卡片主要由圖片、卡片介紹信息以及功能按鈕組成。登錄頁面結(jié)構(gòu)簡(jiǎn)圖如圖所示。1.4實(shí)戰(zhàn)--商品銷售首頁設(shè)計(jì)1.4.1頁面結(jié)構(gòu)分析簡(jiǎn)圖媒體查詢的樣式需求：（1）當(dāng)屏幕寬度大于等于760px時(shí)，導(dǎo)航欄的菜單項(xiàng)正常顯示。（2）當(dāng)屏幕寬度小于760px時(shí)，使用display屬性隱藏導(dǎo)航欄的菜單項(xiàng)并顯示菜單折疊按鈕。（3）其次，當(dāng)屏幕寬度小于等于375px時(shí)，頁面內(nèi)的卡片保持單列布局。（4）當(dāng)屏幕寬度在375px至760px之間時(shí)，頁面內(nèi)的卡片保持雙列布局。（5）當(dāng)屏幕寬度在760px至1100px之間時(shí)，頁面內(nèi)的卡片保持三列布局。（6）當(dāng)屏幕尺寸大于1100px時(shí)，頁面內(nèi)的卡片保持四列布局<!DOCTYPEhtml><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable="no"><linkrel="stylesheet"href="./fontawesome/css/font-awesome.min.css"><title>Document</title><divclass="box"><header><divclass="top"><span>menu</span><imgsrc="./img/qf.png"alt=""/> <ul>

<li><ahref="">首頁</a></li>以下省略重復(fù)性<li>代碼</ul><ahref="">登錄</a> </div></header>代碼實(shí)現(xiàn)1.4實(shí)戰(zhàn)--商品銷售首頁設(shè)計(jì)1.4.2代碼實(shí)現(xiàn)主體代碼結(jié)構(gòu)-部分代碼例1.2

<main><divclass="product-grid"><divclass="product-image"> <ahref="#"><imgclass="pic-1"src="./img/book1.jpg"></a></div>.<divclass="product-content"> <h3class="title"><ahref="#">《論語》</a></h3><divclass="price">￥69.00<span>￥144.00</span></div></div><ulclass="social"> <li><ahref=""><iclass="fafa-search"></i></a></li>此處省略重復(fù)性<li>代碼</ul></div>以下省略重復(fù)性.product-grid卡片代碼</main></div></body>代碼實(shí)現(xiàn)1.4實(shí)戰(zhàn)-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論