关于滑动手风琴demo制作的的总结
关于滑动手风琴demo制作的的总结
对于这次滑动手风琴样式的制作我确实学到了很多东西像用ul无序列表来构建整体框架，用a链接的伪元素before和after的使用来实现大小图标的切换以及展开与关闭，最主要的还是响应式的网页制作收获挺大的
滑动手风琴HTML部分还是挺简单的就拿第一个部分YouTube来说
"tab">
"social youtube">
"#">Youtube
"content">
YouTube
This is YouTube...........................
然后是对于整体样式的一个设定
.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;
}
总的来说我学到的东西还是挺多的
问题还是要解决的，不说了，我再去看看是哪的的问题吧。