案例:
图片资源:
参考代码:
<!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>
更多推荐
HTML5网页设计基础——用户中心
发布评论