案例：
图片资源：
参考代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.wai{
width:150px;
margin: 50px auto;
}
p{
font-weight: 500;
width：150px;
height:30px;
line-height: 30px;/*当行高和边距相同时，文字水平居中 */
border: 2px solid #999;/* <p>标签的边框及样式 */
margin: 1px; /* 每个<p>标签设置外边距 */
padding-left: 10px;/* <p>左内边距为10px */
}
</style>
<body>
<div class="wai">
<div>
<img src="../user.jpg">
</div>
<div>
<p>用户姓名：</p>
<p>学习进度：</p>
<p>兴趣爱好：</p>
<p>参与的群：</p>
</div>
</div>
</body>
</html>
本文介绍了一个简单的HTML页面布局，用于展示用户的个人信息，包括头像、姓名等基本信息，并通过CSS进行了美观的样式设置。
扫一扫
3876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
