切版、助教課

#position #flex #absolute #Web #RWD

Posted by s103071049 on 2021-06-16

一、Position 實戰篇

製作固定在彈窗正中間的小廣告，廣告右上角是關閉鈕

<!DOCTYPE html>
<html>
<head>
    <meta charset='urf-8'> 
    <title>css助教課程</title>
    <link rel='stylesheet' href='test.css'/>

</head>
<body class='debug'>
  <div class='message'>
    <div class='close'></div>
    <h1>注意</h1>
    <p>恭喜你是第 1000 個造訪者!</p>
  </div>
</body>
</html>

.debug *, .debug {
  outline: 1px solid gold;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 12px;
}

html, body, h1, h2, h3, h4, p {
  padding: 0;
  margin: 0;
}

/*彈窗內的文字置中對齊、間隔 10px*/
h1, p {
  text-align: center;
  margin: 10px;
  position: relative;
}
/*彈窗外觀*/
.message {
  width: 300px;
  box-shadow: 0 2px 20px 0 rgba(100,1000,100,0.1);
  padding: 20px 30px;
  border-radius: 10px;
  position: fixed; /*因為是彈窗，會希望他死忠固定 viewport*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);/*transform 可以抓到元素自身的寬高*/

}
/*彈窗內的關閉鈕*/
.message div {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  right: 10px;
}

/*偽元素是由 css 產生，與 html 不同，後續要做 js 動畫效果是抓不到這個元素
  利用偽元素製造叉叉記號
*/
.message div:after, .message div:before {
  content: '';
  position: absolute;
  height: 1px;
  top: 50%;
  left: 50%;
  width: 80%;
  background: black;
}

.message div:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.message div:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

二、Display 實戰篇

前言：Display 決定元素與元素之間的關係、元素內部元素怎麼排列
製作簡單小卡，上面是圖片、下面是文字資訊。
重點摘要：display 三種用法、background-img 怎麼裝圖片、基礎 rem 以字體為基礎的單位。

<!DOCTYPE html>
<html>
<head>
    <meta charset='urf-8'> 
    <title>css助教課程</title>
    <link rel='stylesheet' href='test.css'/>

</head>
<body>
  <main class='debug'>
    <div class='video star'>
      <div class='video_thumbnails'></div>
      <div class="video__info">
        <h1 class='video__title'>
          <div class='video__mark'></div>
        Title
        </h1>
        <h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
      </div>
    </div>

  </main>
</body>
</html>

/*加上一些 css setting*/
.debug *, .debug {
  outline: 1px solid gold;
}

html {
  font-size: 12px;
}

html, body {
  width: 100%;
  height: 100%;
}

html, body, h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

/*幫卡片做基礎樣式*/
.video {
  width: 200px;
  height: 180px;
  margin: 20px;
  padding-bottom: 10px;
  box-shadow: 0 2px 20px 0 rgba(100,100,100,0.1);
  border-radius: 10px;
}
/*放入圖片，將圖片放到元素內的 background-image 讓圖片與元素 css 樣式一致*/
.video_thumbnails {
  height: 70%;
  background-image: url('https://picsum.photos/1200/300?random=2');
  background-size: cover;
  border-radius: 10px;
  overflow: hidden; /*讓內層超出去的元素不會被顯示出來*/
}
/*內層文字內縮*/
.video__info {
  padding: 10px;
}
/*設定文字大小*/
.video__title {
  font-size: 1.6rem;
}
  /*em 是用母元素的基礎字體大小作為倍數單位，
  但每個母元素都有自己的字體大小會很難管理，所以有了 rem: 以根元素的基礎字體大小作為倍數的單位*/

.video__date {
  font-size: 1.2rem;
}

.video__time {
  font-size: 1rem;
  color: gray;
}

.video__mark {
  vertical-align: baseline;
  margin-right: 10px;
  background: red;
  border-radius: 50%;
  display: inline-block; /* inline不能被設定寬高，要裡面有裝東西才會被呈現*/
  width: 1rem;
  height: 1rem;
}

三、Flex 實戰篇

將套用 flex 的元素區分為 flex container、flex item，這是因為某些 flex 屬性對套用在 flex-container 裡面的元素才會有作用，另外有些屬性只會影響單一 item。

學習重點：flex container 如何做到對齊、flex item 如何利用 flex-grow, flex-shrink 進行縮放

目前代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset='urf-8'> 
    <title>css助教課程</title>
    <link rel='stylesheet' href='test.css'/>

</head>
<body>
  <main class='debug'>
    <section class='video__container'>
      <div class='video star'>
      <div class='video_thumbnails'></div>
      <div class="video__info">
        <h1 class='video__title'>
          <div class='video__mark'></div>
        Title
        </h1>
        <h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
      </div>
      </div>

      <div class='video star'>
      <div class='video_thumbnails'></div>
      <div class="video__info">
        <h1 class='video__title'>
          <div class='video__mark'></div>
        Title
        </h1>
        <h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
      </div>
      </div>

      <div class='video star'>
      <div class='video_thumbnails'></div>
      <div class="video__info">
        <h1 class='video__title'>
          <div class='video__mark'></div>
        Title
        </h1>
        <h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
      </div>
      </div>
    </section>
  </main>
</body>
</html>

flex-container 上作用的屬性：

會影響全部的 item
例如：flex-direction, justify-content, align-items, flex-wrap

display:flex 預設狀況

  1. flex-direction : column 由左到右排列
  2. justify-content : flex-start 靠左對齊
  3. align-items : flex-start 靠上對齊
.video__container {
  display: flex;
}

垂直水平置中排列(特地給高，以方便看出垂直置中效果)

.video__container {
  display: flex;
  align-items: center; /* flex-start, flex-end*/
  justify-content: center; /* space-around, space-between*/
  height: 600px;
}

不同 flex-direction 狀況，align-items, justify-content 對齊狀態會不太一樣。

flex-item 上作用的屬性：

order 決定 flex-item 如何排列的順序
flex-grow：當 container 有多餘空間該怎麼分配剩下空間
flex-shrink：當 container 空間不足該怎麼相對剝奪裡面各項 item 的寬度

利用 flex-grow, flex-shrink 可以設置出豐富的 rwd 效果，沒有特別設定下，flex-grow = 0、flex-shrink = 1 (被等比的奪走寬度、不會被放大)

現在，回到代碼。

.video__container {
  display: flex;
  align-items: center;
  justify-content: center;
}

縮放過程：會先壓縮物體的多餘空間，接著就超出 flex-container

加上 flex-wrap 可以讓操作空間折行。

.video__containe
 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

物體放大縮小，設定佔的空間

.video:first-child {
  flex-grow: 2; 
  flex-shrink: 1;
}

.video:not(:first-child) {
  flex-grow: 1; 
  flex-shrink: 4;
}

設計 rwd

@media screen and (max-width: 768px) {
  .video__container {
    flex-wrap: wrap;
  }
  .video:not(:first-child), .video:first-child {
    flex-shrink: 0;
    flex-grow: 0;
  }

#position #flex #absolute #Web #RWD

s103071049




Related Posts

什麼是 Composition API

什麼是 Composition API

 hoyi-23
Week1 筆記｜[GIT101] GIT 學習筆記

Week1 筆記｜[GIT101] GIT 學習筆記

 YYLu1118
20% self-improvement program 實際案例分享

20% self-improvement program 實際案例分享

 ArvinH

Comments