卡卡網(wǎng)

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

demodownload

模板介紹

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

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>張頌文，中國內(nèi)地影視男演員、表演指導(dǎo)，畢業(yè)于北京電影學(xué)院。 2023年1月14日，領(lǐng)銜主演的反黑刑偵劇《狂飆》播出，在劇中飾演一個從卑微渺小的底層魚販變成了涉黑組織的頭目高啟強(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>

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

頭部div代碼很簡單：

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

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

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實現(xiàn)的人物簡介卡，結(jié)構(gòu)簡單清晰，易修改，易使用。

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