CSS盒模型的应用--个人名片的制作（转载）

转载http://blog.csdn.net/gyj_sunny/article/details/70232587

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

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

主要代码如下：

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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

posted @ 2018-03-20 20:27  searain  阅读(615)  评论(0)    收藏  举报