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 是決定如何斷行單字              word-wrap 斷行後，文字仍超過容器寬度時決定如何處理 ，避免單字太長把版面撐破             word-break：normal/break-all/keep-all                                        正常                     全斷                         標點符號斷行                                                                                                   英文不能用                英文沒差、CJK             Word-wrap：normal/break-word/initial/inherit                                                         切斷詞並換行                       word-break:keep-all後可以使用word-wrap:break-word來將文字包在容器中                     @font-face(設定字型)          根據每個瀏覽器的支援程度

 安裝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 不佔寬度。                ○  border 可以僅設定某一邊，outline 不行。                ○  border 距離靠 padding調整，outline 則是 outline-offset                ○  outline 可以拿來看別人如何切版（小技巧） Shadow：                有box shadow跟text shadow兩種                   box-shadow: 10px 10px 10px #000;                ○  第一個 值為水平(x軸)偏移                ○  第二個 值為垂直(y軸)偏移                 ○  第三個 值

 數位時代範例練習：            通常首頁:                               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 / screen / speech                Expressions部分常用： min-width / max-width *當畫面小於480px，變色。 CSS 優先順序 套用 – 標籤內套用 > 內部載入 > 外部載入 選取器優先序 – id > class > 標籤元素 撰寫順序 – 後面 > 前面 Reset.css： 清除所有瀏覽器預設的樣式。 宣告寫在HTML的head內。 練習： 滾動式網頁               - 用上述的reset.css將瀏覽器預設全部清除               -掛載下列的js scrollpage的架構