資訊專欄INFORMATION COLUMN
摘要：用于顯示日志信息及輸入一些命令請求監(jiān)聽?？色@得請求列表，點(diǎn)開某一項將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請求的請求方法狀態(tài)碼請求服務(wù)器的地址其他一些設(shè)置響應(yīng)頭部包含用戶代理，幫服務(wù)器識別設(shè)備用預(yù)覽。
九宮格——用html+css制作一個網(wǎng)頁 一. 目標(biāo)效果： 二. 效果描述
圓角橙色九宮格，自適應(yīng)頁面大小
三. 開發(fā)計劃 1. 開發(fā)[x] index.html建九個div.block
[x] app.css設(shè)定block大小顏色圓角橫排
[x] 尋找自適應(yīng)方法
重點(diǎn)：
div大小隨屏幕變化
令block的高度等于寬度
[x] 猜想：block父級寬度跟隨屏幕變化，block始終為父級30%左右
[x] 方案一：Flex布局
步驟:
簡單分三行div.wrap(display:flex)，各帶三個div.block(flex:1)，寬度自適應(yīng)成功
將div.block高度自適應(yīng)寬度,根據(jù)這篇文章padding-top百分比值參考容器寬度，可以嘗試使用padding-top來為div.block頂出高度，但是這種寫法div.block的margin只能很小，否則在小屏幕上會變成長方形
效果：已實(shí)現(xiàn)
代碼：見div.container-flex
特點(diǎn)：flex對移動設(shè)備適配好
步驟2中margin只能用很小數(shù)值的處理，根據(jù)任務(wù)要求最終的頁面應(yīng)該是九宮格，方塊和方塊間有間隔，方塊和容器也有間隔，所以橫縱的設(shè)計應(yīng)該是用湊100%容器寬度的方法,按照這個設(shè)計來使用百分比,使用first-child & last-child偽類來完善布局.效果如下：
margin(1%) + 方塊(32%) + margin(1%) + 方塊(32%) + margin(1%) + 方塊(32%) + margin(1%) = 100%
margin(4%) + 方塊(28%) + margin(4%) + 方塊(28%) + margin(4%) + 方塊(28%) + margin(4%) = 100%
[x] 方案二：Flex布局2
步驟：
方案一用了flex，但是那種用flex:1之前還要把div分三行再均等分，還要額外做margin處理，煩透. 學(xué)習(xí)阮一峰-Flex語法篇后，嘗試div.wrap使用默認(rèn)橫排flex & flex換行 & justify-content:space-around, div.block設(shè)定百分比寬度，輕松實(shí)現(xiàn)目標(biāo)效果：
[x] Chrome自適應(yīng)效果調(diào)試
[x] 裝Node.js開http-server開端口給手機(jī)看
2. 完成任務(wù)之后
[x] A. 驗收標(biāo)準(zhǔn)
[x] 還原設(shè)計圖
[x] 圓角：10%
[x] 顏色：換windows取色,#FFA600
[x] 設(shè)計圖：基本一致
[x] 自適應(yīng)：寬度無滾動條，格子隨窗體變化
[x] 移動端：Chrome響應(yīng)式測試和真機(jī)均通過
[x] 編碼規(guī)范
[x] UTF-8: 的charset默認(rèn)UTF-8
[x] 標(biāo)簽小寫 & 閉合
[x] 元素屬性值已用雙引號包含
[x] css外聯(lián)引用
[x] css不用id控制樣式
[x] 用div實(shí)現(xiàn)布局
[x] B.深度思考
Doctype作用： 聲明解析器
盒模型理解：用東西放在盒子中來類比元素在網(wǎng)頁中的顯示效果。
content: 物品，存儲于海綿(padding)的包裹中，并由箱子(border)包裝;
padding: 類比用來包裹貴重物品的海綿，最靠近物品(content)，在箱子(border)里面;
border: 箱子。箱子大小厚度可調(diào)整，箱子會被物品(content)及其海綿(padding)撐大;
margin: 箱子要求與其他東西保持的距離，處于最外層;
display:
inline:
行內(nèi)元素，文本元素一般都是，兩個inline元素連續(xù)寫，其顯示效果不換行;
修改width & height無效， 可以通過修改line-height來改變高度，內(nèi)容撐開寬度;
代碼換行被解析為空格
不支持樣式：width&height、text-align、background-position、clear
block:
塊狀元素，div是其代表。一個塊狀元素會新開始一行并盡可能撐滿容器;
可通過修改width & height 來修改寬高;
不支持樣式：
vertical-align
inline-block：
行內(nèi)塊元素，兼具block和inline特性,可通過修改width&height來修改寬高,且不獨(dú)占一行;
代碼換行被解析為空格
none: 在不刪除元素的情況下show|hide元素;
使用瀏覽器的F12調(diào)試界面方法 【調(diào)試】chrome谷歌瀏覽器-DevTool開發(fā)者工具-詳細(xì)總結(jié)
Element：查看界面元素，可查看元素的對應(yīng)css樣式、計算后樣式、事件監(jiān)聽器、屬性.
Console: 控制臺。用于顯示日志信息及輸入一些命令.
Network：請求監(jiān)聽。可獲得請求列表，點(diǎn)開某一項將看到Headers、Preview、Response、Timing數(shù)據(jù).
Headers: 頭部數(shù)據(jù)。包含General、Response Heaeder、Request Headers
General：本次請求的URL、請求方法、狀態(tài)碼、請求服務(wù)器的地址、其他一些設(shè)置.
Response Headers: 響應(yīng)頭部.
Request Headers: 包含用戶代理User-Agent，幫服務(wù)器識別設(shè)備用.
Preview： 預(yù)覽。如果是圖片html將直接顯示界面，如果是數(shù)據(jù)則以其格式優(yōu)化后展示，如果是代碼則直接展示.
Response: 響應(yīng)結(jié)果原始數(shù)據(jù).
Cookies(有些有)：請求用到的cookies.
Timing: 請求時間使用情況.
Sources: 看代碼 & 開斷點(diǎn).
Performance: 網(wǎng)頁加載時記錄情況, 幀數(shù)、CPU資源，據(jù)此可提出性能優(yōu)化點(diǎn);
Memory: 分析開銷大的js函數(shù)
Application: 應(yīng)用資源面板。存儲LocalStroage、Session、Cookies等.
Security: 網(wǎng)頁安全情況.
九宮格布局其他方法實(shí)現(xiàn)及其優(yōu)劣
九宮格布局 在 CSS 中，用 float 和 position 的區(qū)別是什么？
float:
優(yōu)點(diǎn)：瀏覽器兼容性好
缺點(diǎn)：不是一種真正的布局方式。比較trick, 問題也比較多(移動端)
當(dāng)前使用的flex布局：
優(yōu)點(diǎn)：flex是真正的布局方式。移動設(shè)備友好，微信小程序也用flex做布局
缺點(diǎn)：瀏覽器兼容性(支持IE10+)
block正方形化 移動端布局，div按比例布局，寬度為百分比，但又想讓高度和寬度一樣，即讓div為正方形，怎么做布局呢？
vw & vh: 移動設(shè)備兼容性存在問題
當(dāng)前使用的padding-top：簡單，兼容性好
IDE意思 & 與文本編輯器的對比（后者被前者集成）
IDE(Integrated Development Environment)即集成開發(fā)環(huán)境，提供程序開發(fā)環(huán)境，一般集成了代碼編輯器、編譯器、調(diào)試器以及圖形化用戶界面。具有豐富的工具和流暢的開發(fā)體驗。
文本編輯器：單純進(jìn)行編輯用的應(yīng)用。代碼型的一般具有插件擴(kuò)展功能。
加不加的viewport的區(qū)別 Responsive Web Design - The Viewport
加的viewport:
width=device-width 將會一直幫你根據(jù)屏幕寬度設(shè)置界面寬度
initial-scale=1.0 將會在瀏覽器首次加載頁面的時候幫你設(shè)置好頁面縮放比例
不加：
無論什么設(shè)備顯示效果都是一樣的，移動設(shè)備上的頁面可能會被等比例縮小到看不清
四. 上線購買服務(wù)器，選用CentOS7
學(xué)習(xí)安裝Nginx
將工程放到/usr/share/nginx/html目錄下
五. 效果Github: cssup
線上展示： Task1-9blocks
Readme.md下載: Readme
六. 系列文章【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-護(hù)工個人界面
【CSS練習(xí)】IT修真院--練習(xí)6-護(hù)工列表界面
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113412.html
摘要：任務(wù)三一個最簡單的移動端頁面今天完成的事情運(yùn)用布局知識跟隨設(shè)計圖進(jìn)行布局，完成簡單并繼續(xù)學(xué)習(xí)優(yōu)化讓布局更好適應(yīng)屏幕變化使用了盒模型及百分比了解區(qū)別在中應(yīng)用圖片處理學(xué)習(xí)明天計劃的事情深度思考手機(jī)分辨率和網(wǎng)頁的區(qū)別周末補(bǔ)學(xué)任務(wù)四計劃及簡單編寫遇 任務(wù)三、 一個最簡單的移動端頁面 今天完成的事情 運(yùn)用布局知識跟隨設(shè)計圖進(jìn)行布局，完成簡單Demo并繼續(xù)學(xué)習(xí)優(yōu)化. 讓布局更好適應(yīng)屏幕變化(使用...
摘要：任務(wù)六護(hù)工列表頁完成的事情規(guī)劃任務(wù)六完成基本界面編寫計劃的事情限制最小寬度使用雪碧圖替換當(dāng)前的多張圖片引入完成模擬下拉框編寫屏幕過窄時，列表項左邊文字被截斷出現(xiàn)省略號復(fù)習(xí)之前的代碼規(guī)范，優(yōu)化代碼查看驗收標(biāo)準(zhǔn)查看深度思考遇到的問題收獲頁面原生 任務(wù)六、 護(hù)工列表頁 完成的事情 1.規(guī)劃任務(wù)六2.完成基本界面編寫 計劃的事情 [x] 限制最小寬度 [x] 使用雪碧圖替換當(dāng)前的多張圖片引入...
摘要：任務(wù)二認(rèn)識開發(fā)工具今天完成的事情編輯器對比版本管理工具學(xué)習(xí)基本操作代碼托管平臺對比服務(wù)器使用學(xué)習(xí)明天計劃的事情分析任務(wù)三完成規(guī)劃及部分開發(fā)遇到的問題暫無收獲編輯器對比參考三者比較，各有哪些優(yōu)勢和弱勢一款成熟的，對網(wǎng)站開發(fā)者友好，插件齊全功能 任務(wù)二. 認(rèn)識開發(fā)工具 今天完成的事情 IDE & 編輯器對比 版本管理工具學(xué)習(xí) Git基本操作 代碼托管平臺對比 服務(wù)器使用學(xué)習(xí) 明天計劃的...
摘要：任務(wù)四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優(yōu)化完成驗收要求擴(kuò)展性頂欄固定進(jìn)行樣式兼容性研究完成任務(wù)四深度思考跟隨深度思考師兄建議進(jìn)行修改輸入欄左側(cè)換用輸入限制電話位，密碼位根據(jù)結(jié)構(gòu)的語義化修改嘗試下再加一 任務(wù)四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優(yōu)化 完成驗收要求：header擴(kuò)展性 & 頂欄固定 進(jìn)行p...
摘要：任務(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通配符 &...
閱讀 3540·2023-04-25 20:09
閱讀 3743·2022-06-28 19:00
閱讀 3064·2022-06-28 19:00
閱讀 3087·2022-06-28 19:00
閱讀 3178·2022-06-28 19:00
閱讀 2883·2022-06-28 19:00
閱讀 3051·2022-06-28 19:00
閱讀 2641·2022-06-28 19:00
