텍스트 비교

두 텍스트 파일의 차이점을 찾아보세요

실시간 편집

변경 없는 행 숨기기

줄바꿈 비활성화

레이아웃

비교 단위

구문 강조

Diffchecker Desktop 가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!데스크톱 앱 받기

responsive-menu-without-js

생성일 6년 전비교 결과 만료 없음

2 삭제

행
총
삭제

글자
총
삭제

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

104 행

8 추가

행
총
추가

글자
총
추가

이 기능을 계속 사용하려면 업그레이드해 주세요 Diffchecker Pro 요금제 보기

109 행

/*Configurações Globais*/

html, body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

li {

list-style: none;

}

/*Início das configurações da header*/

header {

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

font-family: sans-serif;

background-color: #f1c40f;

}

.brand {

width: auto;

height: 100%;

float: left;

margin: 0 0 0 5%;

}

/*Início das configurações da Navigation*/

.menu {

width: 60%;

height: 100%;

float: right;

}

.menu ul {

width: 100%;

height: inherit;

margin: 0;

padding: 0;

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */

display: -ms-flexbox; /* TWEENER - IE 10 */

display: -webkit-flex; /* NEW - Chrome */

display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.menu ul a {

width: 20%;

height: inherit;

color: #222;

display: inline-block;

display: block;

}

.menu ul li {

width: 20%;

display: inline-block;

}

.menu ul a:hover {

background-color: #222;

color: #fff;

}

#menuToggle {

display: none;

}

.menu-icon {

display: none;

}

/*Início das configurações da Navigation com dispositivos < 768px*/

@media screen and (max-width: 768px) {

.menu {

width: 100%;

height: auto;

}

.menu ul {

display: block;

max-height: 0;

overflow: hidden;

-webkit-transition: max-height 0.3s;

-moz-transition: max-height 0.3s;

-ms-transition: max-height 0.3s;

-o-transition: max-height 0.3s;

transition: max-height 0.3s;

/*Para fazer com que o menu saia da esquerda, você deve trocar max-height por max-width*/

/*Para fazer com que o menu saia da direita, você deve trocar max-height por max-width e setar float: right*/

}

.menu ul a {

.menu ul li {

text-align: left;

width: 100%;

height: 50px;

}

.menu ul a {

background-color: #f1c40f;

padding: 10px 0px 10px 5%;

}

.menu-icon {

width: 100px;

height: inherit;

display: block;

position: absolute;

top: 0;

right: 0;

line-height: 60px;

}

#menuToggle:checked ~ ul {

max-height: 350px;

/*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/

}

.menu-icon i {

font-size: 1.7em;

}

저장된 비교 결과

원본

파일 열기

/*Configurações Globais*/
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
/*Início das configurações da header*/
header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-family: sans-serif;
    background-color: #f1c40f;
}
.brand {
    width: auto;
    height: 100%;
    float: left;
    margin: 0 0 0 5%;
}
/*Início das configurações da Navigation*/
.menu {
    width: 60%;
    height: 100%;
    float: right;
}
.menu ul {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 0;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
    width: 20%;
    height: inherit;
    color: #222;
    display: inline-block;
}
.menu ul a:hover {
    background-color: #222;
    color: #fff;
}
#menuToggle {
    display: none;
}
.menu-icon {
    display: none;
}
/*Início das configurações da Navigation com dispositivos < 768px*/
@media screen and (max-width: 768px) {
    .menu {
        width: 100%;
        height: auto;
    }
    .menu ul {
        display: block;
        max-height: 0;
    	overflow: hidden;
    	-webkit-transition: max-height 0.3s;
    	-moz-transition: max-height 0.3s;
        -ms-transition: max-height 0.3s;
        -o-transition: max-height 0.3s;
    	transition: max-height 0.3s;
        /*Para fazer com que o menu saia da esquerda, você deve trocar max-height por max-width*/
        /*Para fazer com que o menu saia da direita, você deve trocar max-height por max-width e setar float: right*/
    }
    .menu ul a {
        text-align: left;
        width: 100%;
        height: 50px;
        background-color: #f1c40f;
        padding: 10px 0px 10px 5%;
    }
    .menu-icon {
        width: 100px;
        height: inherit;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 60px;
    }
    #menuToggle:checked ~ ul {
        max-height: 350px;
        /*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/
    }
    .menu-icon i {
        font-size: 1.7em;
    }
}

수정본

파일 열기

/*Configurações Globais*/
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
/*Início das configurações da header*/
header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-family: sans-serif;
    background-color: #f1c40f;
}
.brand {
    width: auto;
    height: 100%;
    float: left;
    margin: 0 0 0 5%;
}
/*Início das configurações da Navigation*/
.menu {
    width: 60%;
    height: 100%;
    float: right;
}
.menu ul {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 0;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
    height: inherit;
    color: #222;
    display: block;
}
.menu ul li {
  width: 20%;
  display: inline-block;
}
.menu ul a:hover {
    background-color: #222;
    color: #fff;
}
#menuToggle {
    display: none;
}
.menu-icon {
    display: none;
}
/*Início das configurações da Navigation com dispositivos < 768px*/
@media screen and (max-width: 768px) {
    .menu {
        width: 100%;
        height: auto;
    }
    .menu ul {
        display: block;
        max-height: 0;
    	overflow: hidden;
    	-webkit-transition: max-height 0.3s;
    	-moz-transition: max-height 0.3s;
        -ms-transition: max-height 0.3s;
        -o-transition: max-height 0.3s;
    	transition: max-height 0.3s;
        /*Para fazer com que o menu saia da esquerda, você deve trocar max-height por max-width*/
        /*Para fazer com que o menu saia da direita, você deve trocar max-height por max-width e setar float: right*/
    }
    .menu ul li {
        text-align: left;
        width: 100%;
        height: 50px;
    }
    .menu ul a {
        background-color: #f1c40f;
        padding: 10px 0px 10px 5%;
    }
    .menu-icon {
        width: 100px;
        height: inherit;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 60px;
    }
    #menuToggle:checked ~ ul {
        max-height: 350px;
        /*Para fazer com que o menu saia da esquerda ou direita, você deve trocar max-height por max-width*/
    }
    .menu-icon i {
        font-size: 1.7em;
    }
}