标签：width 筆記 元素 item Step position txt 切版練習
切版練習筆記(二)
目標
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。