2
를 사용하여 CSS를 재정의하는 방법을 내가 가지고있는 다음과 같은 CSS 내가 인터넷에서 다운로드 스크롤 이미지 플러그인의 일환으로 :*/모든 표기
*, * 후, * : 전에 {-webkit-박스 - 크기 조정 : 테두리 상자; -moz-box-sizing : 테두리 상자; 박스 크기 : border-box; }
그리고 다른 떠있는 소셜 미디어 바를 만들고 싶었습니다. 이 미디어 바는 위에서 언급 한 스크롤링 플러그인이없는 다른 페이지에서 작동합니다. 따라서 소셜 미디어 바가 제대로 표시되지 않도록하는 스크롤링 플러그인 및 CSS와 일부 중복됩니다.
https://jsfiddle.net/6bjbra49/
/*
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*/
.media-bar {
\t position: fixed;
\t top: 50px;
\t left: -40px;
}
.social {
width: 200px;
}
.social li a {
display: block;
height: 20px;
width: 40px;
background: #222;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }
.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
.social li a span {
width: 100px;
float: left;
text-align: center;
background: #222;
color: #fff;
margin: -25px 74px;
padding: 8px;
transform-origin: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(45deg);
border-radius: 5px;
transition: all .5s ease .300ms
}
.social li span:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 7px;
border-left: 10px solid transparent;
border-right: 10px solid #222;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
.social li a:hover span {
visibility: visible;
opacity: 1;
transform: rotateY(0)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
\t <li>
\t \t <a class="fa fa-facebook" href="#"><span>Facebook</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-yelp" href="#"><span>Yelp!</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-instagram" href="#"><span>Instagram</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-flickr" href="#"><span>Flickr</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-pinterest" href="#"><span>Pinterest</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-youtube" href="#"><span>You Tube</span></a>
\t </li>
</ul>
</div>, 당신이 볼 수 있습니다 : 여기
는 잘 작동 미디어 바에 대한 JSFiddle의 소스 코드 결과 코드가 제대로 작동하지 않습니다.*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.media-bar {
\t position: fixed;
\t top: 50px;
\t left: -40px;
}
.social {
width: 200px;
}
.social li a {
display: block;
height: 20px;
width: 40px;
background: #222;
border-bottom: 1px solid #333;
font: normal normal normal
16px/20px
'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
color: #fff;
-webkit-font-smoothing: antialiased;
padding: 10px;
text-decoration: none;
text-align: center;
transition: background .5s ease .300ms
}
.social li:first-child a:hover { background: #3B5998 }
.social li:nth-child(2) a:hover { background: #bb0000 }
.social li:nth-child(3) a:hover { background: #125688 }
.social li:nth-child(4) a:hover { background: #f40083 }
.social li:nth-child(5) a:hover { background: #cb2027 }
.social li:nth-child(6) a:hover { background: #bb0000 }
.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }
.social li a span {
width: 100px;
float: left;
text-align: center;
background: #222;
color: #fff;
margin: -25px 74px;
padding: 8px;
transform-origin: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(45deg);
border-radius: 5px;
transition: all .5s ease .300ms
}
.social li span:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 7px;
border-left: 10px solid transparent;
border-right: 10px solid #222;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
.social li a:hover span {
visibility: visible;
opacity: 1;
transform: rotateY(0)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media-bar">
<ul class='social'>
\t <li>
\t \t <a class="fa fa-facebook" href="#"><span>Facebook</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-yelp" href="#"><span>Yelp!</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-instagram" href="#"><span>Instagram</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-flickr" href="#"><span>Flickr</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-pinterest" href="#"><span>Pinterest</span></a>
\t </li>
\t <li>
\t \t <a class="fa fa-youtube" href="#"><span>You Tube</span></a>
\t </li>
</ul>
</div>어떻게 미디어 표시 줄이 잘 작동하도록 수정할 수 있습니다 경우에도 첫 번째 CSS 라인 (*, * 후, * : 전) 코드에 존재합니다.