다른 크기의 페이지를 생성하는 CSS

body { 
     background-color: #E0E0E0; 
    } 
    p { 
     background-color: white; 
    } 
    #content { 
     #header { 
      width: 350px; 
      height: 100px; 
      background-color: white; 
      position: absolute; 
      left: 500px; 
      top: 5px; 
      border-bottom: solid; 
      border-width: 2px; 
      border-color: #E0E0E0; 
      font-size: 30px; 
      font-family: calibri; 
     } 
     #footer { 
      padding-left: 20px; 
      width: 1495px; 
      height: 17px; 
      background-color: black; 
      color: white; 
      position: relative; 
      top: 10px; 
     } 

     .navbar-item { 
      /*This is a class to seperate the different links in the footer nav bar, it specifies a wdith for each item so they have some space between the links*/ 

      display: block; 
      float: left; 
      width: 350px; 
      height: 17px; 
      text-align: center; 
      background-color: black; 
      color: white; 
     } 
     :hover { 
      background-color: white; 
      color: blue; 
     }

위의 코드는 내 홈 페이지에 올바른 레이아웃을 설정했지만 다른 페이지에 대해 동일한 CSS 코드를 사용하면 모든 이유로 인해 작아집니다. 한 페이지에 대해 페이지를 올바르게 만들 수있는 이유가 표시되지 않지만 다른 페이지에 똑같은 문서가 사용되면 페이지 모양이 바뀝니다. 사용 된 모든 상자는 작습니다.다른 크기의 페이지를 생성하는 CSS

출처

2016-09-18 user3257023

CSS가 약간 잘못된 것처럼 보입니다. #content {결코 닫히지 않으며 호버가 자신의 올바른 선택자가 아닙니다. .navbar-item : 호버? 누군가가 내가 생각하기에 더 많은 정보를 제공해야합니다. 다른 CSS에서 위와 같은 내용을 다른 페이지 등에 덮어 쓰는 경우처럼. – klikas

전체 웹 사이트에 사용되는 CSS 파일이 하나 뿐이므로 색인 (집) 페이지를 사용하여 디자인했으며이 페이지는 정확합니다. 나는 그것을 원해. 하지만 다른 페이지에 똑같은 CSS 문서를 사용하면 크기는 약 25 % 작아 지지만 동일한 문서의 크기가 동일해야합니다. – user3257023

페이지에 영향을주는 다른 CSS가 없으면 외부 또는 인라인 , 나는 이것이 어떻게 든 일어날 수있는 방법이 있다고 생각하지 않습니다. 당신이 실수로 당신의 브라우저를 어떻게 든 축소시키는 것 말고는. 그래도 CSS를 고쳐서 선택자가 올바르게 닫힐 것입니다. (i..e the #content {... 요소에 영향을 줄 수있는 다른 CSS (외부 또는 인라인)가 없다는 것을 다시 확인하십시오. 크롬 개발자 도구를 사용하여 페이지를 디버깅 할 수 있습니다. chrome 및 개발자 도구를 찾으려면 여기를 클릭하십시오 : https://developer.chrome.com/devtools – klikas

이 시도 :

body { 
    background-color: #E0E0E0; 
} 

p { 
    background-color: #fff; 
} 

#content, #header { 
    width: 350px; 
    height: 100px; 
    background-color: #fff; 
    position: absolute; 
    left: 500px; 
    top: 5px; 
    border-bottom: solid; 
    border-width: 2px; 
    border-color: #E0E0E0; 
    font-size: 30px; 
    font-family: calibri; 
} 

#footer { 
    padding-left: 20px; 
    width: 1495px; 
    height: 17px; 
    background-color: #000; 
    color: #fff; 
    position: relative; 
    top: 10px; 
} 

.navbar-item { 
/*This is a class to seperate the different links in the footer nav bar, it specifies a wdith for each item so they have some space between the links*/ 
    display: block; 
    float: left; 
    width: 350px; 
    height: 17px; 
    text-align: center; 
    background-color: #000; 
    color: #fff; 
} 

.navbar-item:hover { 
    background-color: #fff; 
    color: blue; 
}

당신의 #header 난 그냥 각 동일한 스타일을 적용하고 싶었 가정하여 #content 괄호 안에 이었기 때문에.

희망이 있습니다.

출처

2016-09-18 21:48:14

다른 크기의 페이지를 생성하는 CSS

답변

관련 문제