div+css布局实现人物图文介绍卡片效果代码-html代码-BFW代码库

div+css布局实现人物图文介绍卡片效果代码

代码语言：html

代码描述：div+css布局实现人物图文介绍卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
/* :empty {
  display: none;
}
 */
.user-profile {
  display: grid;
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  background-color: hsl(0 0% 50% / 0.2);
  border-radius: 200px 1rem 1rem 200px;
  box-shadow: 0 0 1rem hsl(0 0% 0% / 0.3);

  .name {
    font-size: 1.75rem;
    display: flex;
    gap: 2rem;
    align-items: center;
  }

  .role {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background: hsl(0 0% 0% / 0.5);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .profile-image {
    width: 200px;
    aspect-ratio: 1;
    border-radius: 100vw;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .socials {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    list-style: none;
    margin: 0 1rem;
    margin-left: auto;
    padding: 0;
  }

  .socials svg {
    width: 1.5rem;
  }
}

html {
  color-scheme: dark;
  font-family: system-ui;
}

body {
  margin: 2rem;
}

* {
  box-sizing: border-box;
  margin: 0;
}

.flex-group {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.grid-flow {
  display: grid;
  gap: 1rem;
}

.users {
  display: grid;
  gap: 2rem;
  margin-inline: auto;
  inline-size: min(100% - 2rem, 60ch);
}
</style>


  
  
</head>

<body translate="no">
  <div class="users">

  <div class="user-profile">
    <div class="flex-group">
      <img class='profile-image' src='//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90' alt=''>
      <div class='grid-flow'>
        <div class="flex-group">
          <span class='role'>Manager</span>
          <ul aria-label="social links" class="socials">
            <li><a aria-label='facebook' href="#"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1536 1536">
                  <path fill="currentColor" d="M1248 0q119 0 203.5 84.5T1536 288v960q0 119-84.5 203.5T1248 1536h-188V941h199l30-232h-229V561q0-56 23.5-84t91.5-28l122-1V241q-63-9-178-9q-136 0-217.5 80T820 538v171H620v232h200v595H288q-119 0-203.5-84.5T0 1248V288Q0 169 84.5 84.5T288 0z" />
                </svg></a></li>
            <li><a aria-label='twitter' href="#"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 1600 1280">
                  <path fill="currentColor" d="M1588 152q-67 98-162 167q1 14 1 42q0 130-38 259.5T1273.5 869T1089 1079.5t-258 146t-323 54.5q-271 0-496-145q35 4 78 4q225 0 401-138q-105-2-188-64.5T189 777q33 5 61 5q43 0 85-11q-112-23-185.5-111.5T76 454v-4q68 38 146 41q-66-44-105-115T78 222q0-88 44-163q121 149 294.5 238.5T788 397q-8-38-8-74q0-134 94.5-228.5T1103 0q140 0 236 102q109-21 205-78q-37 115-142 178q93-10 186-50" />
                </svg></a></li>
            <li><a aria-label='instagram' href="#"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1536 1536">
                  <path fill="currentColor" d="M1024 768q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m138 0q0 164-115 279t-279 115t-279-115t-115-279t115-279t279-115t279 115t115 279m108-410q0 38-27 65t-65 27t-65-27t-27-65t27-65t65-27t65 27t27 65M768 138q-7 0-76.5.........完整代码请登录后点击上方下载按钮下载查看