CSS怎样实现折叠标题，思路和代码是什么？

发布时间：2022-01-11 11:03:13 所属栏目：系统来源：互联网

导读：这篇文章给大家分享的是CSS怎样实现折叠标题的思路及代码。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。折叠标题是向用户显示重要信息的绝佳解决方案，例如特价

　　    这篇文章给大家分享的是CSS怎样实现折叠标题的思路及代码。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。

　　    折叠标题是向用户显示重要信息的绝佳解决方案，例如特价优惠和密钥通知。许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。

　　    折叠标题的工作方式类似于视差效果。折叠标题的背景保持固定，以便当用户向下滚动页面时，其下方的内容可以在其上方流动。在本教程中，我们将向你展示如何创建以下折叠标题效果：

　　    该演示包括三个部分：

　　带有黑色背景的固定标题，位于页面顶部，包含主菜单。
　　带蓝色背景的折叠标题，包含有关特价的额外信息。
　　用户滚动到折叠标题的白色背景的其余内容。
　　    折叠标头非常适合用户体验。用户可以在想要查看特殊信息时随时滚动页面，但在阅读其余内容时不会分散他们的注意力。

　　    现在，让我们看看如何逐步创建折叠标题。

　　    1.创建HTML

　　    HTML包括三个主要部分：

　　    用于固定顶部菜单栏中，.banner为折叠头，.article用于内容的其余部分。以下是代码的外观：

　　 <div class="container">
　　        <header>
　　            <nav>
　　                <ul class="menu">
　　                    <li class="logo"><a href="#">Dev & Design</a></li>
　　                    <li><a href="#">Home</a></li>
　　                    <li><a href="#">Blog</a></li>
　　                    <li><a href="#">About</a></li>
　　                    <li><a href="#">Contact</a></li>
　　                </ul>
　　            </nav>
　　        </header>
　　        <div class="banner">
　　            <div>
　　                <h2 class="banner-title">Don't Miss Out On Our Next Webinar</h2>
　　                <p class="banner-desc">Sign Up Now and Choose an Ebook for Free</p>
　　            </div>
　　            <button class="btn-signup" type="button" onclick="location.href='#'">
　　                   Go to Webinars »
　　            </button>
　　        </div>
　　        <article class="article">
　　            <p>...</p>
　　        </article>
　　    </div>
　　    2.使用CSS添加基本样式

　　    让我们通过定义一些重置和基本样式来启动CSS，例如：

　　* {
　　 box-sizing: border-box;
　　 margin: 0;
　　 padding: 0;
　　 font-family: sans-serif;
　　 color: #222;
　　}
　　a {
　　 text-decoration: none;
　　}
　　ul {
　　 list-style-type: none;
　　}
　　    3.放置顶部菜单栏

　　    要将固定菜单栏定位在页面顶部，你需要将

　　    元素的位置设置为fixed，将z-index设置为大于零的值。由于z-index默认为auto，因此它只需要高于元素父级的z-index值。下面的CSS使用99，因为它可能会保持高于

　　元素的任何父级：

　　header {
　　 height: 70px;
　　 background: #222;
　　 position: fixed;
　　 width: 100%;
　　 z-index: 99;
　　}
　　    z-index: 99; 规则允许顶部菜单栏保持在所有元素的顶部，即使折叠标题完全折叠并且其余内容到达页面顶部。

　　    4.设置菜单样式

　　    虽然创建折叠标题不需要以下CSS规则，但你可以使用顶部菜单设置样式：

　　nav {
　　 height: inherit;
　　}
　　.menu {
　　 display: flex;
　　 height: inherit;
　　 align-items: center;
　　 padding: 0 20px;
　　}
　　.menu li {
　　 padding: 0 10px;
　　}
　　.menu a {
　　 color: white;
　　}
　　.logo {
　　 flex: 1;
　　 font-size: 22px;
　　}
　　    .nav和menu项继承

　　    （100％）的宽度，以便它们也可在整个屏幕上跨越。

　　    此外，.menu还使用了flexbox，因此菜单项可以水平排成一行，而align-items属性则垂直居中。

　　    你还可以看到我们添加了flex：1; CSS规则到.logo元素。该flext属性是一个flex-grow, flex-shrink, and flex-basis的简写。当它只有一个值时，它指的是flex-grow，而其他两个属性保持默认值。

　　    当flex-grow设置为1时，表示给定元素获得Flex容器中的所有额外空间。因此，当菜单项保持在右侧时，menu元素被推到容器的左侧。

　　    5.放置折叠标题

　　    折叠标题也具有固定位置，就像顶部菜单栏一样。但是，它没有获得z-index值，因此当用户向下滚动页面并且其余内容逐渐覆盖横幅时，它可以“折叠”。

