给海绵宝宝制作名片，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <div class="card">
  <img src="https://img1.baidu.com/it/u=613563727,2840207451&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500" alt="头像">
  <h2>海绵宝宝</h2>
  <p>大家好，我是海绵宝宝！</p>
</div>
<div class="card">
  <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t012b7cb7548eee0f46.jpg" alt="头像">
  <h2>派大星</h2>
  <p>大家好，我是海绵宝宝的好朋友—派大星！</p>
</div>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            
            body {
  display: flex; /*flex布局*/
}
.card {
  width: 220px;                 /* 卡片总宽度 */
  background-color: lightblue;    /* 浅蓝色背景 */
  border: 3px solid green;      /* 绿色边框 */
  border-radius: 20px;          /* 圆角边框 */
  padding: 20px;                /* 内边距（内容与边框间距） */
  margin: 50px 50px;                 /* 外边距（卡片与其他元素的间距） */
  text-align: center;           /* 图片、文字等内容居中 */
}
.card img {
  width: 100px;
  border-radius: 50%;           /* 头像变圆形 */
}

格式化

            
                1
2

            
            // 示例代码
console.log(["Hello 笔.COOL 控制台"])

预览

控制台

清空