本篇文章重点介绍利用盒模型实现个人名片的制作。在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;
}
`