Amos金魚都能懂的切版教學影片-csscoke NO010

練習使用float排版

HTML架構

<div class="wrap">
	<div class="item">
		<img src="https://picsum.photos/500/500?random=10">
		<div class="txt">
			<h3>金魚都懂切版</h3>
			<p>金魚都懂的這個網頁怎麼切，是 IThome 鐵人賽的主題，主要訴求在簡。</p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=20">
		<div class="txt">
			<h3>金魚也懂CSS</h3>
			<p>金魚都能懂的 CSS 選取器，是 IThome 鐵人賽的主題之一，</p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=30">
		<div class="txt">
			<h3>金魚還會HTML</h3>
			<p></p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=40">
		<div class="txt">
			<h3>阿你會甚麼?</h3>
			<p></p>
		</div>
	</div>
	<div class="item">
		<img src="https://picsum.photos/500/500?random=66">
		<div class="txt">
			<h3>對不起我又嗆人了</h3>
			<p> CSScoke 的直播，趁現在趕快去定閱一波阿!</p>
		</div>
	</div>
</div>

調整版面

1.在wrap來訂出畫面尺寸大小
2.使用float
3.在第一個的item去設定，佔畫面的50%;而另外四個則是以25％去放置在畫面中
4.蚯蚓選取器：『對象 A 同層後方的所有 B』

/* 先將畫面尺寸定出來 */
    .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%;
    }

設定.item .txt區塊的寬為100%，以及paddimg:15px，這會使得文字區塊超出div。
要使用 box-sizing: border-box;

互動效果的設定

設定文字被摸到出現或消失

.item .txt {
      
      /* 調整兩個段落的垂直居中 */
      /* display: flex; */
      flex-direction: column;
      justify-content: center;
      align-items: center;

      /* 要設定互動，display: flex;要去掉 */
      display: none;

    }
    .item:hover .txt {
      display: flex;
    }
     /* ******************************/
    /* ***或是以透明度的方式來做顯示互動的效果*** */
  .item .txt {  
      opacity: 0;
      transition: .5s;

    }

    .item:hover .txt {
      opacity: 1;
    }

也可將互動改唯有縮放效果的方式
scale()用於修改元素大小

.item .txt {  
     opacity: 0;
     transform: scale(0);
     transition: .5s;

   }

   .item:hover .txt {
     opacity: 1;
     transform: scale(1);
   }

補充教學-float 浮動

以圖片與段落文字為例


<img src="https://picsum.photos/500/500?random=6">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing 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.

</p>