国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

MrZONT / 3117人閱讀

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

任務(wù)三、 一個最簡單的移動端頁面 今天完成的事情

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

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

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

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

明天計劃的事情

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

link1

link2

link3

[ ] 任務(wù)四計劃及簡單編寫

遇到的問題

暫無

收獲 1. 運用布局知識進行更復(fù)雜的布局

借助盒模型完成布局

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

編碼

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

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

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

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

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

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

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

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

后退按鍵與title變化不大

container的左右margin過小

contacts的頂部margin過小

修改

將container左右margin改為百分比

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

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

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

參考：

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

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

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

1)px：相對長度單位，相對于屏幕的分辨率.

特點：

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

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

作用：

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

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

計算公式：targetEM = 1 / parentPX * targetPX;

特點：

1.em值不固定; 2.會繼承父類字體大小

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

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

作用：

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

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

特點：

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

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

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

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

作用：

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

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

4)%

特點：

普通元素的百分比定位基于父類.

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

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

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

特點：

計算： 1vw = 1% * width_viewport

6)vh(viewport height)

特點：

計算： 1vh = 1% * height_viewport

7)vm(viewport min)

特點：

計算： 1vm = 1% * (width

實際使用：

元素嚴格不可縮放時，使用px

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

千萬不要用em控制字體的大小

em用于縮放一些沒有默認字體大小的元素，當字體變大整個組件也能隨之變大

多列布局用%較好

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

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

4. 深度思考

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

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

頁面大致布局獲取: 視圖-標尺，視圖-新建參考線，將頁面分塊大致確定布局；

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

圖片獲取:

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

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

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

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

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

不使用絕對寬度布局，多用%和auto

字體多用rem

使用流式布局，謹慎使用絕對布局

使用媒體響應(yīng)

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

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

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

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

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

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

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

ID選擇器(#navbar)

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

覆蓋任何聲明：!important

效果

Github

線上展示

系列文章

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113428.html

相關(guān)文章

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

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

    Sleepy 評論0 收藏0

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

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

    _ang 評論0 收藏0

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

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

    Tecode 評論0 收藏0

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

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

    kun_jian 評論0 收藏0

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

    摘要：任務(wù)五一個最常見的移動端頁面完成的事情學(xué)習(xí)張鑫旭世界相關(guān)章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計劃的事情找時間把前面任務(wù)的官方提供鏈接過一遍，查缺 任務(wù)五、 一個最常見的移動端頁面 完成的事情 float學(xué)習(xí) 張鑫旭《CSS世界》相關(guān)章節(jié) 張鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<