用户个人中心简易设计

最新推荐文章于 2023-03-12 01:57:05 发布

weixiaosamoyed

最新推荐文章于 2023-03-12 01:57:05 发布

阅读量757

点赞数 1

文章标签： css html dw

本文链接：https://blog.csdn.net/weixiaosamoyed/article/details/122752898

版权

设计一个简单的用户界面在这里插入图片描述
为了更方便寻找，我给每个盒子都定义了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>