切版練習筆記(二)
作者：互联网
切版練習筆記(二)
目標
Step 1.
基本架構與內容
<body>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/500/400/?random=1">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切 : 互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
</div>
</body>
Step 2.
網頁排版初始化
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
Step 3.
設定容器和image寬度
<style>
.wrap {
width: 100%;
}
.item {
width: 25%; /* 因為有四個，每個占25% */
}
.item img {
width: 100%;
}
</style>
Step 4.
去除圖片下方多出來的空白部分
<style>
.item img {
width: 100%;
vertical-align: middle;
}
</style>
圖片在垂直方向上會多出來一小塊空白部分(圖片下方)，可以使用vertical-align去除。vertical-align也可以設定成baseline以外的對齊方式來達成此效果。。
Step 5.
把文字放在圖片上
<style>
.item {
width: 25%;
position: relative;
}
.item .txt {
position: absolute;
/* 從左上方開始 */
top: 0;
right: 0;
left: 0;
bottom: 0;
}
</style>
因為要把文字(txt)放在圖片上方，因此會使用絕對定位蓋上去，而我們要把這個定位定在上一層容器(父層item身上)，所以item也要設定position。
定位
position: absolute;，元素被設定成絕對定位，它會相對於它的父元素進行定位(相對於父元素的絕對定位)。
absolute 元素的定位是相對於他所處的上層容器(父元素)進行定位。如果這個元素其上層容器並沒有「可以被定位」的元素的話，那麼它會再往上上層容器找，若是都沒有「可以被定位」的元素的話，它最後會定位在「視窗上」(不是body上)。如果上層容器(父元素)有定位的話(無論是fixed、relative、absolute)，那這個元素就會定在它身上(找到了就不會再往上找了)。
position: static;，staic是預設值，這樣設定的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上。
position: relative ;，relative 表現的和 static 一樣，除非你增加了一些額外的屬性。在一個設定為 relative的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。
position: fixed;，固定定位的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。
Step 6.
替文字設定padding與背景色，看起來比較好看
<style>
.item .txt {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
rgba(紅色、綠色、藍色，透明度)
Step 7.
設定文字(標題、內文)的大小和顏色
<style>
.item .txt h2 {
font-size: 24px;
color: #ff0;
}
.item .txt p {
font-size: 16px;
color: #fff;
}
</style>
Step 8.
文字排版，希望文字都在正中間
<style>
.item .txt {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
Step 9.
設定網頁字型
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Noto Sans TC', sans-serif;
}
.wrap {
width: 100%;
}
.item {
width: 25%;
position: relative;
}
.item img {
width: 100%;
vertical-align: middle;
}
.item .txt {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
flex-direction: column;
}
.item .txt h2 {
font-size: 24px;
color: #ff0;
font-weight: 500;
}
.item .txt p {
font-size: 16px;
color: #fff;
font-weight: 100;
}
</style>
</head>
Step 10.
新增其他三個區域和文字內容
<body>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/500/400/?random=1">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切 : 互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400/?random=2">
<div class="txt">
<h2>稀飯版都不會切你怎麼轉職?來我的網頁暴力班，保證讓你邊痛邊學會</h2>
<p>把技能學好是需要一點點痛一點點爽一點點過癮跟一點點的暴力，不信你來報名試試看阿!</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400/?random=3">
<div class="txt">
<h2>不知道你有沒有聽過網頁的都市傳說，絕對不要相信沒有驗證過的謠言</h2>
<p>網頁的都市傳說很多種，其中一種叫做兒子絕對定位老爸就要相對定位，這啥鬼?</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400/?random=4">
<div class="txt">
<h2>買線上課程前停個幾秒想想，還是先把免費的金魚教學練一練吧</h2>
<p>買了不會看，那不如來看免錢的，縱使不看也不會有罪惡感，更不會心痛阿。</p>
</div>
</div>
</div>
</body>
Step 11.
讓這四個區域橫向排列
<style>
.wrap {
width: 100%;
display: flex;
}
</style>
Step 12.
文字動畫，滑鼠碰到的時候才顯示文字
<style>
.item .txt {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity .5s; /* 動畫時間 */
}
/* 當item被碰到，它的child txt會改變透明度 (父層被碰到，子層做事情)*/
.item:hover .txt {
opacity: 1;
}
</style>
Step 13.
標題下方新增一橫線
<style>
.item .txt h2:after {
content: '';
display: block;
width: 100%;
height: 2px;
margin: 10px 0;
background-color: #ff0;
}
</style>
CSS 偽元素 ( before 與 after )
before 是在原本的元素「之前」加入內容，after 則是在原本的元素「之後」加入內容，同時偽元素也會「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。
Step 14.
橫線的動畫，寬度的改變( 0% -> 100%)
<style>
.item .txt h2:after {
content: '';
display: block;
width: 0%;
height: 2px;
margin: 10px 0;
background-color: #ff0;
transition: width 0.5s 0.5s; /*特效轉換時間、延遲執行時間*/
}
.item:hover h2:after {
width: 100%;
}
</style>
标签：width,筆記,元素,item,Step,position,txt,切版練習 来源： https://blog.csdn.net/XI_MILU/article/details/117826056