HTML+CSS练习小项目——百叶窗-阿里云开发者社区

HTML+CSS练习小项目——百叶窗

2024-06-21 92

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML+CSS练习小项目——百叶窗

先让我们看一下效果：（总代码在文章的最后，读者可以先复制进行体验！）

那么我们如何去实现这样的小案例呢？先看一下我们要实现百叶窗的步骤：

那么接下来我将一步步带你实现百叶窗小项目：（每一步都有详解，读者可以根据详解进行进一步理解！）

（1）将主体放在视口的中央

为了更好的展示我们的小项目，所以我们可以将框架的主体放在视口的中央。

html代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./百叶窗.css">
</head>
 
<body>
    <!-- 设置主体框架 -->
    <div class="container">
        
    </div>
</body>
 
</html>

CSS代码：

/* 简单的重置一下样式 */
* {
    margin: 0px;
    padding: 0px;
}
 
body {
    /* 默认body是没有高度的，这里我们将高度设置为视口高度 */
    height: 100vh;
    /* 添加背景颜色 */
    background-color: #7f8c8d;
    /* 使框架居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.container {
    /* 设置主体的宽高 */
    width: 900px;
    height: 300px;
    /* 并且将主体设置为伸缩盒模型，这在之后将帮助我们实现伸缩效果 */
    display: flex;
    background-color: aliceblue;
}

效果：

在其每一步我们都进行了讲解，读者可以跟随讲解自行理解一下。

（2）向主体中添加元素

在将主体放在视口的中央之后，我们就可以向主体中添加元素了。

html代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./百叶窗.css">
</head>
 
<body>
    <div class="container">
 
        <!-- 向主体中添加元素 -->
        <div class="inner">
            <img src="./image/1.gif">
        </div>
 
        <div class="inner">
            <img src="./image/2.gif">
        </div>
 
        <div class="inner">
            <img src="./image/3.gif">
        </div>
 
        <div class="inner">
            <img src="./image/4.gif">
        </div>
 
        <div class="inner">
            <img src="./image/5.gif">
        </div>
 
        <div class="inner">
            <img src="./image/6.gif">
        </div>
        
        <div class="inner">
            <img src="./image/7.gif">
        </div>
 
    </div>
</body>
 
</html>

CSS代码：无进行任何操作！！！

效果：

（3）使用伸缩盒模型+过渡实现百叶窗

在向主体中添加元素之后，我们就可以对其元素开始进行设置排版了,先让我们内部元素设置好。

html代码：无进行任何操作！！！

CSS代码：

.container {
    /* 设置主体的宽高 */
    width: 900px;
    height: 300px;
    /* 并且将主体设置为伸缩盒模型，这在之后将帮助我们实现伸缩效果 */
    display: flex;
}
 
img {
    /* 给内部的图片设置宽高，方式图片过大内容显示不全，影响观感 */
    width: 400px;
}
 
.container .inner {
    /* 给每个内部div设置溢出隐藏，防止图片溢出div */
    overflow: hidden;
    /* 设置过渡属性和过渡时间 */
    transition: all 1s;
}

效果：

这样我们就完成了内部元素的设置，接下来让我们实现百叶窗效果。

html代码：无进行任何操作！！！

CSS代码：

.container {
    /* 设置主体的宽高 */
    width: 900px;
    height: 300px;
    /* 并且将主体设置为伸缩盒模型，这在之后将帮助我们实现伸缩效果 */
    display: flex;
}
 
img {
    /* 给内部的图片设置宽高，方式图片过大内容显示不全，影响观感 */
    width: 400px;
}
 
.container .inner {
    /* 给每个内部div设置溢出隐藏，防止图片溢出div */
    overflow: hidden;
    /* 设置过渡属性和过渡时间 */
    transition: all 1s;
}

效果：

这样我们就完成了这个百叶窗的小项目。

代码总合：

html代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./百叶窗.css">
</head>
 
<body>
    <div class="container">
 
        <!-- 向主体中添加元素 -->
        <div class="inner">
            <img src="./image/1.gif">
        </div>
 
        <div class="inner">
            <img src="./image/2.gif">
        </div>
 
        <div class="inner">
            <img src="./image/3.gif">
        </div>
 
        <div class="inner">
            <img src="./image/4.gif">
        </div>
 
        <div class="inner">
            <img src="./image/5.gif">
        </div>
 
        <div class="inner">
            <img src="./image/6.gif">
        </div>
 
        <div class="inner">
            <img src="./image/7.gif">
        </div>
 
    </div>
</body>
 
</html>

CSS代码：

/* 简单的重置一下样式 */
* {
    margin: 0px;
    padding: 0px;
}
 
body {
    /* 默认body是没有高度的，这里我们将高度设置为视口高度 */
    height: 100vh;
    /* 添加背景颜色 */
    background-color: #7f8c8d;
    /* 使框架居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.container {
    /* 设置主体的宽高 */
    width: 900px;
    height: 300px;
    /* 并且将主体设置为伸缩盒模型，这在之后将帮助我们实现伸缩效果 */
    display: flex;
}
 
img {
    /* 给内部的图片设置宽高，方式图片过大内容显示不全，影响观感 */
    width: 400px;
}
 
.container .inner {
    /* 给每个内部div设置溢出隐藏，防止图片溢出div */
    overflow: hidden;
    /* 设置过渡属性和过渡时间 */
    transition: all 1s;
}
 
 
/* 设置选中后效果 */
.container .inner:hover {
    /* 鼠标浮动到元素上之后就会使该元素不会进行伸缩，及恢复原来宽度 */
    flex-shrink: 0;
    /* 设置阴影，更加立体 */
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.833);
    /* 设置边框，使效果更加明显 */
    border: 3px solid black;
}

HTML+CSS练习小项目——百叶窗

先让我们看一下效果：（总代码在文章的最后，读者可以先复制进行体验！）

（1）将主体放在视口的中央

效果：

（2）向主体中添加元素

效果：

（3）使用伸缩盒模型+过渡实现百叶窗

效果：

效果：

代码总合：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML+CSS练习小项目——百叶窗

先让我们看一下效果：（总代码在文章的最后，读者可以先复制进行体验！）

（1）将主体放在视口的中央

效果：

（2）向主体中添加元素

效果：

（3）使用伸缩盒模型+过渡实现百叶窗

效果：

效果：

代码总合：

热门文章

最新文章

相关课程

相关电子书

相关实验场景