Kung paano gumawa ng: pahina ng "pagbintang ng pangkat"
Matuto kung paano gumawa ng tugon sa pahina ng "pagbintang ng pangkat" gamit ang CSS.
Ang pahina o bahagi ng "pagbintang ng pangkat" ay karaniwang ginagamit upang ilista ang mga may-ari sa kumpanya at magbigay ng espesyal na impormasyon ng pakikipag-ugnayan:

Bill Gates
CEO & Founder
Ilang teksto na naglalarawan sa akin lorem ipsum ipsum lorem.

Elon Musk
Art Director
Ilang teksto na naglalarawan sa akin lorem ipsum ipsum lorem.

Kung paano gumawa ng pahina ng pagbintang ng pangkat
Hinapak sa unang hakbang - Magdagdag ng HTML:
<div class="row"> <div class="column"> <div class="card"> <img src="img1.jpg" alt="Jane" style="width:100%"> <div class="container"> <h2>Bill Gates</h2> <p class="title">CEO & Founder</p> <p>Some text that describes me lorem ipsum ipsum lorem.</p> <p>[email protected]</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <div class="card"> <img src="img2.jpg" alt="Mike" style="width:100%"> <div class="container"> <h2>Elon Musk</h2> <p class="title">Art Director</p> <p>Some text that describes me lorem ipsum ipsum lorem.</p> <p>[email protected]</p> <p><button class="button">Contact</button></p> </div> </div> </div> <div class="column"> <div class="card"> <img src="img3.jpg" alt="John" style="width:100%"> <div class="container"> <h2>Steve Jobs</h2> <p class="title">Designer</p> <p>Some text that describes me lorem ipsum ipsum lorem.</p> <p>[email protected]</p> <p><button class="button">Contact</button></p> </div> </div> </div> </div>
第二步 - 添加 CSS:
/* 并排的三列 */ .column { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } /* 在小屏幕上,将列上下显示而不是并排显示 */ @media screen and (max-width: 650px) { .column { width: 100%; display: block; } } /* 添加一些阴影以创建卡片效果 */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } /* 容器内的一些左右内边距 */ .container { padding: 0 16px; } /* 清除浮动 */ .container::after, .row::after { content: ""; clear: both; display: table; } .title { color: grey; } .button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; } .button:hover { background-color: #555; }