一、设计思路

前端技术栈主要由以下三部分构成，其中
html：负责页面结构、内容
css：设计页面样式（eg：位置、大小、颜色）
javascript：定义网页行为，比如用户点击后页面该如何响应
以上三者都在浏览器中运行，浏览器可通过http协议和服务器进行通信，把前端代码通过网络协议从服务器上拿到，渲染成我们看到的页面；同时浏览器可以把用户填写的内容、行为通过http协议提交到服务器端

按照前端知识中学习到的，写好前端代码应该让html、CSS、和js各司其职，所以我将设计代码分为3个部分，分别控制内容、样式和行为

二、代码

html部分

我希望在名片上展示的内容有：姓名、性别、学校、年龄、电话和邮件地址，故用一些常见的标签将其组合在一个div盒子中 (图片直接复制到掘金可获得一个网络url)

<div class="card">
        <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b96d5f63fbd949c6a06400f8e1e0cbf5~tplv-k3u1fbpfcp-watermark.image?" alt="Profile Picture">
        <h1>王00</h1>
        <h2>性别：女</h2>
        <p>学校: xx大学</p >
        <p>e-mail: heiwang00@163.com</p >
        <p>Phone: 1234567</p >
</div>

css部分

css部分主要负责设计页面样式（eg：位置、大小、颜色），本名片设计中采用盒模型设置名片样式

.card {
    width: 200px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0px 0px 10px #ccc;
    text-align: center;
    padding: 20px;
    margin: 0 auto;
  }
  
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
  }
  
  h1 {
    font-size: 2em;
    margin-top: 20px;
  }
  
  h2 {
    font-size: 1.5em;
    margin-top: 10px;
    color: #999;
  }
  
  p {
    font-size: 1.2em;
    margin-top: 10px;
    color: #555;
  }

js部分

主要用来定义网页行为，比如用户点击后页面该如何响应

function chbgcolor(){
var card=document.getElementById(".card");
 card.addEventListener("mouseenter", function () { 
card.style["background-color"]="grey";
});
function chback(){
var card=document.getElementById(".card");
 card.addEventListener("mouseleave", function () { 
card.style="color:#000000; background-color:#ffffff;"
});
}

三、运行结果

代码运行结果如下：

在写这个代码的过程中感受到了经过系统学习后写代码和之前毫无基础时写代码的差别，如果时之前写的方式应该就是将所有部分混为一谈，在同一个地方将内容和样式全部实现，这样的代码显然没有分模块的代码优雅

青训营 X 码上掘金 | 设计我的名片