我的名片创作实战

当青训营遇上码上掘金

1.技术选择

• HTML
• CSS
• JavaScript

2.我的名片预览

3.我的名片结构

左边是一个可切换的tab菜单，右边是根据tab菜单的切换来显示对应的内容。

HTML/CSS

在写js之前先把html结构完成，用一个盒子装左右两边板块，要实现两个盒子横向排列，用到了flex布局方式，也可以用display:inline实现。在给定菜单栏宽度和高度，让样式更加美观。在右边的内容盒子里用来装基本信息和头像，头像和文字同样也实现了并排显示，可以用前面所述的方法实现。对于头像部分为了让头像更美观我们通常都会让它显示一个圆，这里就用到了border-rdius：50%；来设置图片圆角，为了让图片自适应这个宽度和高度用到了 object-fit: cover样式。为了菜单栏点击有明显的效果，我们先写一个点击后的样式。

  <section class="content">
    <div class="header">
      <div class="current">
        我的名片
      </div>
      <div>我的座右铭</div>
    </div>
    <div id='car'>
      <div class="dom dom1">
        <!-- car1 -->
        <div class="nameBox">
          姓名:草莓味的海绵宝宝
          <img class="avater" src="https://p3-passport.byteimg.com/img/user-avatar/98a9a77fcbc60d03edb5cde5bc39c080~180x180.awebp" alt=""/>
        </div>
        <div>
          职业：前端忠实热爱者
        </div>
      </div>
    </div>
    <div class="dom">
      <!-- car2 -->
      <div class="dom2_text">心想势必成</div>
    </div>
</div>
</section>
</div>
</body>
</html>

body,
html,
div {
    padding: 0;
    margin: 0;
}

.header {
   width: 200px;
}
.content {
    border: solid 2px #e0e0e0;
    background-color: white;
    margin-top: 50px;
    display: flex;
    margin-left: 50%;
    width: fit-content;
}

.header div {
    height: 60px;
    background-color: #f5f5f5;
    /*居中*/
    text-align: center;
    line-height: 60px;
    padding:20px;
    color: #262626;
}

.header div.current {
    background-color: transparent;
    color: #3cb46d;
}
#car {
    margin: 2rem;
}
.dom {
    display: none;
    width: 400px;

}
.dom1{
  display: block;
}
/* 信息 */
.nameBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avater{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 让图片自适应 */
  object-fit: cover;
}
/* dom2 */
.dom2_text{
    display: flex;
    height: 100%;
    align-items: center;
}

4. JS 实现点击切换

为了实现tab菜单和内容的动态点击切换，用js动态为菜单添加样式，控制对应内容的显隐。

第一步用js Dom操作获取菜单和内容盒子

let as = document.getElementsByClassName('header')[0].getElementsByTagName('div');
let contents = document.getElementsByClassName('dom');

第二步 遍历每一个菜单，为菜单添加点击事件，当菜单点击后清除每一个菜单的选中类名，为点击的菜单盒子加上选中状态的类名

for (let i = 0; i < as.length; i++) {
                let a = as[i];
                a.id = i;
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                    }
                    this.className = 'current';
                }
            }

第三步 控制对应内容的显隐，与第二部原理相同

 for (let i = 0; i < as.length; i++) {
                let a = as[i];
                a.id = i;
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                        contents[j].style.display = 'none';
                    }
                    this.className = 'current';
                    contents[this.id].style.display = 'block';
                }
            }

好了，这样一个简单的个人名片就制作完成了。