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

最新推荐文章于 2024-07-01 17:42:31 发布

gyj_sunny

最新推荐文章于 2024-07-01 17:42:31 发布

阅读量4.7k

点赞数 5

分类专栏： HTML CSS 文章标签： css html 盒模型网页设计

本文链接：https://blog.csdn.net/gyj_sunny/article/details/70232587

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

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

gyj_sunny

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型的应用--个人名片的制作

本篇文章介绍如何使用html与css制作个人名片。一个得体的名片往往代表着自身或者企业的形象，一个好的设计至关重要，当然，将设计师的设计进行也使用到网页设计中的知识。本篇文章重点介绍利用盒模型实现个人名片的制作。在CSS中，盒模型的内容至关重要，网页内容往往以块的形式出现，而盒模型则是针对块的一种模型结构。盒模型给出内边距padding，外边距margin，边框border，将网页结构模块化，对块
复制链接

扫一扫

专栏目录