制作一个简易名片

最新推荐文章于 2024-09-24 17:03:55 发布

原创最新推荐文章于 2024-09-24 17:03:55 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#练习

html/css 专栏收录该内容

1 篇文章

订阅专栏

本文通过实践操作，引导读者掌握HTML基本标签的应用及CSS样式在布局中的运用，从而制作出一个简洁的名片。

制作一个简易名片，简单了解html标签的使用和css样式的布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sweet名片</title>
</head>
<style type="text/css">
body{
    background-image: url("2.jpg");
}
div{
    width: 400px;
    height: 300px; 
    background-color: white;

    margin:260px auto;
    border-radius: 10px;
}
img{
    width: 150px;
    height: 40px;
    margin: 20px 15px;
}
h1{
    margin: 0px 15px;
    font-family: 宋体;
}
.png{
    width: 150px;
    height: 150px;
    border-radius:80px;
    margin:-50px 0px 20px 210px;
}
p{
    margin:-90px 100px 20px 20px;

}
</style>

<body>
    <div>
        <img src="1.png">
        <h1>sweet</h1>
        <img class="png" src="3.png">
        <p>
        学生<br><br>
        手机：10086<br>
        QQ:1234567890<br>
        电子邮箱：1234567890@qq.com<br>
        </p>
    </div>



</body>
</html>