成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

【CSS練習(xí)】IT修真院--練習(xí)3-簡(jiǎn)單界面

MrZONT / 3136人閱讀

摘要：任務(wù)三一個(gè)最簡(jiǎn)單的移動(dòng)端頁(yè)面今天完成的事情運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡(jiǎn)單并繼續(xù)學(xué)習(xí)優(yōu)化讓布局更好適應(yīng)屏幕變化使用了盒模型及百分比了解區(qū)別在中應(yīng)用圖片處理學(xué)習(xí)明天計(jì)劃的事情深度思考手機(jī)分辨率和網(wǎng)頁(yè)的區(qū)別周末補(bǔ)學(xué)任務(wù)四計(jì)劃及簡(jiǎn)單編寫(xiě)遇

任務(wù)三、 一個(gè)最簡(jiǎn)單的移動(dòng)端頁(yè)面 今天完成的事情

運(yùn)用布局知識(shí)跟隨設(shè)計(jì)圖進(jìn)行布局，完成簡(jiǎn)單Demo并繼續(xù)學(xué)習(xí)優(yōu)化.

讓布局更好適應(yīng)屏幕變化(使用了盒模型及百分比).

了解rem&em&px區(qū)別 & 在Demo中應(yīng)用rem.

圖片處理學(xué)習(xí).

明天計(jì)劃的事情

[ ] 深度思考：手機(jī)分辨率和網(wǎng)頁(yè)px的區(qū)別(TODO:周末補(bǔ)學(xué))

link1

link2

link3

[ ] 任務(wù)四計(jì)劃及簡(jiǎn)單編寫(xiě)

遇到的問(wèn)題

暫無(wú)

收獲 1. 運(yùn)用布局知識(shí)進(jìn)行更復(fù)雜的布局

借助盒模型完成布局

明確目標(biāo)：完成簡(jiǎn)單Demo，找出不足繼續(xù)學(xué)習(xí)優(yōu)化，目標(biāo)效果如下

編碼

設(shè)計(jì)圖尺寸為640*1136,于是在瀏覽器選擇相同比例的iPhone5/SE(320*568)進(jìn)行模擬

新建index.html并編寫(xiě)簡(jiǎn)單布局div及css，將頁(yè)面縱向分為topbar&container兩個(gè)部分, 其中topbar包含著后退按鈕，container包含title、content、contact三個(gè)部分. 接著通過(guò)在PS界面上畫(huà)參考線(xiàn)方法，簡(jiǎn)單獲得頁(yè)面各部分比例，并以此為依據(jù)完善CSS，效果如下圖所示:

在PhotoShop中找到圖層工作區(qū)，找到將要用到的素材點(diǎn)擊右鍵-快速導(dǎo)出為PNG(由于有素材圖所以不需要使用切圖工具)，并用吸管工具獲取背景顏色，再在拾色器(前景色)獲取背景色#68cdd6

接下來(lái)將圖片素材引入index.html中，調(diào)整圖片長(zhǎng)寬

截取效果圖GIF的320*650來(lái)與當(dāng)前Demo做對(duì)比(吐槽一下這跟PSD圖不一樣呀=。=)

2. 讓布局更好適應(yīng)屏幕寬度變化

先嘗試對(duì)剛才寫(xiě)的Demo應(yīng)用屏幕改變的效果

425px&768px的效果圖與現(xiàn)在對(duì)比

后退按鍵與title變化不大

container的左右margin過(guò)小

contacts的頂部margin過(guò)小

修改

將container左右margin改為百分比

將context和contacts中間改為margin和padding的組合

結(jié)果：基本完成與設(shè)計(jì)圖的重合

3. 了解rem & em & px & % & vw & wh & vm的區(qū)別

參考：

CSS3的REM設(shè)置字體大小

rem與em的使用和區(qū)別詳解

視區(qū)相關(guān)單位vw, vh..簡(jiǎn)介以及可實(shí)際應(yīng)用場(chǎng)景

1)px：相對(duì)長(zhǎng)度單位，相對(duì)于屏幕的分辨率.

特點(diǎn)：

優(yōu)點(diǎn)：穩(wěn)定 & 精確

缺點(diǎn)：改變?yōu)g覽器字體大小，布局會(huì)被打破

作用：

給定具體大小，協(xié)助em和rem重寫(xiě)具體單位

2)em：相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前元素的文本尺寸,如果當(dāng)前元素文本尺寸未設(shè)置則相對(duì)于瀏覽器默認(rèn)字體尺寸

計(jì)算公式：targetEM = 1 / parentPX * targetPX;

特點(diǎn)：

1.em值不固定; 2.會(huì)繼承父類(lèi)字體大小

