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

最新推荐文章于 2024-03-31 16:56:24 发布

Ivy_ZW

最新推荐文章于 2024-03-31 16:56:24 发布

阅读量535

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/Ivy_ZW/article/details/70234609

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

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

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