html实战第二例

buame

于 2024-02-18 22:50:28 发布

阅读量1k

点赞数 19

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_67776134/article/details/136160080

版权

今天我们试着做一个爱心的样子

下面是一个简单的HTML代码，用于在网页上显示一个爱心形状：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱心形状</title>
    <style>
        .heart {
            width: 100px;
            height: 90px;
            background-color: red;
            position: relative;
            transform: rotate(-45deg);
            margin: 50px;
        }
        .heart::before,
        .heart::after {
            content: '';
            width: 100px;
            height: 90px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
        .heart::before {
            top: -50px;
            left: 0;
        }
        .heart::after {
            top: 0;
            right: -50px;
        }
    </style>
</head>
<body>

<div class="heart"></div>

</body>
</html>
```

这段代码创建了一个名为`.heart`的`div`元素，并通过CSS设置了样式，使其看起来像一个爱心。`.heart`类定义了爱心的形状和颜色，而`::before`和`::after`伪元素分别创建了爱心的上半部分和下半部分。

如图所示

我们只是简单的做了一个爱心的模样，可以通过右键点击屏幕-审查元素（不同的浏览器会有不同的选项）在浏览器中看到我们网页的源代码

现在让我们把他居中显示看着更好看一点

要将爱心居中，你可以使用CSS的`margin`属性来设置水平居中，以及`transform`属性来调整位置。以下是修改后的代码，它将爱心居中显示在页面上：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱心形状居中</title>
    <style>
        .heart {
            width: 100px;
            height: 90px;
            background-color: red;
            position: relative;
            transform: rotate(-45deg);
            margin: 0 auto; /* 水平居中 */
            margin-top: 50px; /* 垂直偏移 */
        }
        .heart::before,
        .heart::after {
            content: '';
            width: 100px;
            height: 90px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
        .heart::before {
            top: -50px;
            left: 0;
        }
        .heart::after {
            top: 0;
            right: -50px;
        }
    </style>
</head>
<body>

<div class="heart"></div>

</body>
</html>
```

在这个修改中，`.heart`类的`margin`属性被设置为`0 auto`，这表示元素的左边距和右边距设置为自动，即水平居中。同时，为了将爱心垂直居中，我添加了`margin-top: 50px;`，这个值可以根据你的页面布局进行调整。

如下图

让我们给爱心加上一点小把戏让他更好看一些

我们可以给爱心增加一个阴影效果并且改变一下位置，我们可以使用CSS的`box-shadow`属性。以下是修改后的代码，添加了一个阴影效果：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱心形状</title>
    <style>
        .heart {
            width: 100px;
            height: 90px;
            background-color: red;
            position: absolute; /* 改为绝对定位 */
            top: 50%; /* 距离顶部50% */
            left: 50%; /* 距离左侧50% */
            transform: translate(-50%, -50%); /* 向上和向左偏移自身宽高的一半 */
            margin: 0 auto; /* 水平居中 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
        }
        .heart::before,
        .heart::after {
            content: '';
            width: 100px;
            height: 90px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
        .heart::before {
            top: -50px;
            left: 0;
        }
        .heart::after {
            top: 0;
            right: -50px;
        }
    </style>
</head>
<body>

<div class="heart"></div>

</body>
</html>
```

在这个修改中，`.heart`类的`box-shadow`属性被设置为`0 4px 8px rgba(0, 0, 0, 0.3);`。这个属性定义了一个黑色的阴影效果，其中`0 4px 8px`定义了阴影的偏移量和模糊半径，`rgba(0, 0, 0, 0.3)`定义了阴影的颜色和透明度。可以根据自己的喜好自行修改，根据页面审查元素功能可以查看适合修改的代码和修改后的成果，但是记得要复制粘贴到你的vscode里。

大神不是一日炼成的，都是通过点点滴滴的小项目熬成厉害的人。

buame

关注

19
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
html实战第二例

这个属性定义了一个黑色的阴影效果，其中`0 4px 8px`定义了阴影的偏移量和模糊半径，`rgba(0, 0, 0, 0.3)`定义了阴影的颜色和透明度。在这个修改中，`.heart`类的`margin`属性被设置为`0 auto`，这表示元素的左边距和右边距设置为自动，即水平居中。`.heart`类定义了爱心的形状和颜色，而`::before`和`::after`伪元素分别创建了爱心的上半部分和下半部分。我们可以给爱心增加一个阴影效果并且改变一下位置，我们可以使用CSS的`box-shadow`属性。
复制链接

扫一扫