Day30 切版笔记 - 文字排版

没想到30天这麽快就过去了

还记得决定学习前端知识的时候，带给我的都是新奇的体验，但随着学习的内容越来越多，因为记不住的也多了，无力感就随之而来了。还好当初没有因为自我怀疑和担心放弃参赛，30天的发文挑战让我在学习上的无力感消失了，虽然不可能全部都记住，但至少使我记住了大部分学过的内容。无形中也把统整学过的知识成了一件每天都要执行的事情，算是间接地推翻了那个总是想得多做得少的我吧。
想起之前看过关於时间管理的演讲中所提到的
「 I don't have time. = It's not a priority.」
是阿! 如果一件事情足够重要，你还是没时间去做吗?

今天来练习切以下的三个画面

运用到的观念

1. flexbox
2. float
3. box-sizing 盒模型概念
4. column-count & column-gap
5. 伪元素

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

1. 设定css reset
   设定container将宽度固定在1200px 置中 内元素横向排列

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

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

2. h1和txt区块分别设定宽度

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

3. 将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;
   }

4. 用column-count 将txt 的内容设成两栏
   用column-gap设定栏和栏间的距离

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

5. h1 区块新增背景颜色和padding

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

6. 使用伪元素做出下底线
   设定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

1. 将h1宽度、文字置右、右边框和float设定删掉
   把字体大小改大一点 文字颜色也改掉

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

2. 使用伪元素作出底色区块

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

}

3. 使用绝对定位和相对定位调整灰色区块位置
   宽度要设定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 教学