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

来源：互联网发布：东华金云网络股份公司编辑：程序博客网时间：2024/05/17 01:54

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

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

效果图如下：
这里写图片描述

0 0