关于滑动手风琴demo制作的的总结

关于滑动手风琴demo制作的的总结

对于这次滑动手风琴样式的制作我确实学到了很多东西像用ul无序列表来构建整体框架，用a链接的伪元素before和after的使用来实现大小图标的切换以及展开与关闭，最主要的还是响应式的网页制作收获挺大的
滑动手风琴HTML部分还是挺简单的就拿第一个部分YouTube来说

<li class="tab">
					<div class="social youtube">
						<a href="#">Youtube</a>
					</div>
					<div class="content">
						<h1>YouTube</h1>
						<p>This is YouTube...........................</p>
					</div>
				</li>

然后是对于整体样式的一个设定

.accordin{
	background-color: #333;
	width: 100% ;
	min-width: 800px ;
	display: block;
	list-style: none;
	overflow: hidden;
	height: 200px ;
	font-size: 0;
}

然后这里将font-size的大小设置为0来将主题内容在主页面隐藏起来算是这次我学到的第一个技巧
然后就是对a标签的一个伪元素设定来实现大小图标和颜色变化
这里拿的是YouTube

.youtube a::before,
.youtube a::after
{
	content: '\f213';
}

.youtube a::after{
	background-color: #ff0000;
}

然后整体的设置

.social a::before,
.social a::after{
	width: 80px;
	height: 20px;
	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
}

这里主要是transition的使用将界面的转化变得更加的流畅
最后是响应式的界面

@media (max-width:950px ) {
	.container{
		width: 70%;
	}
	.tab{
		display: block;
		width: 100%;
		border-bottom: 3px #333 solid;
	}
	.accordin{
		display: block;
		height: auto;
		min-width: 450px;
	}
	.tab .container{
		width: 85%;
	}
	.tab:hover{
		width: 100%;
	}
	
}

@media (max-width:680px) {
	.container{
		width: 95%;
	}
	.accordin{
		width: 100%;
		min-width: 350px;
	}
	
	
}

emmmmm这里我的理解是触发响应的应该是满足@media后面括号里的条件
最后看一下成品



不知道为啥出了点问题伪元素触发的时候背景颜色只有一半

.tab:hover{
	width: 450px ;
}

.tab:hover .social a::before{
	margin-left: -100px;
}

.tab:hover .social a::after{
	margin-left: -5px;
}

.tab .content{
	background: #fff;
	width: 360px ;
	height: 200px ;
	margin-left: 80px ;
	padding: 50px 0 0 15px;
	position: relative;
}

.tab .content h1{
	font-size: 2.5rem;
	margin-bottom: 10px;
}

.tab .content p{
	font-size: 0.85rem;
	line-height: 1.4rem;
	padding-right: 30px;
}

.social a::before,
.social a::after{
	width: 80px;
	height: 20px;
	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 ;
	padding-left: 20PX;
	padding-top: 80PX;
	margin-left: 85px;
}

.youtube a::before,
.youtube a::after
{
	content: '\f213';
}

.youtube a::after{
	background-color: #ff0000;
}

然后在这段代码里找了半天也没发现是啥问题就很烦
然后还有

前面的都好好的就最后一个GitHub图标出了问题
因为样式都是一起写的所以这我也不知道哪的问题

.accordin{
	background-color: #333;
	width: 100% ;
	min-width: 800px ;
	display: block;
	list-style: none;
	overflow: hidden;
	height: 200px ;
	font-size: 0;
}

.tab{
	display: inline-block;
	background-color: #444;
	border-right: #333 1px solid;
	width: 80px;
	height: 200px;
	overflow: hidden;
	position: relative;
	margin: 0;
	transition: all 0.5s ease-in-out 0.1s;
}

总的来说我学到的东西还是挺多的
问题还是要解决的，不说了，我再去看看是哪的的问题吧。