折叠题目是向客户显示信息关键信息内容的绝佳处理计划方案，比如特价优惠和密匙通告。很多开发设计人员在建立此类实际效果时依靠JavaScript，可是，应用纯CSS建立更简易的折叠头实际效果也是彻底将会的。
折叠题目的工作中方法相近于视差实际效果。折叠题目的情况维持固定不动，便于当客户向下翻转网页页面时，其正下方的內容能够在其上方流动性。在本实例教程中，大家将向你展现怎样建立下列折叠题目实际效果：
该演试包含3个一部分：
折叠标头十分合适客户体验。客户能够在要想查询独特信息内容时随时翻转网页页面，但在阅读文章其余內容时不容易分散化她们的留意力。
如今，让大家看看怎样逐渐建立折叠题目。
1.建立HTML
HTML包含3个关键一部分：
用于固定不动顶部工具栏中，.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加上基础款式
让大家根据界定1些重设和基础款式来起动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，因而菜单项能够水平排成1行，而align-items特性则竖直垂直居中。
你还能够看到大家加上了flex：1; CSS标准到.logo元素。该flext特性是1个flex-grow, flex-shrink, and flex-basis的简写。当它仅有1个值时，它指的是flex-grow，而别的两个特性维持默认设置值。
当flex-grow设定为1时，表明给定元素得到Flex器皿中的全部附加室内空间。因而，当菜单项维持在右边时，menu元素被推到器皿的左边。
5.置放折叠题目
折叠题目也具备固定不动部位，就像顶部工具栏1样。可是，它沒有得到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来对齐折叠题目内的內容。如今，它是1个根据列的flex合理布局，容许你应用justify-content和align-items特性轻轻松松地竖直和水平对齐元素。
6.设定折叠题目的款式
尽管这并不是折叠题目实际效果的1一部分，但这里是.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;
}
在下面的显示屏截图中，你能够看到大家的演试在此时的模样。因为顶部工具栏和折叠题目都有固定不动部位，因而它们坐落于网页页面顶部并遮盖內容的上半一部分。大家将根据设定其余內容的款式，使题目在下1步中可折叠。
7.设计方案其余內容的款式
要在翻转时使题目折叠，你必须做4件事：
这是它在编码中的模样：
.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;
}
结果
折叠题目为你出示了1种客户友善的方法，能够在网页页面顶部显示信息别的內容。它们的工作中方法相近于视差效用; 你必须让不一样的情况以不一样的速率挪动，并将流动性的內容相对固定不动的元素精准定位。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 如何制作微信小游戏_微信游戏小程序_公众号游戏_h5小游戏模板_小程序游戏源码 版权所有 （网站地图） 粤ICP备10235580号