Don't Miss Out On Our Next Webinar
                Sign Up Now and Choose an Ebook for Free

            
            
                   Go to Webinars »
            
        

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.放置頂部菜單欄

要將固定菜單欄定位在頁面頂部，你需要將

元素的位置設(shè)置為fixed，將z-index設(shè)置為大于零的值。由于z-index默認(rèn)為auto，因此它只需要高于元素父級的z-index值。下面的CSS使用99，因為它可能會保持高于

元素的任何父級：

header {
	height: 70px;
	background: #222;
	position: fixed;
	width: 100%;
	z-index: 99;
}

z-index: 99; 規(guī)則允許頂部菜單欄保持在所有元素的頂部，即使折疊標(biāo)題完全折疊并且其余內(nèi)容到達頁面頂部。

4.設(shè)置菜單樣式

雖然創(chuàng)建折疊標(biāo)題不需要以下CSS規(guī)則，但你可以使用頂部菜單設(shè)置樣式：

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規(guī)則到.logo元素。該flext屬性是一個flex-grow, flex-shrink, and flex-basis的簡寫。當(dāng)它只有一個值時，它指的是flex-grow，而其他兩個屬性保持默認(rèn)值。

當(dāng)flex-grow設(shè)置為1時，表示給定元素獲得Flex容器中的所有額外空間。因此，當(dāng)菜單項保持在右側(cè)時，menu元素被推到容器的左側(cè)。

5.放置折疊標(biāo)題

折疊標(biāo)題也具有固定位置，就像頂部菜單欄一樣。但是，它沒有獲得z-index值，因此當(dāng)用戶向下滾動頁面并且其余內(nèi)容逐漸覆蓋橫幅時，它可以“折疊”。

.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來對齊折疊標(biāo)題內(nèi)的內(nèi)容?，F(xiàn)在，它是一個基于列的flex布局，允許你使用justify-content和align-items屬性輕松地垂直和水平對齊元素。

6.設(shè)置折疊標(biāo)題的樣式

雖然這不是折疊標(biāo)題效果的一部分，但這里是.banner元素的后代（標(biāo)題，描述和按鈕）在上面的演示中的樣式：

.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;
}

在下面的屏幕截圖中，你可以看到我們的演示在此刻的樣子。由于頂部菜單欄和折疊標(biāo)題都有固定位置，因此它們位于頁面頂部并覆蓋內(nèi)容的上半部分。我們將通過設(shè)置其余內(nèi)容的樣式，使標(biāo)題在下一步中可折疊。

7.設(shè)計其余內(nèi)容的樣式

要在滾動時使標(biāo)題折疊，你需要做四件事：

1. 最重要的是，你需要為其余內(nèi)容設(shè)置背景，以便它可以在可折疊標(biāo)頭的頂部流動。請記住，此效果與視差效果類似; 不同的背景需要互相覆蓋。

1. 在演示中，我們使用了純白色背景。你始終需要在流動內(nèi)容上設(shè)置背景以使此效果起作用（否則折疊標(biāo)題不會折疊）。

2. 相對于兩個固定元素定位內(nèi)容。top:370px; 下面的規(guī)則是 （70px）和.banner（300px）的高度之和。

3. 將寬度設(shè)置為100％，以便內(nèi)容覆蓋整個標(biāo)題。

4. 將高度設(shè)置為100％，以便背景覆蓋頁面的整個高度（這在移動設(shè)備上或在較長頁面的情況下很重要）。

這是它在代碼中的樣子：

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

查看整個代碼

并且，折疊標(biāo)題已完成。下面，你可以查看整個CSS。你還可以查看本文中顯示的折疊標(biāo)題效果的實時演示。

* {
	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;
}

結(jié)論

折疊標(biāo)題為你提供了一種用戶友好的方式，可以在頁面頂部顯示其他內(nèi)容。它們的工作方式類似于視差效應(yīng); 你需要讓不同的背景以不同的速度移動，并將流動的內(nèi)容相對于固定的元素定位。

以上是“如何只使用CSS創(chuàng)建折疊標(biāo)題效果的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！