web打出带有边框分类的个人简介
时间: 2023-08-31 13:06:30 浏览: 45
您可以使用HTML和CSS来创建带有边框分类的个人简介页面。下面是一个简单的示例:
HTML代码:
```
<div class="profile">
<h2>个人简介</h2>
<div class="personal-info">
<ul>
<li><strong>姓名:</strong>张三</li>
<li><strong>性别:</strong>男</li>
<li><strong>年龄:</strong>30岁</li>
<li><strong>职业:</strong>软件工程师</li>
</ul>
</div>
<div class="skills">
<h3>技能</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</div>
</div>
```
CSS代码:
```
.profile {
border: 1px solid #ccc;
padding: 20px;
}
.profile h2 {
margin-top: 0;
}
.personal-info {
margin-bottom: 20px;
}
.personal-info ul {
list-style: none;
margin: 0;
padding: 0;
}
.personal-info li {
margin-bottom: 10px;
}
.skills h3 {
margin-top: 0;
}
.skills ul {
list-style: none;
margin: 0;
padding: 0;
}
.skills li {
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
```
在这个示例中,我们使用了`<div>`元素来创建一个带有边框的容器,并使用CSS样式来设置边框和内边距。`<h2>`和`<h3>`元素用于标题,`<ul>`和`<li>`元素用于项目列表。我们还使用CSS样式来设置项目列表和技能标签的样式。
您可以将此示例代码复制到一个HTML文件中,然后在浏览器中打开该文件以查看效果。