Day30 切版筆記 - 文字排版 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 30

自我挑戰組

文組視角的初學前端筆記系列第 30 篇

Day30 切版筆記 - 文字排版

13th鐵人賽

ptsai129

2021-09-30 23:24:36

884 瀏覽

分享至

沒想到30天這麼快就過去了

還記得決定學習前端知識的時候，帶給我的都是新奇的體驗，但隨著學習的內容越來越多，因為記不住的也多了，無力感就隨之而來了。還好當初沒有因為自我懷疑和擔心放棄參賽，30天的發文挑戰讓我在學習上的無力感消失了，雖然不可能全部都記住，但至少使我記住了大部分學過的內容。無形中也把統整學過的知識成了一件每天都要執行的事情，算是間接地推翻了那個總是想得多做得少的我吧。
想起之前看過關於時間管理的演講中所提到的
「 I don't have time. = It's not a priority.」
是阿! 如果一件事情足夠重要，你還是沒時間去做嗎?

今天來練習切以下的三個畫面

運用到的觀念

flexbox
float
box-sizing 盒模型概念
column-count & column-gap
偽元素

HTML結構

<div class="wrap">
   <div class="container">
     <h1>Seize the present day</h1>
     <div class="txt">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
         culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
         culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
         culpa qui officia deserunt mollit anim id est laborum.</p>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in
         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
         culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
   </div>
 </div>

CSS結構1

設定css reset
設定container將寬度固定在1200px 置中內元素橫向排列

* {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .container{
      width: 1200px;
      margin:auto;
      display: flex;
  }

h1和txt區塊分別設定寬度

  .container h1{
      width: 400px;
  }
  
    .container .txt{
      width: 800px;
  }

將h1設成置右
h1 和txt 區塊都新增padding 並設定border-box 讓區塊能自動調整尺寸

  .container h1{
      width: 400px;
      text-align: right;
      box-sizing: border-box;
   }
      
  .container .txt{
      width: 800px;
      box-sizing: border-box;
      padding:15px;
   }

用column-count 將txt 的內容設成兩欄
用column-gap設定欄和欄間的距離

  .container .txt{
      width: 800px;
      box-sizing: border-box;
      padding:15px;
      column-count:2; 
      column-gap:30px; 
  }

h1 區塊新增背景顏色和padding

  .container h1{
      width: 400px;
      text-align: right;
      box-sizing: border-box;
      padding:15px;
      background-color: #D5C7B9; 
  }

使用偽元素做出下底線
設定display:block; 改成區塊元素才能更改高度

  .container h1::after{
      content:" "; 
      display: block;
      height:4px;
      width:5em; 
      background-color: #000;
      margin-left: auto;
  }

調整padding設定
container新增上下padding
txt&h1上下padding改為0

  .container{
      width: 1200px;
      margin:auto;
      display: flex;
      padding: 100px 0; 
  }

完成第一個畫面啦~

CSS結構2

1.將原來設定的h1 寬度改掉
背景顏色設定刪掉 h1的偽元素刪掉
新增右側邊框線

 .container h1{
      width: 450px;
      text-align: right;
      box-sizing: border-box;
      padding:15px;
      border-right:3px solid #000;
  }

h1新增float:left;設定
刪除container的display:flex;設定
刪除txt區塊的column-count: 2; column-gap: 30px;設定
調整h1的字體大小和與txt區塊的距離

  .container{
	width: 1200px;
	margin: auto;
	padding: 100px 0;
}
.container h1{
	width: 450px;
	text-align: right;
	box-sizing: border-box;
	padding: 15px;
	border-right: 3px solid #000;
	float: left;
	margin-right: .5em;
	font-size: 42px;
}
.container .txt{
	box-sizing: border-box;
	padding: 0 15px;
}

完成第二個畫面啦~

CSS結構3

將h1寬度、文字置右、右邊框和float設定刪掉
把字體大小改大一點文字顏色也改掉

.container h1{
	box-sizing: border-box;
	padding: 15px;
	margin-right: .5em;
	font-size:120px;
    color: #aaa; 
}

使用偽元素作出底色區塊

.container h1::after{
    content:'';
    display: block;
    height: 50px;
    background-color: #eee;

}

使用絕對定位和相對定位調整灰色區塊位置
寬度要設定100%;才會顯示出來
把h1 上下paddding改為0

.container h1{
	box-sizing: border-box;
	padding:  0 15px;
	margin-right: .5em;
	font-size:120px;
    color: #aaa; 
    position: relative;
}

.container h1::after{
    content:'';
    display: block;
    width:100%; 
    height: 50px;
    background-color: #eee;
    position:absolute;
    bottom:0; 
    z-index: -1;
}

第三個畫面就完成了~

參考資料: 金魚都能懂的這個網頁畫面怎麼切 : 文字排版-上集,CSS column 教學