结合盒子模型，发布一张你的卡片

叫我姜同学

于 2017-04-19 20:57:40 发布

阅读量465

点赞数 1

分类专栏： IM Web训练营前端文章标签：图片

本文为 @叫我姜同学原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/jiangcheng2016/article/details/70245210

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

IM Web训练营

5 篇文章 0 订阅

订阅专栏

结合盒子模型，发布一张你的卡片
通过对图片进行定位，对其描述实现下图所示效果
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人名片</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            /*background:url(https://img-blog.csdn.net/20170419205321811) no-repeat;*/
        }
        .border{
            position: absolute;
            left: 40%;
            right: 60%;
            width: 600px;
            height: 450px;
            margin:80px 0 0 -200px;
            border:3px solid black;
            background: url(images/2.jpg) no-repeat;

        }
        .descrption{
            position: absolute;
            left: 40%;
            right: 60%;
            width: 600px;
            height: 170px;
            margin:420px 0 0 -200px;
            /*background: gray;*/
            text-align: center;
            font-size: 18px;
            font-family: "楷体";
        }
    </style>
</head>
<body>
    <div class="border">

    </div>
    <div class="descrption">
            <p>夕阳的美在于它不过于的绚灿，在于它和谐、宁静、柔美</p>
            <p>如一位情窦初开的少女含羞微笑的容颜，让人感觉美丽后面的心悸和动人.</p>
        </div>
</body>
</html>