|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用CSS的Grid布局實(shí)現(xiàn)小狗郵票(附源碼),有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對你有所幫助。效果預(yù)覽
源代碼下載https://github.com/comehope/front-end-daily-challenges 代碼解讀定義 dom,容器表示郵票: <div class="stamp"> </div> 居中顯示: body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: teal;
}設(shè)置容器尺寸: .stamp {
position: relative;
width: 40.5em;
height: 71em;
font-size: 6px;
padding: 5em;
background-color: white;
}用重復(fù)背景繪制出郵票的齒孔: .stamp {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.stamp::after,
.stamp::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: radial-gradient(circle, teal 50%, transparent 50%),
radial-gradient(circle, teal 50%, transparent 50%);
background-size: 3.5em 3.5em;
}
.stamp::before {
top: 1.5em;
background-repeat: repeat-y;
background-position: -4.5% 0, 104.5% 0;
}
.stamp::after {
left: 1.5em;
background-repeat: repeat-x;
background-position: 0 -2.5%, 0 102.5%;
}在 html 文件中增加小狗的 dom 元素,子元素分別表示耳朵、頭部、眼睛、舌頭、身體、尾巴和爪子: <div class="stamp">
<div class="puppy">
<span class="ear"></span>
<span class="head"></span>
<span class="eyes"></span>
<span class="tongue"></span>
<span class="body"></span>
<span class="tail"></span>
<span class="foot"></span>
</div>
</div>設(shè)置 grid 布局的行列尺寸: .puppy {
display: grid;
grid-template-columns: 10em 22.5em 8em;
grid-template-rows: 21em 12.5em 3.75em 22.5em;
background-color: tan;
padding: 2em;
margin-top: -1em;
}畫出小狗的頭部,跨第1列和第2列、第2行和第3行,是一個(gè)半圓形: .head {
grid-column: 1 / 3;
grid-row: 2 / 4;
border-bottom-left-radius: calc(12.5em + 3.75em);
border-bottom-right-radius: calc(12.5em + 3.75em);
background-color: bisque;
}用偽元素畫出鼻子,是一個(gè)扇形,多余的部分被隱藏了: .head {
position: relative;
overflow: hidden;
}
.head::before {
content: '';
position: absolute;
width: 7em;
height: 7em;
border-bottom-right-radius: 100%;
background-color: sienna;
}畫出半圓形的眼暈: .eyes {
grid-column: 2;
grid-row: 2;
justify-self: end;
position: relative;
height: 10.5em;
width: 21em;
border-radius: 0 0 10.5em 10.5em;
background-color: sienna;
}用徑向漸變畫出眼珠: .eyes {
background-image: radial-gradient(
circle at 37% 33%,
black 1.4em,
transparent 1.4em
);
}畫出半圓形的耳朵: .ear {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: 10.5em;
border-radius: 21em 0 0 21em;
background-color: sienna;
}畫出扇形的舌頭: .tongue {
grid-column: 1;
grid-row: 3;
width: 5.5em;
height: 5.5em;
background-color: indianred;
border-bottom-left-radius: 100%;
}畫出扇形的身體: .body {
grid-column: 2;
grid-row: 4;
background-color: sienna;
border-top-left-radius: 100%;
}用偽元素,通過陰影畫出中蹲著的腿: .body {
position: relative;
overflow: hidden;
}
.body::after {
content: '';
position: absolute;
height: 50%;
width: 100%;
border-radius: 11.25em 11.25em 0 0;
box-shadow: 2em 0 4em rgba(0, 0, 0, 0.3);
bottom: 0;
}畫出半圓形的尾巴: .tail {
grid-column: 1;
grid-row: 4;
justify-self: end;
align-self: end;
height: 17.5em;
width: 8.75em;
background-color: bisque;
border-radius: 17.5em 0 0 17.5em;
}畫出半圓形的小爪子: .foot {
grid-column: 3;
grid-row: 4;
align-self: end;
height: 4em;
background-color: bisque;
border-radius: 4em 4em 0 0;
}在 dom 中再增加一些文本,包括標(biāo)題、作者和面值: <div class="stamp">
<div class="puppy">
<!-- 略 -->
</div>
<p class="text">
<span class="title">Puppy</span>
<span class="author">comehope</span>
<span class="face-value">80</span>
</p>
</div>設(shè)置標(biāo)題的文字樣式: .text {
position: relative;
width: calc(100% + 2em * 2);
height: 6em;
font-family: sans-serif;
}
.text .title {
position: absolute;
font-size: 6em;
font-weight: bold;
color: sienna;
}設(shè)置作者的文字樣式: .text .author {
position: absolute;
font-size: 3em;
bottom: -1.2em;
color: dimgray;
}設(shè)置面值的文字樣式: .text .face-value {
position: absolute;
font-size: 14em;
right: 0;
line-height: 0.9em;
color: darkcyan;
}大功告成! 以上就是如何使用CSS的Grid布局實(shí)現(xiàn)小狗郵票(附源碼)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!