[分享]css做出一个表白网页

发布于 2024-11-11 15:56:53

今天我们来学习如何使用CSS编写一个简单的表白网页。我们将使用HTML和CSS来共同完成这个任务。

<!DOCTYPE html>
<html>
<head>
    <title>表白网页</title>
    <style>
        body {
            background-color: #F8BBD0;
            text-align: center;
            margin: 0;
        }
        h1 {
            font-size: 50px;
            color: #E91E63;
            margin-top: 80px;
        }
        p {
            font-size: 30px;
            color: #212121;
            margin-top: 30px;
            line-height: 1.6;
        }
        .heart {
            width: 50px;
            height: 50px;
            position: relative;
            margin: 0 auto;
            transform: rotate(45deg);
        }
        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            top: 0;
            left: 25px;
            width: 25px;
            height: 45px;
            background-color: #E91E63;
            border-radius: 25px 25px 0 0;
        }
        .heart:before {
            transform: rotate(-45deg);
        }
        .heart:after {
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <h1>我喜欢你</h1>
    <p>我不是很擅长表达，但我真的很喜欢你，愿意成为你生命中的伴侣。</p>
    <div class="heart"></div>
</body>
</html>

如上所述，我们使用了以下CSS属性来使网页看起来更美观：

body {
    background-color: #F8BBD0;
    text-align: center;
    margin: 0;
}

这样我们可以设置整个页面的背景颜色，文本对齐方式和页面的外边距。

h1 {
    font-size: 50px;
    color: #E91E63;
    margin-top: 80px;
}

这是标题的样式，我们用内联样式设置了字体大小、颜色和上外边距。

p {
    font-size: 30px;
    color: #212121;
    margin-top: 30px;
    line-height: 1.6;
}

我们使用这些样式属性来调整段落的大小、颜色、上外边距和行高。

.heart {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 0 auto;
    transform: rotate(45deg);
}
.heart:before,
.heart:after {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    width: 25px;
    height: 45px;
    background-color: #E91E63;
    border-radius: 25px 25px 0 0;
}
.heart:before {
    transform: rotate(-45deg);
}
.heart:after {
    transform: rotate(45deg);
}

最后我们设置了心形图案的位置和旋转，并使用样式属性来创建心形。

现在我们已经完成了一个简单而浪漫的表白网页，你可以通过自己的方式去改进它。

css 教程