資訊專欄INFORMATION COLUMN
摘要：之后，為了弄明白到底為什么，我直接扒來了網(wǎng)頁的源代碼，首先，先搞明白創(chuàng)建按鈕變號是怎么回事。
上次匯報中，潘老師演示了一下思否網(wǎng)站設(shè)計的優(yōu)點，其中一點就是頁面隨屏幕自動發(fā)生變化，先看幾張圖，來了解一下這神奇的功能
首先，這是正常寬屏（1920*1080）下的效果
放大到165%的效果，會發(fā)現(xiàn)搜索框變窄了，而創(chuàng)建按鈕從文字變成了一個圖標(biāo)
放大到195%的效果，會發(fā)現(xiàn)左右兩側(cè)的豎欄消失了，導(dǎo)航欄的通知和私信圖標(biāo)和右邊的一些鏈接也不見了，而導(dǎo)航欄下則多了一行導(dǎo)航
隨即老師拋出一個問題，怎么實現(xiàn)的？
作為一個新人小白，對于css的使用只有入門級別，我大概知道bootstrap上的柵格可以在不同大小的屏幕自動按列排布，但隨屏幕大小圖標(biāo)變換和消失就不甚知曉了。
之后，為了弄明白到底為什么，我直接扒來了網(wǎng)頁的源代碼，首先，先搞明白創(chuàng)建按鈕變+號是怎么回事。
先找“創(chuàng)建按鈕”，在創(chuàng)建按鈕下面i標(biāo)簽就是放大后的+號
接著刪除除創(chuàng)建按鈕和i標(biāo)簽以外的其他所有無關(guān)代碼
此時，按鈕在放大后依然擁有變化的功能
接著下來的過程很無腦，就是挨個刪除他們的class屬性，檢索使得按鈕能變化的功能，最后，我鎖定到了這個屬性visible（可見的）。
去網(wǎng)上一查，找到了答案
這個visible是bootstrap里的自動隱藏和顯示，唉，看文檔時沒仔細看，學(xué)藝不精啊，具體用法如下：
簡單來說就是根據(jù)屏幕大小自動顯示或隱藏，然后我再回首頁的源代碼搜索visible，基本變化的地方都用到了該屬性
另外，在div的class中設(shè)置多個柵格，可以在對應(yīng)大小的屏幕上對應(yīng)顯示
總結(jié)從這個細節(jié)就可以看出，一個強大的網(wǎng)站總是能考慮到用戶的體驗，盡量做到用戶友好
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113861.html
摘要：根據(jù)網(wǎng)頁主要有三部分組成結(jié)構(gòu)表現(xiàn)和行為。要想制作符合標(biāo)準(zhǔn)的頁面，一個必不可少的關(guān)鍵組成部分就是聲明。行內(nèi)元素行內(nèi)元素又稱內(nèi)聯(lián)元素。當(dāng)前，大部分門戶網(wǎng)站大部分企業(yè)的宣傳站點都采用了這種布局方式。 1 前言 1-1 W3C標(biāo)準(zhǔn) W3C標(biāo)準(zhǔn)，既一系列標(biāo)準(zhǔn)的集合，他的本質(zhì)是結(jié)構(gòu)標(biāo)準(zhǔn)語言。就像平時使用的HTML,CSS等都要遵守這些標(biāo)準(zhǔn)。我們這里只討論W3C網(wǎng)頁標(biāo)準(zhǔn)。根據(jù)網(wǎng)頁主要有三...
摘要：根據(jù)網(wǎng)頁主要有三部分組成結(jié)構(gòu)表現(xiàn)和行為。要想制作符合標(biāo)準(zhǔn)的頁面，一個必不可少的關(guān)鍵組成部分就是聲明。行內(nèi)元素行內(nèi)元素又稱內(nèi)聯(lián)元素。當(dāng)前，大部分門戶網(wǎng)站大部分企業(yè)的宣傳站點都采用了這種布局方式。 1 前言 1-1 W3C標(biāo)準(zhǔn) W3C標(biāo)準(zhǔn)，既一系列標(biāo)準(zhǔn)的集合，他的本質(zhì)是結(jié)構(gòu)標(biāo)準(zhǔn)語言。就像平時使用的HTML,CSS等都要遵守這些標(biāo)準(zhǔn)。我們這里只討論W3C網(wǎng)頁標(biāo)準(zhǔn)。根據(jù)網(wǎng)頁主要有三...
摘要：根據(jù)網(wǎng)頁主要有三部分組成結(jié)構(gòu)表現(xiàn)和行為。要想制作符合標(biāo)準(zhǔn)的頁面，一個必不可少的關(guān)鍵組成部分就是聲明。行內(nèi)元素行內(nèi)元素又稱內(nèi)聯(lián)元素。當(dāng)前，大部分門戶網(wǎng)站大部分企業(yè)的宣傳站點都采用了這種布局方式。 1 前言 1-1 W3C標(biāo)準(zhǔn) W3C標(biāo)準(zhǔn)，既一系列標(biāo)準(zhǔn)的集合，他的本質(zhì)是結(jié)構(gòu)標(biāo)準(zhǔn)語言。就像平時使用的HTML,CSS等都要遵守這些標(biāo)準(zhǔn)。我們這里只討論W3C網(wǎng)頁標(biāo)準(zhǔn)。根據(jù)網(wǎng)頁主要有三...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應(yīng)一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設(shè)計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...
摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應(yīng)一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 即傳統(tǒng)Web設(shè)計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...
閱讀 2064·2021-09-07 10:14
閱讀 1494·2019-08-30 15:53
閱讀 2282·2019-08-30 12:43
閱讀 2875·2019-08-29 16:37
閱讀 768·2019-08-26 13:29
閱讀 2016·2019-08-26 13:28
閱讀 451·2019-08-23 18:33
閱讀 3539·2019-08-23 16:09
