今天要学习的是如何运用盒子模型制作个人名片或者三国杀。
今天看了两三个小时,对内容还不算非常的了解,只是微弱大致的了解而已,根据理解简单的完成了一个个人名片的制作。
效果图如上,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day4</title>
<style type="text/css">
.bg{
margin-top: 20px;
margin-left: 20px;
width: 400px;
height: 200px;
border-style: solid;
background-color: #e1f4f8;
}
.bg1{
position:absolute;
top:30px;
left: 40px;
}
.bg2{
position:absolute;
top: 80px;
left: 240px;
}
</style>
</head>
<body>
<div class="bg">
<div class="bg1">
<img src="photo.jpg" alt="touxiang">
</div>
<div class="bg2">
<h3>BOBO</h3>
<p>xxxxxxxxxx有限公司</p>
<p>xxxxxxxxxx企业大厦</p>
</div>
</div>
</body>
</html>
慢慢再深入的学习吧,加油!!