您的位置：首页 > Web前端

前端小白进阶Day4-结合盒子模型发布一张卡片

2017-04-19 00:33 399 查看

结合盒子模型发布一张名片

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;
}

效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航