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

任務6、 護工列表頁

完成的事情

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-護工列表界面