缺點(diǎn)：如果不重新計(jì)算已被放大字體的em值的話(huà)，各層設(shè)置的字體大小復(fù)合會(huì)導(dǎo)致連鎖反應(yīng),這個(gè)連鎖反應(yīng)是"繼承"導(dǎo)致的，想要避免繼承的連鎖反應(yīng)可以在目標(biāo)元素上顯式設(shè)置px單位的font-size來(lái)停止繼承.

總結(jié)：em對(duì)應(yīng)px的值取決于其使用字體的大小，此字體大小受父類(lèi)繼承過(guò)來(lái)的大小影響，除非顯示重寫(xiě)一個(gè)具體單位.

作用：

允許保持在一個(gè)特定的設(shè)計(jì)元素范圍內(nèi)的可擴(kuò)展性(應(yīng)在標(biāo)識(shí)清除的情況下使用em單位)

3)rem(root em)：相對(duì)長(zhǎng)度單位,只相對(duì)于HTML根元素

特點(diǎn)：

優(yōu)點(diǎn)：只需修改根元素大小就可以成比例地調(diào)整所有字體大小,且避免了字體大小逐層復(fù)合的連鎖反應(yīng)，且IE8+的瀏覽器都支持

Tip：為應(yīng)對(duì)不支持的瀏覽器,可以多寫(xiě)一個(gè)絕對(duì)單位的聲明，例如：

  p {font-size:14px; font-size:.875rem;}

總結(jié)：rem對(duì)應(yīng)px的值取決于html元素字體大小，此大小會(huì)被瀏覽器中字體大小的設(shè)置影響，除非顯示重寫(xiě)一個(gè)具體單位.

作用：

保證無(wú)論用戶(hù)如何設(shè)置自己的瀏覽器，布局都能調(diào)到合適大小

維護(hù)用戶(hù)擁有自己體驗(yàn)偏好的權(quán)利

4)%

特點(diǎn)：

普通元素的百分比定位基于父類(lèi).

設(shè)置了position: fixed的元素的百分比定位基于瀏覽器窗體.

設(shè)置了position: absolute的元素的百分比定位相對(duì)于static定位以外第一個(gè)父元素進(jìn)行定位.

5)vw(viewport width, viewport指的是瀏覽器內(nèi)部可視區(qū)域大小)

特點(diǎn)：

計(jì)算： 1vw = 1% * width_viewport

6)vh(viewport height)

特點(diǎn)：

計(jì)算： 1vh = 1% * height_viewport

7)vm(viewport min)

特點(diǎn)：

計(jì)算： 1vm = 1% * (width

實(shí)際使用：

元素嚴(yán)格不可縮放時(shí)，使用px

一切可擴(kuò)展都應(yīng)該用rem, 包括媒體查詢(xún)

千萬(wàn)不要用em控制字體的大小

em用于縮放一些沒(méi)有默認(rèn)字體大小的元素，當(dāng)字體變大整個(gè)組件也能隨之變大

多列布局用%較好

vw、vh、vm做頁(yè)面排版很厲害，但是兼容做得比較晚，所以?xún)?yōu)先還是用rem和%解決問(wèn)題

在task3中應(yīng)用rem.(已完成)

4. 深度思考

如何從UI圖中獲取所需信息（使用Photoshop）參考：前端工程師技能之photoshop巧用系列

終極目標(biāo)：視覺(jué)設(shè)計(jì)師是怎樣讓前端工程師 100% 實(shí)現(xiàn)設(shè)計(jì)效果的

頁(yè)面大致布局獲取: 視圖-標(biāo)尺，視圖-新建參考線(xiàn)，將頁(yè)面分塊大致確定布局；

字體獲取: 左側(cè)欄-文字工具，點(diǎn)擊目標(biāo)文字查看字體屬性

圖片獲取:

圖層中有現(xiàn)有素材: 選中所需圖層，右鍵快速導(dǎo)出為PNG

圖層中無(wú)現(xiàn)有素材: 前端工程師技能之photoshop巧用系列第三篇——切圖篇

顏色獲取：左側(cè)欄-吸管工具，然后在拾色器中獲取顏色值

如何進(jìn)行自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 參考：自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）

允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整

不使用絕對(duì)寬度布局，多用%和auto

字體多用rem

使用流式布局，謹(jǐn)慎使用絕對(duì)布局

使用媒體響應(yīng)

根據(jù)屏幕大小加載圖片

margin和padding使用時(shí)機(jī)：根據(jù)盒模型,padding是盒子內(nèi)部填充物,margin是盒子與其他物品保持的距離，所以用padding來(lái)擴(kuò)充(撐大)盒子，用margin來(lái)保持距離

css選擇器優(yōu)先級(jí) 參考:優(yōu)先級(jí)-CSS：層疊樣式表

從上到下優(yōu)先級(jí)遞增：

對(duì)優(yōu)先級(jí)無(wú)影響：通配符選擇器(*) & 關(guān)系選擇符(+,>,~) & 否定偽類(lèi)(:not())

