卡卡網(wǎng)

人物簡(jiǎn)介是常用頁(yè)面，如何設(shè)計(jì)一張好看的人物簡(jiǎn)介網(wǎng)頁(yè)？本文給你介紹一個(gè)。

demodownload

模板介紹

純CSS實(shí)現(xiàn)的網(wǎng)頁(yè)設(shè)計(jì)，頭部為一張寬度100%的背景大圖，頭部中間為一張使用了圓形設(shè)計(jì)的人物頭像小圖，網(wǎng)頁(yè)中間為正文部分，網(wǎng)頁(yè)底部為個(gè)人社交媒體賬號(hào)鏈接。

HTML代碼

<div class="profile-card">
  <div class="profile-header"> <img src="1.jpg" alt=""> </div>
  <div class="profile-body">
    <div class="author-img"> <img src="2.jpg" alt=""> </div>
    <div class="name">張頌文</div>
    <div class="intro">
      <p>張頌文，中國(guó)內(nèi)地影視男演員、表演指導(dǎo)，畢業(yè)于北京電影學(xué)院。 2023年1月14日，領(lǐng)銜主演的反黑刑偵劇《狂飆》播出，在劇中飾演一個(gè)從卑微渺小的底層魚(yú)販變成了涉黑組織的頭目高啟強(qiáng)。 </p>
    </div>
    <div class="social-icon">
      <ul>
        <li>
          <a href="#">
            <div class="socal-media-1"></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="socal-media-2"></div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="socal-media-3"></div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

整個(gè)網(wǎng)頁(yè)盒子為一個(gè)div，其class值為profile-card。

頭部div代碼很簡(jiǎn)單：

<div class="profile-header">
  <img src="1.jpg" alt="">
</div>

內(nèi)容div結(jié)構(gòu)也很清晰，第一個(gè)div為人物頭像，第二個(gè)div為人物姓名，第三個(gè)div為人物介紹，第四個(gè)div為個(gè)人社交媒體。

CSS代碼

.profile-card {
  width: 400px;
  height: auto;
  text-align: center;
  margin: 20px auto;
  box-shadow: 0px 0px 18px #ccc;
}

.profile-card .profile-header {
  height: 180px;
}

.profile-card .profile-body {
  background-color: var(--white);
  padding: 20px 40px 40px 40px;
}

.profile-card .profile-body .author-img {
  margin-top: -20px;
  margin-bottom: 20px;
}

.profile-card .profile-body .author-img img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  padding: 5px;
  background-color: var(--white);
}

.profile-card .profile-body .name {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.profile-card .profile-body .intro {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin: 20px  0px 30px  0px;
}

.socal-media-1, .socal-media-2, .socal-media-3 {
  background-position: -2px -2px;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

.socal-media-1 {
  background-image: url(1.png);
}

.socal-media-2 {
  background-image: url(2.png);
}

.socal-media-3 {
  background-image: url(3.png);
}


.social-icon ul {
  list-style-type: none;
}

.social-icon ul li {
  display: inline-block;
}

.social-icon ul li a {
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border: 0px solid #ddd;
  display: block;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.social-icon ul {
  margin: 0;
  padding: 0;
}

.profile-card設(shè)置人物介紹卡寬度，這里是400px。

.profile-header設(shè)置人物介紹卡頭部高度，這里是180px。

.profile-body設(shè)置人物介紹卡內(nèi)容盒子樣式。

.author-img設(shè)置人物頭像樣式。

.name設(shè)置人物名字樣式。

.intro設(shè)置人物介紹樣式。

.socal-media-1, .socal-media-2等設(shè)置人物社交媒體。

總結(jié)

本文介紹了CSS實(shí)現(xiàn)的人物簡(jiǎn)介卡，結(jié)構(gòu)簡(jiǎn)單清晰，易修改，易使用。

標(biāo)簽: 網(wǎng)頁(yè)模板