[FE101] 實戰演練

#web-design #QA

Posted by s103071049 on 2021-06-16

目標切版畫面：

步驟一、依據視覺上的排列進行分塊

給 classname 可以方便從 html 結構看出長相。對標籤下 css 盡量避免，因為改一個標籤，其他標籤都會被改到，除非是要統一調 style。

<body>
  <div class="post">
    <div class="post__header">

    </div>
    <div class="post__option">

    </div>
    <div class="post__content">

    </div>
    <div class="post__preview">

    </div>
  </div>
</body>

步驟二、分塊切板

preview 這塊沒有 padding，所以不能直接對整個 post 加 padding。
所以對於要 padding 的地方再加一層。

<body>
  <div class="post">
    <div class="post__top">
      <div class="post__header">
      <div class="post__avatar"></div>
      <div class="post__info">
        <div class="post__author">Lidemy 鋰學院</div>
        <div class="post__timestamp">9月18日下午9:06</div>
      </div>
      </div>
      <div class="post__option">
      ...
      </div>
      <div class="post__content">
      最近除了忙計畫第二期以外也在忙這個
      兩年過後，一個新的開始
      這篇稍微講一下下架的理由以及 Lidemy 的下一步
      裡面有一些課程的 coupon ，數量有限用完為止
      不用留言 +1 就可以獲得 coupon ，多省事
      </div>
    </div>

    <div class="post__preview">
      <div class="post__thumbnail"></div>
      <div class="post__previe-info">
        <div class="post__preview-domain">
          MEDIUM.COM
        </div>
        <div class="post__preview-title">
          把 Hahow 的課程下架之後，我的下一步是甚麼? - Huki - Medium
        </div>
      </div>
    </div>
  </div>
</body>

.post {
  width: 300px; /*高度讓他自動被撐開*/
  border: 1px solid gray;
}

.post__top {
  padding: 10px;
}

切下半部

.post__thumbnail {
  height: 150px;
  background-color: orange;
} 

.post__previe-info {
  background-color: #bbb;
  padding: 10px;
}

.post__preview-domain {
  font-size: 12px; /*chrome 字體大小小於 12 px 會沒有反應 */
}

.post__preview-title {
  font-weight: bold;
}

將 ... 用絕對定位定位，定在右上角

.post__option {
  position: absolute;
  right: 5px;
  top: 5px;
}

.post__top {
  padding: 10px;
  position: relative;
}

調整內容
white-space 預設空白跟換行都是一個空白。pre 會呈現 html 裡面的樣子，no-wrap 不換行，

.post__content {
  white-space: pre-line;
  word-break: break-word;
}

切頭貼，讓他暫時變成圓形

.post__avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: red;
}

將 post header 變成左右排列

.post__header {
  display: flex;
  align-items: center;
}

用偽元素做地球 icon

.post__timestamp::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  margin-left: 5px;
}

微調畫面後，代碼長相

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test.css">
</head>
<body>
  <div class="post">
    <div class="post__top">
      <div class="post__header">
      <div class="post__avatar"></div>
      <div class="post__info">
        <div class="post__author">Lidemy 鋰學院</div>
        <div class="post__timestamp">9月18日下午9:06</div>
      </div>
      </div>
      <div class="post__option">
      ...
      </div>
      <div class="post__content">最近除了忙計畫第二期以外也在忙這個
      兩年過後，一個新的開始
      這篇稍微講一下下架的理由以及 Lidemy 的下一步
      裡面有一些課程的 coupon ，數量有限用完為止
      不用留言 +1 就可以獲得 coupon ，多省事
      </div>
    </div>

    <div class="post__preview">
      <div class="post__thumbnail"></div>
      <div class="post__previe-info">
        <div class="post__preview-domain">
          MEDIUM.COM
        </div>
        <div class="post__preview-title">
          把 Hahow 的課程下架之後，我的下一步是甚麼? - Huki - Medium
        </div>
      </div>
    </div>
  </div>
</body>
</html>

.post {
  width: 400px; /*高度讓他自動被撐開*/
  border: 1px solid gray;
}

.post__top {
  padding: 10px;
  position: relative;
}

.post__thumbnail {
  height: 150px;
  background-color: orange;
} 

.post__previe-info {
  background-color: #bbb;
  padding: 10px;
}

.post__preview-domain {
  font-size: 12px; /*chrome 字體大小小於 12 px 會沒有反應 */
}

.post__preview-title {
  font-weight: bold;
}

.post__option {
  position: absolute;
  right: 5px;
  top: 5px;
}

.post__content {
  white-space: pre-line;
  word-break: break-word;
  margin-top: 10px;
}

.post__avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 10px;
}

.post__header {
  display: flex;
  align-items: center;
}

.post__timestamp::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: blue;
  display: inline-block;
  margin-left: 5px;
}

QA 時間

Float vs FlexBox vs Grid

  1. Float : 現在較少人使用，但若需要支援 ie 11 以下，較舊的瀏覽器，就需要他。很多用在文繞圖。
  2. FlexBox : 支援 ie 11 含以上。補充說明：align-items 只用在 FLEXbox 上，vertical-align 是應用在 inline 元素、table。
  3. Grid : 與 FlexBox 可以一起用，只是用在不同的地方、有不同的應用場景。

PS 這三個不是互斥，可以一起用

為甚麼要把東西包起來 ?

包起來才能一起進行設定。如果不包，就要對個別的元素進行個別的設定，會很亂、很複雜。

CSS 很亂一直重複 ?

  1. CSS class 名稱沒取好

reset.css vs normalize.css

reset.css 會針對所有標籤下 css => 將瀏覽器加上的預設樣式全部清空，可以保證你在所有瀏覽器上看到的都是最乾淨的樣子。目的是為了跨瀏覽器的支援。

normalize.css 希望有朝一日取代 reset.css，與其將瀏覽器樣式清空，不如試著遵循瀏覽器的樣式，讓他盡可能看起來一致。會依據每個平台不同，而有不同的表現，不會硬把瀏覽器的樣式給清掉。

參照閱讀：金魚系列，淺談 css reset

怎麼知道查資料，有無過時

前端更新很快，但很多基礎是不會過時。資訊過時仍有用，只是東西比較舊。除非真的超級無敵舊，但基本上也不會找到相關的資料。所以找到排名前面的資源，都是 ok 的。也可以多找幾篇看。

有辦法找到網頁檔案，最終更新日期嗎 ?

沒辦法，可以試著但不一定準。dev-tool => header => last-modified
可能檔案沒有更新，但仍 update 這個時間。<recall touch 指令>


#web-design #QA

s103071049




Related Posts

[Day04] Currying, Pointfree, Higher Order Function

[Day04] Currying, Pointfree, Higher Order Function

 林子暘
[ 筆記 ] 資訊安全 -SQL Injection、XSS

[ 筆記 ] 資訊安全 -SQL Injection、XSS

 krebikshaw
[ 紀錄 ] 實戰練習 - 部落格 (以 Express 實作前端 + 後端)

[ 紀錄 ] 實戰練習 - 部落格 (以 Express 實作前端 + 後端)

 krebikshaw

Comments