结合盒子模型发布一张名片
Day4的任务是: 结合盒子模型,发布一张你的卡片(可选择三国杀,动物卡或其他类型卡片,也可制作个人名片。卡片需要包含边框,内部图片和一部分文字介绍,制作三国杀卡片可以简化其原本构造。
这里我做了一个简单的名片。
HTML代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Day04</title>
<link rel="stylesheet" type="text/css" href="04.css">
</head>
<body>
<div class="myBox">
<img src="dog.jpg" align="left">
<p>姓名:XXX</p>
<p>部门:XXXXX</p>
<p>职务:XXXXX</p>
</div>
</body>
</html>
CSS代码如下:
p{
font-family: "微软雅黑";
font-size: 20px;
}
img{
width: 100px;
height: 150px;
padding: 15px;
}
.myBox{
width: 300px;
height: 200px;
background-color: #F5F5DC;
border-style: solid;
border-width: 3px;
border-color: black;
padding: 10px;
}
效果图如下: