CSS盒模型的应用--个人名片的制作

来源：互联网发布：郫都区人民政府知乎编辑：程序博客网时间：2024/05/05 13:03

 本篇文章重点介绍利用盒模型实现个人名片的制作。在CSS中，盒模型的内容至关重要，网页内容往往以块的形式出现，而盒模型则是针对块的一种模型结构。盒模型给出内边距padding，外边距margin，边框border，将网页结构模块化，对块及内容进行设置。   利用盒模型实现个人名片，个人名片往往简洁得体，可以有效传播信息，好的布局和背景设置是很重要的，本文实现了一个css盒模型的实例应用--个人名片的实现。

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

主要代码如下：

<DOCTYPE html><html><head><title>个人名片</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="MP.css"/></head><body><div class="c1"><div class="c2">    <span>Name</span><br>    职位--学生</div><div class="c3">    地址：湖南省长沙市<br>    电话：11111111111<br>    邮箱：11111111111<br>    传真：11111111111</div></div></body></html>

css样式如下：

`body
{
font-family:”Comic Sans MS”, cursive;
font-size:10px;
text-align:center;
}
span
{
font-family:”Times New Roman”, Times, serif;
font-size:20px;
font-weight:900;

}
.c1
{
width:400px;
height:240px;
border:solid 3px gray;
background-image:url(1.png);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position:absolute;
}
.c2
{
width:120px;
height:50px;
border-bottom:outset 1.5px gray;
position:absolute;
top:30px;
left:10px;

}
.c3
{
width:120px;
height:80px;
padding-top:10px;
border-top:outset 1px gray;
position:absolute;
top:140px;
left:200px;
text-align:left;
}
`

0 0