HTML是一种标记语言，是我们平时书写网页的基础。而CSS则是网页的样式表，由它来决定网页的样式、布局、颜色等等。今天，我们为大家准备了一份HTML加CSS表白源代码大全，快来看看吧！



//HTML部分
<html>
  <head>
    <title>我喜欢你</title>
    <style>
      //CSS部分
      body{
        background-color: pink;
        font-family: Arial,sans-serif;
      }
      
      h1{
        color: white;
        text-align: center;
        text-shadow: 2px 2px 6px black;
      }
      
      p{
        font-size: 20px;
        text-align: center;
        margin-top: 50px;
      }
      
      .heart{
        color: #ff69b4;
        font-size: 50px;
        line-height: 1;
      }
      
      .heart:before,.heart:after{
        position: relative;
        display: block;
        content: "";
        width: 26px;
        height: 16px;
        background-color: #ff69b4;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
      }
      
      .heart:before{
        top: -11px;
        left: 8px;
      }
      
      .heart:after{
        top: -21px;
        left: -8px;
      }
    </style>
  </head>
  <body>
    <h1>我喜欢你</h1>
    <p>
      <i class="heart"></i>
      <i class="heart"></i>
      <i class="heart"></i>
      <i class="heart"></i>
      <i class="heart"></i>
    </p>
  </body>
</html>

代码解析：

我们首先在

标签内写入样式表，设置整个页面的背景颜色为粉色，字体风格为Arial或sans-serif。然后设置

的样式，将字体颜色设置为白色，文字居中显示，并给文字 添加黑色阴影，使其更加突出。接着设置

标签的样式，设置字体大小为20px，文字居中，并在顶部留出50px的空白。

接下来就是关键代码了。我们要用到伪元素:before和:after，通过旋转45度来进行拼接，形成爱心的形状。具体内容可以参考代码中的注释。

最后，在

标签内添加了五个标签，它们的类名设置为"heart"，即为我们刚刚定义的爱心形状。将五个标签放在一起，就可以形成一颗完整的爱心啦！向心爱的人表白，送上这份特别的HTML加CSS表白源代码大全吧！

html加css表白源代码大全的样式，将字体颜色设置为白色，文字居中显示，并给文字添加黑色阴影，使其更加突出。接着设置

的样式，将字体颜色设置为白色，文字居中显示，并给文字 添加黑色阴影，使其更加突出。接着设置

相关推荐