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

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

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值