今天學習做一個簡單的前端demo滑動手風琴悠砚，效果如下，在鼠標移入的時候圖標變大且背景顏色改變堂飞，右側(cè)出現(xiàn)介紹的文字灌旧，同時做出響應(yīng)式的頁面
手風琴.png
手風琴hover.png
首先是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>HTML+CSS:滑動手風琴</h1>
</header>
<ul class="contentall">
<!-- 設(shè)置一個無序列表包含六個li標簽存放六個板塊 -->
<!-- 第一個板塊開始 -->
<li class="menu">
<div class="social youtube">
<a href="">youtube</a>
<!-- 設(shè)置超鏈接后續(xù)插入圖片可點入轉(zhuǎn)跳 -->
</div>
<div class="content">
<h1>YouTuBe</h1>
<p>hello,i want to recommend this application to you.hello,i want to recommend this application to you.</p>
</div>
<!-- 設(shè)置一個盒子存放標題和內(nèi)容 -->
</li>
<!-- 第二個板塊開始 -->
<li class="menu">
<div class="social Twitter">
<a href="">twitter</a>
</div>
<div class="content">
<h1>Twitter</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第三個板塊開始 -->
<li class="menu">
<div class="social FaceBook">
<a href="">facebook</a>
</div>
<div class="content">
<h1>Facebook</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第四個板塊開始 -->
<li class="menu">
<div class="social LinKedin">
<a href="">linkedin</a>
</div>
<div class="content">
<h1>Linkedin</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第五個板塊開始 -->
<li class="menu">
<div class="social Instagram">
<a href="">Instagram</a>
</div>
<div class="content">
<h1>Instagram</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第六個板塊開始 -->
<li class="menu">
<div class="social github">
<a href="">github</a>
</div>
<div class="content">
<h1>Github</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
圖標可以在iconfont官網(wǎng)下載使用，也可以在BootCDN上搜索genericons 用link鏈接引入直接使用绰筛。
<link rel="stylesheet">
下面是 CSS部分
首先先reset網(wǎng)頁基本樣式枢泰，設(shè)置容器大小背景顏色字體，再設(shè)置標題樣式
*{
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #222;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 90%;
margin: 50px auto;
/*水平居中*/
}
header h1{
color: white;
margin-bottom: 10px;
text-align: center;
}
下面設(shè)置列表的CSS樣式
.contentall{
background-color: #333;
width: 100%;
height: 200px;
min-width: 800px;
font-size: 0;/*先設(shè)置字體隱藏后續(xù)顯示*/
overflow: hidden;/*隱藏超出部分铝噩，不出現(xiàn)滾輪*/
display: block;/*屬性為塊元素獨占一行*/
list-style: none;
}
.menu{
background-color: #444;
border-right: #333 1px solid;
overflow: hidden;/*隱藏超出部分衡蚂，不出現(xiàn)滾輪*/
width: 80px;
height: 200px;
display: inline-block;/*屬性為行內(nèi)塊元素，可以在同一行排列*/
position: relative;
margin: 0;
transition: all 0.5s ease-in-out 0.1s;/*設(shè)置過渡屬性，使下面的偽類變換更加流暢順滑*/
}
設(shè)置li的hover屬性毛甲，使寬度增加年叮，內(nèi)容區(qū)域顯示。即鼠標移入時右側(cè)伸長顯示內(nèi)容區(qū)域
.menu:hover{
width: 450px;
}
下面設(shè)置內(nèi)容區(qū)域的樣式
.menu .content{
background-color: #FFFFFF;
width: 360px;
height: 200px;
margin-left: 80px;/*改變左外邊距使內(nèi)容區(qū)域和圖片區(qū)域位置更換*/
position: relative;
padding: 50px 0 0 15px;
}
.menu .content h1{
font-size: 2.5rem;/*設(shè)置字體大小使字體顯示*/
margin-bottom: 10px;
}
.menu .content p{
font-size: 0.85rem;
line-height: 1.4rem;
padding-right: 30px;
}
要達到圖片區(qū)域鼠標移入切換的效果玻募，需要在a標簽前后增加::before和::after偽類
.social a::before,.social a::after{
width: 80px;
height: 200px;
position: absolute;
text-indent: 0;
padding-top: 90px;
padding-left: 25px;
display: block;
font: normal 30px Genericons;
color: #fff;
transition: all 0.4s ease-in-out 0.1s;
/*添加過渡屬性使鼠標移入時變化流暢順滑只损，達到手風琴的效果*/
}
.social a::after{
font-size: 48px;/*設(shè)置移入后顯示的圖標變大*/
padding-left: 20px;
padding-top: 80px;
margin-left: 85px;/*鼠標未移入時該部分隱藏*/
下面引入genericons圖標，設(shè)置::after內(nèi)容顏色不單一（\f213為特定圖標的unicode編碼七咧，可去官網(wǎng)查看）
.youtube a::before,.youtube a::after{
content:"\f213";
}
.youtube a::after{
background-color: #f00;
}
.FaceBook a::before,.FaceBook a::after{
content:"\f204";
}
.FaceBook a::after{
background-color: #3b5998;
}
.Instagram a::before,.Instagram a::after{
content:"\f215";
}
.Instagram a::after{
background-color: #6dc993;
}
.LinKedin a::before,.LinKedin a::after{
content:"\f208";
}
.LinKedin a::after{
background-color: #00a9cd;
}
.Twitter a::before,.Twitter a::after{
content:"\f202";
}
.Twitter a::after{
background-color: #6dc5dd;
}
.github a::before,.github a::after{
content:"\f200";
}
.github a::after{
background-color: #6e5494;
}
最后設(shè)置hover偽類跃惫，鼠標移入時原先before板塊向左隱藏，after板塊向左移動出現(xiàn)坑雅，實現(xiàn)手風琴效果辈挂，且通過過渡效果變得流暢舒適衬横。
.menu:hover .social a::before{
margin-left: -100px;
}
.menu:hover .social a::after{
margin-left: -5px;
簡單的滑動手風琴效果已經(jīng)實現(xiàn)裹粤，下面我們來設(shè)置網(wǎng)頁的響應(yīng)式布局。使我們的滑動手風琴可以適應(yīng)不同顯示器的大小蜂林。我們使用媒體查詢@media來設(shè)置我們不同分辨率的樣式遥诉。
@media (max-width:950px){/*當最大寬度達到950px時切換到以下樣式*/
.container{
width: 70%;
}
.menu{
display: block;
width: 100%;
border-bottom: 3px #333 solid;/*分辨率減小，列表豎向排列方便閱讀*/
}
.contentall{
display: block;
height: auto;
min-width: 450px;
}
.menu .content{
width: 85%;
}
.menu:hover{
width: 100%;/*防止移入時右側(cè)內(nèi)容部分左移*/
}
}
效果如下圖
自適應(yīng)手風琴.png
而當分辨率更小達到手機類時噪叙，再設(shè)置一個媒體查詢來自適應(yīng)矮锈。
@media (max-width:680px) {
.container{
width: 95%;
}
.contentall{
width: 100%;
min-width: 350px;
}
}
自適應(yīng)手風琴2.png
自適應(yīng)的界面使不同分辨率的用戶都能有更好的體驗。
到此睁蕾，一個滑動手風琴的Demo就完成了苞笨。
