设计一个简单的用户界面
为了更方便寻找,我给每个盒子都定义了class命名标签,在后期制作网页可以清楚的记得每一个盒子的位置。详细了解请砍代码图
下面是代码块:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易用户设计</title>
<style>
body {
margin:0 auto; padding:0;
}
.box1{
width: 150px;
height: auto;
}
.box1 div{
padding-left: 10px;
margin: 3px auto;
border-style: solid;
border-width:2px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box1">
<img src="img/user.jpg">
<div class="box3">
<p>用户姓名:</p>
</div>
<div class="box4">
<p>学习进度:</p>
</div>
<div class="box5">
<p>兴趣爱好:</p>
</div>
<div class="box6">
<p>参与的群:</p>
</div>
</div>
</body>
</html>