CSS 세트 시작
7925 단어 CSS
모델 화면에 사용되는 클래스
CSS
/*ベースクラス*/
.modal_overlay{
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
opacity: 1;
transition: opacity 0.5s; /*おまけ*/
transform: scale(1); /*おまけ*/
}
/*コンテンツ用クラス*/
.modal_content{
position: relative;
align-self: baseline;
width: 90%; /*カスタム可*/
top: 80px; /*カスタム可*/
padding: 30px 15px; /*カスタム可*/
box-sizing: border-box; /*カスタム可*/
background: #fff; /*カスタム可*/
line-height: 1.4em; /*カスタム可*/
transition: 0.5s; /*おまけ*/
}
HTML 사용 예<div class="modal_overlay">
<div class="modal_content" id='modalTop'>
<p>こんにちは!</p>
</div>
<div>
빵 부스러기용 등급
CSS
#bcnav > ul > li > a[href]::after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
margin-right: 15px;
margin-left: 12px;
-webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
-ms-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
border-top: solid 1px #333;
border-right: solid 1px #333;
}
HTML 사용 예<div id="bcnav">
<ul>
<li><a href="./xxx">大カテゴリ</a></li>
<li><a href="./xxy">中カテゴリ</a></li>
<li><a href="./xxz">小カテゴリ</a></li>
</ul>
</div>
Reference
이 문제에 관하여(CSS 세트 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/torentchan/items/5e39991c49a5d20a8a54텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)