怎样只应用CSS建立折叠题目实际效果的示例编码

日期:2021-01-20 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

折叠题目是向客户显示信息关键信息内容的绝佳处理计划方案,比如特价优惠和密匙通告。很多开发设计人员在建立此类实际效果时依靠JavaScript,可是,应用纯CSS建立更简易的折叠头实际效果也是彻底将会的。

折叠题目的工作中方法相近于视差实际效果。折叠题目的情况维持固定不动,便于当客户向下翻转网页页面时,其正下方的內容能够在其上方流动性。在本实例教程中,大家将向你展现怎样建立下列折叠题目实际效果:

该演试包含3个一部分:

  1. 带有黑色情况的固定不动题目,坐落于网页页面顶部,包括主菜单。
  2. 带蓝色情况的折叠题目,包括相关特价的附加信息内容。
  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件事:

  1. 最关键的是,你必须为其余內容设定情况,便于它能够在可折叠标头的顶部流动性。请记牢,此实际效果与视差实际效果相近; 不一样的情况必须相互之间遮盖。
    1. 在演试中,大家应用了纯白色情况。你自始至终必须在流动性內容上设定情况以使此实际效果起功效(不然折叠题目不容易折叠)。
  2. 相对两个固定不动元素精准定位內容。top:370px; 下面的标准是 (70px)和.banner(300px)的高宽比之和。
  3. 将宽度设定为100%,便于內容遮盖全部题目。
  4. 将高宽比设定为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;
}

结果

折叠题目为你出示了1种客户友善的方法,能够在网页页面顶部显示信息别的內容。它们的工作中方法相近于视差效用; 你必须让不一样的情况以不一样的速率挪动,并将流动性的內容相对固定不动的元素精准定位。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css 两列合理布局处理计划方案 返回下一篇:没有了