Day24 切版笔记-超通用横式版面

学过的内容没有实际在VS CODE上写过，很难不去忘记。
透过切版练习，逼自己每天都进步一点点，相信有一天，自己也可以写出结构清楚又不跑版的网页。

运用到的观念:

1. 使用box-sizing:border-box;调整容器宽度和高度
2. 使用align-self个别调整子元素在交错轴线的位置
3. 使用object-fit调整变形的图片
4. 使用linear-gradient将背景颜色设成渐层色
5. 使用box-shadow作出阴影效果
6. 使用rgba设定有透明度的色彩
7. 按钮搭配:hover作出互动效果

HTML结构

先作一个wrap区块
在做一个container区块来固定内容宽度
container内放三个item区块
item区块分别有放图片的pic区块和放文字的txt区块

   <div class="wrap">
      <div class="container">
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=11">
          </div>
          <div class="txt">
            <h2>金鱼都能懂的网页入门</h2>
            <p>年度最佳网页入门教学影片，轻松学会网页制作，原始码原来如此有趣啊。</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=12">
          </div>
          <div class="txt">
            <h2>金鱼都能懂的网页切版</h2>
            <p>没想到切版竟然如此简单，以往的困难迎刃而解，技巧原来这般单纯。</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=13">
          </div>
          <div class="txt">
            <h2>金鱼都能懂的CSS选取器</h2>
            <p>CSS选取器原来是这道理啊，其实之前都误解她了，对不起 9523 !</p>
            <a href="" class="btn">more</a>
          </div>
        </div>
      </div>
    </div>

CSS结构

1. 设定css reset 并设定各个区块的宽度和排列方式

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

.wrap{
  height:100vh;
  display:flex;
  align-items:center;
}

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

.item{
  width: 370px;
  margin: 0 15px;
}

2.将item区块内的pic和txt区块设为横向并排
且宽度各占item区块的一半

.item{
  width: 370px;
  margin: 0 15px;
  display:flex; 
}
.item .pic{
  width:50%;
}
.item .txt{ 
  width:50%; 
}

因为图片的尺寸超出了item区块的尺寸 将图片尺寸设为填满pic区块

.item .pic img{
  width:100%;
  height:100%;
}

4. 设定padding让图片和文字有一些距离
   因为新增了padding，宽度会有改变，所以使用box-sizing:border-box;来调整

.item .txt{ 
  width:50%; 
  padding: 20px;
  box-sizing: border-box; 
}

5. 经过上面调整後，会发现图片有点变形了，这时可以使用object-fit: cover;来调整

.item .pic img{
  width:100%;
  height:100%;
  object-fit: cover;

} 

相关资料:新手前端也不该犯的错：图片变形

6. 将txt区块内的文字设为垂直居中

.item .txt{ 
  width:50%; 
  padding: 20px;
  box-sizing: border-box; 
  display: flex;
  flex-direction: column;
  justify-content: center;
} 

7. 设定btn的样式

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
}

因为设定成从上到下排列(主轴/资料流向)，预设状态下(交错轴/与资料流垂直)会整个填满(align-items:stretch;)，因此设定的border就变成了满版了

8. 设定align-self: flex-end; 调整btn的样式

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
}

相关资料:align-self 属性介绍

在调整边框及去掉a连结预设的底线样式和文字内容的距离

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
text-decoration: none;
border-radius: 200px;
margin-top: 1em;
}

9. 设定h2和p之间有一些距离
   在wrap及设定item区块设定背景色彩

.item .txt h2{
  margin-bottom: .4em;
}

.wrap{
  height:100vh;
  display:flex;
  align-items:center;
  background: linear-gradient(-30deg, #fdaecb, #e7597f , #fe8556);
}

.item{
  width: 370px;
  margin: 0 15px;
  display:flex;  
  background-color: #fff;
}

10. 设定btn区块在滑鼠碰到时，有变色的效果

.item .txt .btn{
line-height: 1.5em;
border: 1px solid #ccc;
padding: 0 1em;
align-self: flex-end;
text-decoration: none;
border-radius: 200px;
margin-top: 1em;
color:#aaa;
}
.item .txt .btn:hover{
  background-color: #ccc;
  color:#fff;
}

11. 因为新增border会增加宽度2px(1px左border+1px右border)，所以本来的宽度要扣掉2px
    使用box-shadow属性作出阴影的效果
    box-shadow: x轴 y轴 模糊程度 色彩;
    box-shadow 色彩可以带和本来背景相似又较深颜色 会比较有层次感
    目前的背景是红色系，所以设定成透红色的深色
    rgba(red 值, green 值, blue 值, alpha 值);
    red, green, blue 值的设定范围: 0 ~ 255 的整数值或是0% ~ 100% 的百分比值
    alpha 值的设定范围: 0.0 ~ 1.0， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明

  .item{
  width: 368px;
  margin: 0 15px;
  display:flex;  
  background-color: #fff;
  border:1px solid #888;
  box-shadow: 0 10px 30px rgba(160,0,0,.5); 
  font-family: 'Noto Sans TC',serif;
}

}

参考资料:金鱼都能懂的这个网页画面怎麽切 : 超通用横式版面

以上为个人学习笔记整理
若有错误，欢迎指正