成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

Sleepy / 3511人閱讀

摘要：任務(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)前的多張圖片引入

[x] 完成模擬下拉框編寫(xiě)

[x] 屏幕過(guò)窄時(shí)，列表項(xiàng)左邊文字被截?cái)喑霈F(xiàn)省略號(hào)

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

[x] 查看驗(yàn)收標(biāo)準(zhǔn)

[x] 查看深度思考

遇到的問(wèn)題 收獲 1.頁(yè)面原生CSS分塊

header

設(shè)計(jì)：

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

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

.conditionbar: 暫定fixed, 定高

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

下拉內(nèi)容簡(jiǎn)單字符填寫(xiě)

實(shí)現(xiàn)：

.topic: topbar-switch需要將里面的a標(biāo)簽設(shè)置inline-block來(lái)?yè)胃弑尘?，并用active做激活樣式.

main

設(shè)計(jì)：

section.service-list

div.service-item

p.item-label: img+span，無(wú)特效.

item-data：flex(justify-content: space-between), datedata & pricedata(red span+icon)

實(shí)現(xiàn)：

基本與設(shè)計(jì)相同

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

設(shè)計(jì)：

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

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

實(shí)現(xiàn)：

中間的按鈕圖片：一開(kāi)始設(shè)line-height&vertical-align：middle, 以為居中了但效果靠下, 想起張?chǎng)涡翊笊竦膙ertical-algn&line-height好基友, 把div.bottombar-middlebtn的font-size改為0, 將文本中線和絕對(duì)中線重合，完成垂直居中.

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

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

最簡(jiǎn)單：定width,設(shè)置white-space + text-overflow + overflow

2.深度思考

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

移除空格： 元素標(biāo)簽中間的空格去掉(缺點(diǎn)：html變丑)

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

讓閉合標(biāo)簽吃膠囊：去掉前幾個(gè)元素的結(jié)束標(biāo)簽，只留下最后一個(gè)結(jié)束標(biāo)簽(簡(jiǎn)單實(shí)用)

font-size:0: 已廢棄，由于Chrome最小字體支持有限制。

letter-spacing: 縮小inline-block元素父級(jí)元素的字符間距

word-spacing: 縮小inline-block元素父級(jí)元素的單詞間距

yui3:

.yui3-g { /* 設(shè)置父級(jí)元素的字符間距，保證瀏覽器兼容性 */
    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 {  /* 設(shè)置父級(jí)元素的字符間距，保證瀏覽器兼容性 */
    width:100%;
    display:table;  /* 調(diào)教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}

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

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

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

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

內(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練習(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://m.hztianpu.com/yun/116726.html

相關(guān)文章

  • 【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

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

    摘要：任務(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)屏幕變化(使用...

    MrZONT 評(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)頭部包含用戶代理，幫服務(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è)換用輸入限制電話位，密碼位根據(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

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

0條評(píng)論

閱讀需要支付1元查看
<