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

資訊專欄INFORMATION COLUMN

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

Sleepy / 3443人閱讀

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

任務六、 護工列表頁 完成的事情

1.規(guī)劃任務六
2.完成基本界面編寫

計劃的事情

[x] 限制最小寬度

[x] 使用雪碧圖替換當前的多張圖片引入

[x] 完成模擬下拉框編寫

[x] 屏幕過窄時，列表項左邊文字被截斷出現(xiàn)省略號

[x] 復習之前的代碼規(guī)范，優(yōu)化代碼

[x] 查看驗收標準

[x] 查看深度思考

遇到的問題 收獲 1.頁面原生CSS分塊

header

設計：

.topbar: fixed, 定高.可部分套用task3的topbar

tab*2(找雇主、找護工)位置center，location logo右絕對

.conditionbar: 暫定fixed, 定高

select*3故可定width百分比并使用flex， 小豎杠用border-left&first-child

下拉內(nèi)容簡單字符填寫

實現(xiàn)：

.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)

實現(xiàn)：

基本與設計相同

div.bottombar: fixed, 定高. 可部分套用task3的topbar

設計：

a*3,用flex主軸居中+交叉軸居中

中間div.bottombar-middlebtn用background畫圓，div.bottombar-middlebtn里面用img填圖片，使其垂直水平居中

實現(xiàn)：

中間的按鈕圖片：一開始設line-height&vertical-align：middle, 以為居中了但效果靠下, 想起張鑫旭大神的vertical-algn&line-height好基友, 把div.bottombar-middlebtn的font-size改為0, 將文本中線和絕對中線重合，完成垂直居中.

CSS實現(xiàn)下拉菜單：設置好item-title的line-height, 新建ul>li, 使其display:none & absolute, 當hover時display:block，搞定.

省略號：關(guān)于文字內(nèi)容溢出用點點點(…)省略號表示

最簡單：定width,設置white-space + text-overflow + overflow

2.深度思考

1).去除inline-block間距有哪幾種方法？ 參考：去除inline-block元素間間距的N種方法

移除空格： 元素標簽中間的空格去掉(缺點：html變丑)

使用margin負值：通過設置復制去間隙(缺點：手段hack & 環(huán)境不確定，故不通用)

讓閉合標簽吃膠囊：去掉前幾個元素的結(jié)束標簽，只留下最后一個結(jié)束標簽(簡單實用)

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;  /* 調(diào)教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

2).css有哪些屬性可以繼承？ 參考：CSS中可繼承的屬性有哪些

Tip1：每個CSS屬性定義的概述都有指明屬性是默認繼承的還是不繼承的（"Inherited: Yes|no"）

Tip2: 可以繼承的屬性一般是顏色、文字、字體間距、行高、對齊方式 & 列表樣式

所有元素可繼承：visibility(隱藏父元素，其下所有隱藏) & cursor（button及其字體鼠標樣式相同）

內(nèi)聯(lián)元素可繼承：

顏色：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-開發(fā)工具

【CSS練習】IT修真院--練習3-簡單界面

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

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

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

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

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

相關(guān)文章

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

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

    Jonathan Shieber 評論0 收藏0

  • 【CSS練習】IT修真院--練習3-簡單界面

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

    MrZONT 評論0 收藏0

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

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

    _ang 評論0 收藏0

  • 【CSS練習】IT修真院--練習1-九宮格

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

    Tecode 評論0 收藏0

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

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

    kun_jian 評論0 收藏0

發(fā)表評論

0條評論

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