写四个HTML和css的小案例

非常感谢您的提问！以下是四个 HTML 和 CSS 小案例。

1. 垂直居中文字

HTML 代码：

<div class="container">
    <p class="center">Hello World!</p>
</div>

CSS 代码：

.container {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center {
    text-align: center;
}

2. 渐变背景色

HTML 代码：

<div class="container">
    <p>Hello World!</p>
</div>

CSS 代码：

.container {
    background: linear-gradient(to right, #ffd194, #70e1f5);
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    color: white;
    font-size: 36px;
}

3. 图片缩放

HTML 代码：

<div class="container">
    <img src="https://www.w3schools.com/w3images/fjords.jpg">
</div>

CSS 代码：

.container {
    width: 50%;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

4. 悬浮效果

HTML 代码：

<div class="container">
    <div class="box">
        <img src="https://www.w3schools.com/w3images/fjords.jpg">
        <div class="overlay">
            <p>Hello World!</p>
        </div>
    </div>
</div>

CSS 代码：

.container {
    width: 50%;
}

.box {
    position: relative;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s;
}

.box:hover .overlay {
    opacity: 1;
}