一、Position 實戰篇
製作固定在彈窗正中間的小廣告,廣告右上角是關閉鈕
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>css助教課程</title>
<link rel='stylesheet' href='test.css'/>
</head>
<body class='debug'>
<div class='message'>
<div class='close'></div>
<h1>注意</h1>
<p>恭喜你是第 1000 個造訪者!</p>
</div>
</body>
</html>
.debug *, .debug {
outline: 1px solid gold;
}
* {
box-sizing: border-box;
}
html {
font-size: 12px;
}
html, body, h1, h2, h3, h4, p {
padding: 0;
margin: 0;
}
/*彈窗內的文字置中對齊、間隔 10px*/
h1, p {
text-align: center;
margin: 10px;
position: relative;
}
/*彈窗外觀*/
.message {
width: 300px;
box-shadow: 0 2px 20px 0 rgba(100,1000,100,0.1);
padding: 20px 30px;
border-radius: 10px;
position: fixed; /*因為是彈窗,會希望他死忠固定 viewport*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);/*transform 可以抓到元素自身的寬高*/
}
/*彈窗內的關閉鈕*/
.message div {
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px solid black;
position: absolute;
top: 10px;
right: 10px;
}
/*偽元素是由 css 產生,與 html 不同,後續要做 js 動畫效果是抓不到這個元素
利用偽元素製造叉叉記號
*/
.message div:after, .message div:before {
content: '';
position: absolute;
height: 1px;
top: 50%;
left: 50%;
width: 80%;
background: black;
}
.message div:after {
transform: translate(-50%, -50%) rotate(45deg);
}
.message div:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
二、Display 實戰篇
前言:Display 決定元素與元素之間的關係、元素內部元素怎麼排列
製作簡單小卡,上面是圖片、下面是文字資訊。
重點摘要:display 三種用法、background-img 怎麼裝圖片、基礎 rem 以字體為基礎的單位。
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>css助教課程</title>
<link rel='stylesheet' href='test.css'/>
</head>
<body>
<main class='debug'>
<div class='video star'>
<div class='video_thumbnails'></div>
<div class="video__info">
<h1 class='video__title'>
<div class='video__mark'></div>
Title
</h1>
<h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
</div>
</div>
</main>
</body>
</html>
/*加上一些 css setting*/
.debug *, .debug {
outline: 1px solid gold;
}
html {
font-size: 12px;
}
html, body {
width: 100%;
height: 100%;
}
html, body, h1, h2, h3, h4, h5, h6, p {
padding: 0;
margin: 0;
}
/*幫卡片做基礎樣式*/
.video {
width: 200px;
height: 180px;
margin: 20px;
padding-bottom: 10px;
box-shadow: 0 2px 20px 0 rgba(100,100,100,0.1);
border-radius: 10px;
}
/*放入圖片,將圖片放到元素內的 background-image 讓圖片與元素 css 樣式一致*/
.video_thumbnails {
height: 70%;
background-image: url('https://picsum.photos/1200/300?random=2');
background-size: cover;
border-radius: 10px;
overflow: hidden; /*讓內層超出去的元素不會被顯示出來*/
}
/*內層文字內縮*/
.video__info {
padding: 10px;
}
/*設定文字大小*/
.video__title {
font-size: 1.6rem;
}
/*em 是用母元素的基礎字體大小作為倍數單位,
但每個母元素都有自己的字體大小會很難管理,所以有了 rem: 以根元素的基礎字體大小作為倍數的單位*/
.video__date {
font-size: 1.2rem;
}
.video__time {
font-size: 1rem;
color: gray;
}
.video__mark {
vertical-align: baseline;
margin-right: 10px;
background: red;
border-radius: 50%;
display: inline-block; /* inline不能被設定寬高,要裡面有裝東西才會被呈現*/
width: 1rem;
height: 1rem;
}
三、Flex 實戰篇
將套用 flex 的元素區分為 flex container、flex item,這是因為某些 flex 屬性對套用在 flex-container 裡面的元素才會有作用,另外有些屬性只會影響單一 item。
學習重點:flex container 如何做到對齊、flex item 如何利用 flex-grow, flex-shrink 進行縮放
目前代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset='urf-8'>
<title>css助教課程</title>
<link rel='stylesheet' href='test.css'/>
</head>
<body>
<main class='debug'>
<section class='video__container'>
<div class='video star'>
<div class='video_thumbnails'></div>
<div class="video__info">
<h1 class='video__title'>
<div class='video__mark'></div>
Title
</h1>
<h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
</div>
</div>
<div class='video star'>
<div class='video_thumbnails'></div>
<div class="video__info">
<h1 class='video__title'>
<div class='video__mark'></div>
Title
</h1>
<h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
</div>
</div>
<div class='video star'>
<div class='video_thumbnails'></div>
<div class="video__info">
<h1 class='video__title'>
<div class='video__mark'></div>
Title
</h1>
<h4 class='video__date'>2021/06/15 <span class='video__time'>13:02</span></h4>
</div>
</div>
</section>
</main>
</body>
</html>
flex-container 上作用的屬性:
會影響全部的 item
例如:flex-direction, justify-content, align-items, flex-wrap
display:flex 預設狀況
- flex-direction : column 由左到右排列
- justify-content : flex-start 靠左對齊
- align-items : flex-start 靠上對齊
.video__container {
display: flex;
}
垂直水平置中排列(特地給高,以方便看出垂直置中效果)
.video__container {
display: flex;
align-items: center; /* flex-start, flex-end*/
justify-content: center; /* space-around, space-between*/
height: 600px;
}
不同 flex-direction 狀況,align-items, justify-content 對齊狀態會不太一樣。
flex-item 上作用的屬性:
order 決定 flex-item 如何排列的順序
flex-grow:當 container 有多餘空間該怎麼分配剩下空間
flex-shrink:當 container 空間不足該怎麼相對剝奪裡面各項 item 的寬度
利用 flex-grow, flex-shrink 可以設置出豐富的 rwd 效果,沒有特別設定下,flex-grow = 0、flex-shrink = 1 (被等比的奪走寬度、不會被放大)
現在,回到代碼。
.video__container {
display: flex;
align-items: center;
justify-content: center;
}
縮放過程:會先壓縮物體的多餘空間,接著就超出 flex-container
加上 flex-wrap 可以讓操作空間折行。
.video__containe
{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
物體放大縮小,設定佔的空間
.video:first-child {
flex-grow: 2;
flex-shrink: 1;
}
.video:not(:first-child) {
flex-grow: 1;
flex-shrink: 4;
}
設計 rwd
@media screen and (max-width: 768px) {
.video__container {
flex-wrap: wrap;
}
.video:not(:first-child), .video:first-child {
flex-shrink: 0;
flex-grow: 0;
}