資訊專欄INFORMATION COLUMN
摘要：任務六護工列表頁完成的事情規劃任務六完成基本界面編寫計劃的事情限制最小寬度使用雪碧圖替換當前的多張圖片引入完成模擬下拉框編寫屏幕過窄時，列表項左邊文字被截斷出現省略號復習之前的代碼規范，優化代碼查看驗收標準查看深度思考遇到的問題收獲頁面原生
任務六、 護工列表頁 完成的事情
1.規劃任務六
2.完成基本界面編寫
[x] 限制最小寬度
[x] 使用雪碧圖替換當前的多張圖片引入
[x] 完成模擬下拉框編寫
[x] 屏幕過窄時，列表項左邊文字被截斷出現省略號
[x] 復習之前的代碼規范，優化代碼
[x] 查看驗收標準
[x] 查看深度思考
遇到的問題 收獲 1.頁面原生CSS分塊
header
設計：
.topbar: fixed, 定高.可部分套用task3的topbar
tab*2(找雇主、找護工)位置center，location logo右絕對
.conditionbar: 暫定fixed, 定高
select*3故可定width百分比并使用flex， 小豎杠用border-left&first-child
下拉內容簡單字符填寫
實現：
.topic: topbar-switch需要將里面的a標簽設置inline-block來撐高背景，并用active做激活樣式.
main
設計：
section.service-list
div.service-item
p.item-label: img+span，無特效.
item-data：flex(justify-content: space-between), datedata & pricedata(red span+icon)
實現：
基本與設計相同
div.bottombar: fixed, 定高. 可部分套用task3的topbar
設計：
a*3,用flex主軸居中+交叉軸居中
中間div.bottombar-middlebtn用background畫圓，div.bottombar-middlebtn里面用img填圖片，使其垂直水平居中
實現：
中間的按鈕圖片：一開始設line-height&vertical-align：middle, 以為居中了但效果靠下, 想起張鑫旭大神的vertical-algn&line-height好基友, 把div.bottombar-middlebtn的font-size改為0, 將文本中線和絕對中線重合，完成垂直居中.
CSS實現下拉菜單：設置好item-title的line-height, 新建ul>li, 使其display:none & absolute, 當hover時display:block，搞定.
省略號：關于文字內容溢出用點點點(…)省略號表示
最簡單：定width,設置white-space + text-overflow + overflow
2.深度思考
1).去除inline-block間距有哪幾種方法？ 參考：去除inline-block元素間間距的N種方法
移除空格： 元素標簽中間的空格去掉(缺點：html變丑)
使用margin負值：通過設置復制去間隙(缺點：手段hack & 環境不確定，故不通用)
讓閉合標簽吃膠囊：去掉前幾個元素的結束標簽，只留下最后一個結束標簽(簡單實用)
font-size:0: 已廢棄，由于Chrome最小字體支持有限制。
letter-spacing: 縮小inline-block元素父級元素的字符間距
word-spacing: 縮小inline-block元素父級元素的單詞間距
yui3:
.yui3-g { /* 設置父級元素的字符間距，保證瀏覽器兼容性 */
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* IE < 8 重置 */
word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: 偽造 inline-block */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
RayM提供的：
li {
display:inline-block;
background: orange;
padding:10px;
word-spacing:0;
}
ul { /* 設置父級元素的字符間距，保證瀏覽器兼容性 */
width:100%;
display:table; /* 調教webkit*/
word-spacing:-1em;
}
.nav li { *display:inline;}
2).css有哪些屬性可以繼承？ 參考：CSS中可繼承的屬性有哪些
Tip1：每個CSS屬性定義的概述都有指明屬性是默認繼承的還是不繼承的（"Inherited: Yes|no"）
Tip2: 可以繼承的屬性一般是顏色、文字、字體間距、行高、對齊方式 & 列表樣式
所有元素可繼承：visibility(隱藏父元素，其下所有隱藏) & cursor（button及其字體鼠標樣式相同）
內聯元素可繼承：
顏色：color
文字：font、font-family、font-size、font-style、font-variant、font-weight
字體間距：letter-spacing、word-spacing、white-space
行高：line-height
樣式：text-decoration、text-transform、direction
塊狀元素可繼承：text-indent & text-align
列表元素可繼承: list-style、list-style-type、list-style-position、list-style-image
效果Github
線上展示
系列文章【CSS練習】IT修真院--練習1-九宮格
【CSS練習】IT修真院--練習2-開發工具
【CSS練習】IT修真院--練習3-簡單界面
【CSS練習】IT修真院--練習4-移動端界面
【CSS練習】IT修真院--練習5-護工個人界面
【CSS練習】IT修真院--練習6-護工列表界面
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116726.html
摘要：任務五一個最常見的移動端頁面完成的事情學習張鑫旭世界相關章節張鑫旭系列了解通配符選擇器性能優化瀏覽器渲染原理學習各屬性及效果完成任務五學習編碼規范編碼規范并按照編碼規范優化代碼完成深度思考計劃的事情找時間把前面任務的官方提供鏈接過一遍，查缺 任務五、 一個最常見的移動端頁面 完成的事情 float學習 張鑫旭《CSS世界》相關章節 張鑫旭 float系列 了解CSS通配符 &...
摘要：任務三一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單并繼續學習優化讓布局更好適應屏幕變化使用了盒模型及百分比了解區別在中應用圖片處理學習明天計劃的事情深度思考手機分辨率和網頁的區別周末補學任務四計劃及簡單編寫遇 任務三、 一個最簡單的移動端頁面 今天完成的事情 運用布局知識跟隨設計圖進行布局，完成簡單Demo并繼續學習優化. 讓布局更好適應屏幕變化(使用...
摘要：任務二認識開發工具今天完成的事情編輯器對比版本管理工具學習基本操作代碼托管平臺對比服務器使用學習明天計劃的事情分析任務三完成規劃及部分開發遇到的問題暫無收獲編輯器對比參考三者比較，各有哪些優勢和弱勢一款成熟的，對網站開發者友好，插件齊全功能 任務二. 認識開發工具 今天完成的事情 IDE & 編輯器對比 版本管理工具學習 Git基本操作 代碼托管平臺對比 服務器使用學習 明天計劃的...
摘要：用于顯示日志信息及輸入一些命令請求監聽。可獲得請求列表，點開某一項將看到數據頭部數據。包含本次請求的請求方法狀態碼請求服務器的地址其他一些設置響應頭部包含用戶代理，幫服務器識別設備用預覽。 九宮格——用html+css制作一個網頁 一. 目標效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圓角...
摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
閱讀 4083·2023-04-26 01:48
閱讀 3258·2021-10-13 09:40
閱讀 1739·2021-09-26 09:55
閱讀 3613·2021-08-12 13:23
閱讀 1780·2021-07-25 21:37
閱讀 3432·2019-08-30 15:53
閱讀 1393·2019-08-29 14:16
閱讀 1397·2019-08-29 12:59