　　.banner {
　　 /* for positioning */
　　 width: 100%;
　　 height: 300px;
　　 position: fixed;
　　 top: 70px;
　　 background: linear-gradient(45deg, #98cbff, #98ffcb);

　　 /* for content alignment */
　　 display: flex;
　　 flex-direction: column;
　　 justify-content: space-evenly;
　　 align-items: center;
　　}
　　    如你所见，我们再次使用flexbox来对齐折叠标题内的内容。现在，它是一个基于列的flex布局，允许你使用justify-content和align-items属性轻松地垂直和水平对齐元素。

　　    6.设置折叠标题的样式

　　    虽然这不是折叠标题效果的一部分，但这里是.banner元素的后代（标题，描述和按钮）在上面的演示中的样式：

　　.banner-title {
　　 font-size: 32px;
　　 margin-bottom: 10px;
　　 text-align: center;
　　}
　　.banner-desc {
　　 font-size: 22px;
　　 text-align: center;
　　}
　　.btn-signup {
　　 color: white;
　　 background-color: #0056ab;
　　 border: 0;
　　 padding: 15px 25px;
　　 font-size: 16px;
　　 cursor: pointer;
　　}
　　    在下面的屏幕截图中，你可以看到我们的演示在此刻的样子。由于顶部菜单栏和折叠标题都有固定位置，因此它们位于页面顶部并覆盖内容的上半部分。我们将通过设置其余内容的样式，使标题在下一步中可折叠。

　　
　　    7.设计其余内容的样式

　　    要在滚动时使标题折叠，你需要做四件事：

　　最重要的是，你需要为其余内容设置背景，以便它可以在可折叠标头的顶部流动。请记住，此效果与视差效果类似; 不同的背景需要互相覆盖。
　　在演示中，我们使用了纯白色背景。你始终需要在流动内容上设置背景以使此效果起作用（否则折叠标题不会折叠）。
　　相对于两个固定元素定位内容。top:370px; 下面的规则是（70px）和.banner（300px）的高度之和。
　　将宽度设置为100％，以便内容覆盖整个标题。
　　将高度设置为100％，以便背景覆盖页面的整个高度（这在移动设备上或在较长页面的情况下很重要）。
　　    这是它在代码中的样子：

　　.article {
　　 width: 100%;
　　 position: relative;
　　 top: 370px;
　　 background: white;
　　 height: 100%;
　　 padding: 30px 10%;
　　}
　　.article p {
　　 margin-bottom: 20px;
　　}
　　    查看整个代码

　　    并且，折叠标题已完成。下面，你可以查看整个CSS。你还可以查看本文中显示的折叠标题效果的实时演示。

　　* {
　　 box-sizing: border-box;
　　 margin: 0;
　　 padding: 0;
　　 font-family: sans-serif;
　　 color: #222;
　　}
　　a {
　　 text-decoration: none;
　　}
　　ul {
　　 list-style-type: none;
　　}
　　header {
　　 height: 70px;
　　 background: #222;
　　 position: fixed;
　　 width: 100%;
　　 z-index: 99;
　　}
　　nav {
　　 height: inherit;
　　}
　　.menu {
　　 display: flex;
　　 height: inherit;
　　 align-items: center;
　　 padding: 0 20px;
　　}
　　.menu li {
　　 padding: 0 10px;
　　}
　　.menu a {
　　 color: white;
　　}
　　.logo {
　　 flex: 1;
　　 font-size: 22px;
　　}
　　.banner {
　　 /* for positioning */
　　 width: 100%;
　　 height: 300px;
　　 position: fixed;
　　 top: 70px;
　　 background: linear-gradient(45deg, #98cbff, #98ffcb);

　　 /* for content alignment */
　　 display: flex;
　　 flex-direction: column;
　　 justify-content: space-evenly;
　　 align-items: center;
　　}
　　.banner-title {
　　 font-size: 32px;
　　 margin-bottom: 10px;
　　 text-align: center;
　　}
　　.banner-desc {
　　 font-size: 22px;
　　 text-align: center;
　　}
　　.btn-signup {
　　 color: white;
　　 background-color: #0056ab;
　　 border: 0;
　　 padding: 15px 25px;
　　 font-size: 16px;
　　 cursor: pointer;
　　}
　　.article {
　　 width: 100%;
　　 position: relative;
　　 top: 370px;
　　 background: white;
　　 height: 100%;
　　 padding: 30px 10%;
　　}
　　.article p {
　　 margin-bottom: 20px;
　　}

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

xp与win7双系统咋样卸	u盘怎么安装win10
教你怎样给电脑安装wi	魔法猪在线安装win7系