類(lèi)型選擇器(h1) & 偽元素(::before)

類(lèi)選擇器(.btn) & 屬性選擇器(type="radio") & 偽類(lèi)(:hover)

ID選擇器(#navbar)

內(nèi)聯(lián)樣式(style)

覆蓋任何聲明：!important

效果

Github

線(xiàn)上展示

系列文章

【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

【CSS練習(xí)】IT修真院--練習(xí)2-開(kāi)發(fā)工具

【CSS練習(xí)】IT修真院--練習(xí)3-簡(jiǎn)單界面

【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

【CSS練習(xí)】IT修真院--練習(xí)6-護(hù)工列表界面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113428.html

相關(guān)文章

  • 【CSS練習(xí)】IT修真院--練習(xí)6-護(hù)工列表界面

    摘要：任務(wù)六護(hù)工列表頁(yè)完成的事情規(guī)劃任務(wù)六完成基本界面編寫(xiě)計(jì)劃的事情限制最小寬度使用雪碧圖替換當(dāng)前的多張圖片引入完成模擬下拉框編寫(xiě)屏幕過(guò)窄時(shí)，列表項(xiàng)左邊文字被截?cái)喑霈F(xiàn)省略號(hào)復(fù)習(xí)之前的代碼規(guī)范，優(yōu)化代碼查看驗(yàn)收標(biāo)準(zhǔn)查看深度思考遇到的問(wèn)題收獲頁(yè)面原生 任務(wù)六、 護(hù)工列表頁(yè) 完成的事情 1.規(guī)劃任務(wù)六2.完成基本界面編寫(xiě) 計(jì)劃的事情 [x] 限制最小寬度 [x] 使用雪碧圖替換當(dāng)前的多張圖片引入...

    Sleepy 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)2-開(kāi)發(fā)工具

    摘要：任務(wù)二認(rèn)識(shí)開(kāi)發(fā)工具今天完成的事情編輯器對(duì)比版本管理工具學(xué)習(xí)基本操作代碼托管平臺(tái)對(duì)比服務(wù)器使用學(xué)習(xí)明天計(jì)劃的事情分析任務(wù)三完成規(guī)劃及部分開(kāi)發(fā)遇到的問(wèn)題暫無(wú)收獲編輯器對(duì)比參考三者比較，各有哪些優(yōu)勢(shì)和弱勢(shì)一款成熟的，對(duì)網(wǎng)站開(kāi)發(fā)者友好，插件齊全功能 任務(wù)二. 認(rèn)識(shí)開(kāi)發(fā)工具 今天完成的事情 IDE & 編輯器對(duì)比 版本管理工具學(xué)習(xí) Git基本操作 代碼托管平臺(tái)對(duì)比 服務(wù)器使用學(xué)習(xí) 明天計(jì)劃的...

    _ang 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)1-九宮格

    摘要：用于顯示日志信息及輸入一些命令請(qǐng)求監(jiān)聽(tīng)。可獲得請(qǐng)求列表，點(diǎn)開(kāi)某一項(xiàng)將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請(qǐng)求的請(qǐng)求方法狀態(tài)碼請(qǐng)求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶(hù)代理，幫服務(wù)器識(shí)別設(shè)備用預(yù)覽。 九宮格——用html+css制作一個(gè)網(wǎng)頁(yè) 一. 目標(biāo)效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...

    Tecode 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)4-移動(dòng)端界面

    摘要：任務(wù)四一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面完成的事情完成簡(jiǎn)單布局，然后填充界面與效果圖對(duì)比優(yōu)化完成驗(yàn)收要求擴(kuò)展性頂欄固定進(jìn)行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進(jìn)行修改輸入欄左側(cè)換用輸入限制電話(huà)位，密碼位根據(jù)結(jié)構(gòu)的語(yǔ)義化修改嘗試下再加一 任務(wù)四、 一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面 完成的事情 完成簡(jiǎn)單布局，然后填充界面 與效果圖對(duì)比優(yōu)化 完成驗(yàn)收要求：header擴(kuò)展性 & 頂欄固定 進(jìn)行p...

    kun_jian 評(píng)論0 收藏0

  • 【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

    摘要：任務(wù)五一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面完成的事情學(xué)習(xí)張?chǎng)涡袷澜缦嚓P(guān)章節(jié)張?chǎng)涡裣盗辛私馔ㄅ浞x擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過(guò)一遍，查缺 任務(wù)五、 一個(gè)最常見(jiàn)的移動(dòng)端頁(yè)面 完成的事情 float學(xué)習(xí) 張?chǎng)涡瘛禖SS世界》相關(guān)章節(jié) 張?chǎng)涡?float系列 了解CSS通配符 &...

    Jonathan Shieber 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<