這篇文章主要介紹了怎么用CSS的Grid布局實現小雞郵票，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為華龍等地區用戶提供了全套網頁設計制作服務，及華龍網站建設行業解決方案。主營業務為成都網站建設、做網站、華龍網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

代碼解讀

定義dom，容器表示郵票：

<divclass="stamp">

</div>

居中顯示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:teal;

}

設置容器尺寸：

.stamp{

position:relative;

width:57em;

height:71em;

font-size:5px;

padding:5em;

background-color:white;

}

用重復背景繪制出郵票的齒孔：

.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,teal50%,transparent50%),

radial-gradient(circle,teal50%,transparent50%);

background-size:3.5em3.5em;

}

.stamp::before{

top:1.5em;

background-repeat:repeat-y;

background-position:-3%0,103%0;

}

.stamp::after{

left:1.5em;

background-repeat:repeat-x;

background-position:0-2.5%,0102.5%;

}

在html文件中增加小雞的dom元素，子元素分別表示頭部、喙、身體、尾巴、腿、爪子、太陽、桔子：

<divclass="stamp">

<divclass="rooster">

<spanclass="head"></span>

<spanclass="beak"></span>

<spanclass="body"></span>

<spanclass="tail"></span>

<spanclass="leg"></span>

<spanclass="foot"></span>

<spanclass="sun"></span>

<spanclass="orange-stuff"></span>

</div>

</div>

設置grid布局的行列尺寸：

.rooster{

display:grid;

grid-template-columns:22.5em13em1.75em14.5em4.5em;

grid-template-rows:12.5em14.5em15em8em5.5em;

background-color:wheat;

padding:2em;

margin-top:-2em;

}

畫出扇形的頭部：

.head{

grid-column:4;

grid-row:2;

background-color:burlywood;

border-top-left-radius:100%;

}

畫出小雞的眼睛和臉上的紅暈：

.head{

position:relative;

}

.head::after{

content:'';

position:absolute;

width:2.8em;

height:2.8em;

border-radius:50%;

background-color:black;

right:30%;

box-shadow:2em4em4emrgba(255,100,0,0.5);

}

畫出扇形的喙：

.beak{

grid-column:5;

grid-row:2;

height:4.5em;

background-color:darkorange;

border-bottom-right-radius:100%;

}

畫出半圓形的身體：

.body{

grid-column:2/5;

grid-row:3;

width:30em;

background-color:saddlebrown;

border-radius:0015em15em;

}

用偽元素，通過陰影畫出翅膀：

.body{

position:relative;

overflow:hidden;

}

.body::after{

content:'';

position:absolute;

width:20em;

height:10em;

border-radius:inherit;

box-shadow:4em2em4emrgba(0,0,0,0.3);

left:calc((30em-20em)/2);

}

畫出扇形的尾巴：

.tail{

grid-column:1;

grid-row:1/3;

height:22.5em;

background-color:burlywood;

align-self:end;

border-top-left-radius:100%;

}

畫出扇形的腿：

.leg{

grid-column:4;

grid-row:4;

width:8em;

background-color:burlywood;

border-bottom-right-radius:100%;

}

畫出扇形的小爪子：

.foot{

grid-column:4;

grid-row:5;

width:5.5em;

background-color:darkorange;

border-top-right-radius:100%;

}

畫出半圓形的太陽：

.sun{

grid-column:3/5;

grid-row:1;

width:17em;

--h:calc(17em/2);

height:var(--h);

background-color:darkorange;

border-radius:00var(--h)var(--h);

}

畫出圓形的桔子和半圓形的葉片，注意此處葉片的畫法與前面畫半圓形的畫法不同：

.orange-stuff{

grid-column:1;

grid-row:3/6;

width:16em;

height:16em;

background-color:darkorange;

align-self:end;

justify-self:end;

border-radius:50%;

position:relative;

}

.orange-stuff::before{

content:'';

position:absolute;

width:8em;

height:8em;

background:linear-gradient(45deg,transparent50%,saddlebrown50%);

border-radius:50%;

top:-6.8em;

left:10%;

}

在dom中再增加一些文本，包括標題、作者和面值：

<divclass="stamp">

<divclass="puppy">

<!--略-->

</div>

<pclass="text">

<spanclass="title">Rooster</span>

<spanclass="author">comehope</span>

<spanclass="face-value">120</span>

</p>

</div>

設置標題的文字樣式：

.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:brown;

}

設置作者的文字樣式：

.text.author{

position:absolute;

font-size:3em;

bottom:-1.2em;

color:dimgray;

}

設置面值的文字樣式：

.text.face-value{

position:absolute;

font-size:14em;

right:0;

line-height:0.9em;

color:darkcyan;

}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用CSS的Grid布局實現小雞郵票”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

當前標題：怎么用CSS的Grid布局實現小雞郵票
標題網址：http://vcdvsql.cn/article34/gjoese.html

成都網站建設公司_創新互聯，為您提供企業建站、定制網站、域名注冊、網站策劃、小程序開發、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