html实战第二例

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

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

```html



    
    
    

```

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

如图所示

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

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

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

```html



    
    
    

```

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

如下图

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

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

```html



    
    
    

```

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

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