UI/UX學習歷程記錄

 text-overflow              單行顯示：                  純 css 超過容器寬度後自動變 ...                Text-overflow : ellipsis;                 一定要搭配(溫開水)               ->overflow:hidden+white-space:nowrap                              多行顯示：                display: -webkit- box;                 -webkit- line-clamp: 4;               -webkit- box-orient: vertical;                文字斷行方式                word-break 是決定如何斷行單字          ...

 安裝vscode CSS(30hrs)+bootstrap4(18hrs) CSS語法： 顏色(Color)               常見預設:green、red。               16進位：0-F               rgba(0,0,0,0)\               HSLA(H:色相 S:飽和度 L:亮度 A:透明度)               CMYK(illustrator) 邊界(Border)：               border-radius(圓角) 順序：左上、右上、右下、左下 缺的值會拿對面的來補 實際範例 border-image(邊框圖片)： ○  border-image: url(border-image.png) 20 round;  ○  數字代表在圖片 何處 切割，可以用數字或百分比  ○  文字代表重複方式，可用 repeat, round 及 stretch space ○  repeat 為重複, round 為圖形重複, stretch 為圖形延展 ○ repeat 與 round 的區別：round 除了能平鋪外還能通過伸縮使背景完整顯示。 ○ round 與 space 的區別：雖然都使背景完整顯示，但是 space 在小方塊之間有一定的空隙。 Outline： Outline跟border的差別                ○  border 會佔寬度(排版時須注意計算)， outline 不佔寬度。      ...

 數位時代範例練習：            通常首頁:                               herosection(形象檔)：用來作為silder輪播、或是整頁的首圖            <header>的基礎架構   nav>.brand+(ul>li*4) body的CSS宣告： header的CSS宣告： <section>中的herosection <section>中的ticket <section>中的<agenda>的架構           <section>中的speaker_intro的架構 <section>中的map的架構

 Overflow(溢位)：                屬性指定在元素的內容太大而無法放入指定區域時是剪輯內容還是添加滾動條。 visible：默認。溢出不會被裁剪。內容在元素框外渲染 hidden ：溢出被裁剪，其餘內容將不可見 scroll ：剪輯了溢出，並添加了滾動條以查看其餘內容 auto：與相似scroll，但僅在必要時添加滾動條 下面為實際展示：               visible                                        hidden                                        scroll                                              auto Media Quaries:               CSS3的Media， 它們不查找設備類型，而是關注設備的功能。                CSS3 Media Types：all / print / scree...