Day26 切版笔记- 方块酥版面

今天来练习下面这个版面~

运用到的观念:

1. 使用float排版
2. :first-child
3. ~选取器
4. 相对定位&绝对定位
5. 盒模型& box-sizing:border-box;
6. overflow:hidden;
7. margin:auto;
8. google fonts字体载入
9. opacity 搭配:hover, transition作出互动效果
10. transform:scale()搭配:hover, transition作出互动效果

HTML 结构

 <div class="wrap">
      <div class="item">
        <img src="https://picsum.photos/500/500?random=10" alt="" />
        <div class="txt">
          <h3>金鱼都懂切版</h3>
          <p>
            金鱼都懂的这个网页怎麽切，是 IThome
            铁人赛的主题，主要诉求在简单快速将一个网页画面完成，但也由於时间有限，
            所以没有处理RWD部分，留给广大网友脑补罗。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=20" alt="" />
        <div class="txt">
          <h3>这是一首歌的歌词</h3>
          <p>
            坚持对我来说，就是以刚克刚。 我如果对自己妥协，
            如果对自己说谎，即使别人原谅，我也不能原谅。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=30" alt="" />
        <div class="txt">
          <h3>这是一首歌的歌词</h3>
          <p>
            长大後谁不是离家出走，茫茫人海里游。抬起头才发现，流眼泪的星星正在放弃我。
            请拥抱我，万一我不小心坠落。
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=40" alt="" />
        <div class="txt">
          <h3>这是一首歌的歌词</h3>
          <p>
            世界上七千个地方，我们定居哪?告诉我答案是什麽?你喜欢去哪?
            青海或三亚?冰岛或希腊?南美不去吗?沙漠你爱吗?
          </p>
        </div>
      </div>
      <div class="item">
        <img src="https://picsum.photos/500/500?random=50" alt="" />
        <div class="txt">
          <h3>这是一首歌的歌词</h3>
          <p>
            闭上眼，闭上眼，总会看到刹那的神。一晃眼，一晃眼，总会碰到偶然的真。
            过一天，爱一天，反正一切都有可能。
          </p>
        </div>
      </div>
    </div>

CSS结构

1.先设定CSS RESET
将背景设成黑色
固定wrap区块的宽度
用margin:auto;将wrap区块水平置中
item区块设定浮动靠左排列 float:left;
wrap区块(item的父层)设定overflow:hidden;让item区块的高度能撑开wrap区块
设定item区块内的图片宽度能填满整个item区块并更改图片对齐设定以消除多余的空白空间
使用 :first-child 将第一个item区块设定成较大的宽度
使用 ~选取器将除了第一个item区块以外的item区块设定宽度

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

body{
  background-color: #000;
}
.wrap{
  width: 960px ; 
  margin:auto; 
  overflow: hidden;
}

.item{
  float:left; 
}

.item img{
  width: 100%;
  vertical-align: middle;
}

.item:first-child{
	width: 50%;
}
.item:first-child ~ .item{
	width: 25%;
}

多出来的黑色区块是txt区块

2. 将文字txt区块固定到item区块内

.item{
  float:left; 
  position: relative; 
}

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  text-align: center;
  color: #fff;
}

可以看到有些文字内容不见了，是因为txt区块设定高度宽度都是100%又加上padding会多出宽度，
所以设定box-sizing:border-box;来调整

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;

新增box-sizing: border-box; 後

3. 将txt区块内的文字内容设成垂直置中且背景颜色调整成半透明

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
   background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 } 

4. 载入字体设定

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");

* {
 margin: 0;
 padding: 0;
 list-style: none;
 font-family: "Noto Sans TC", sans-serif; 
}

更改p 和h3的字体粗细和文字排版

.item p{
 font-weight: 100;
 line-height: 1.7;
}

.item h3{
margin-bottom: .4em;
} 

5. 使用opacity 搭配:hover 和 transition 做出游标碰到图片时文字才会出现的效果

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition:.5s 
}
 
.item:hover .txt{
  opacity: 1;
}

6. 使用transform: scale() 搭配:hover 和 transition 做出游标碰到图片时文字区块才会放大的效果

.item .txt{
  position: absolute;
  top:0;
  left:0; 
  height: 100%;
  width:100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
 opacity: 0;
  transform: scale(0); 
  transition:.5s 
}
 
.item:hover .txt{
 transform:scale(1); 
  opacity: 1;
}

参考资料:金鱼都能懂的这个网页画面怎麽切 : 方块酥版面,金鱼都能懂网页设计入门 : Float浮动 (铁人赛第九天)

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