HTML5 & CSS3 고정 탐색 모음

첫 번째 웹 사이트를 수동으로 만들려고하고 있으며 작업 방법에 대해 몇 가지 질문이 있습니다. 순수 JS HTML5, 아니 JS에서 이것을 달성하고 싶습니다. 지금 당장 가지고있는 탐색 헤더는 페이지가 스크롤되는 정도에 상관없이 페이지 상단에 고정되어야합니다. 그러나,이 헤더 크기를 존중하는 이미지를 얻기 위해서, 나는 다음과 같은 방식으로 CSS를 사용하여 휴양지로 했어 :이 작업을 수행 할 수있는 더 우아한 방법은HTML5 & CSS3 고정 탐색 모음

main { 
    position: absolute; 
    top: 60px; 
    z-index: -1; 
}

을 있습니까? 또한 px를 사용하는 것보다 공간을 확보하는 상대적인 방법이 있습니까? 내가 글꼴에 대한 rem에 대해 알고 있지만 간격에 대해 비슷한 무엇입니까? 나의 독서는 retina 스크린이 2px 변환을 기리는 것을 나타냅니다. 그러나 4k 스크린은 어떻습니까?

또한 어떻게 텍스트를 세로 간격으로 가운데에 배치합니까?

마지막으로, 사람의 데스크탑에 로컬로 설치된 글꼴을 참조하여 어떻게 서버에서 글꼴을 다운로드 할 필요가 없습니까?

CSS3

* { all: unset } 


@font-face { 
    font-family: 'biolinum'; 
    src: url('LinBiolinum_R.woff'), 
     local('Linux Biolinum O'); 
} 

.logo { 
    float: left; 
    height: 50px; 
    padding: 5px; 
} 

.image { 
    height: auto; 
    width: 100%; 
    background: black; 
} 

header { 
    position: fixed; 
    height: 60px; 
    width: 100%; 
    background: white; 
} 

main { 
    position: absolute; 
    top: 60px; 
    z-index: -1; 
} 

nav { 
    list-style-type: none; 
    float: right; 
    font-family: 'biolinum'; 
    font-size: 1.25rem; 
    color: #465053; 
    text-transform: uppercase; 
} 

p { 
    font-family: 'biolinum'; 
    font-size: 1rem; 
    color: #465053; 
    text-align: justify; 
} 

title { 
    display: none; 
}

HTML5

 <title>Title</title> 

     <link rel='icon' href='images/logo.svg'> 
     <link rel='stylesheet' href='css/style.css'> 
    </head> 

    <body id='index' class='home'> 
     <header> 
      <a href='#'> 
       <img src='images/name.svg' class='logo'> 
      </a> 
      <nav> 
       <a href='index.html'>about</a> 
       <a href='#'>design</a> 
       <a href='#'>analysis</a> 
       <a href='#'>contact</a> 
      </nav> 
     </header> 

     <main> 
      <img src='images/temp.png' class='image'> 
      <img src='images/temp.png' class='image'> 
      <img src='images/temp.png' class='image'> 
      <img src='images/temp.png' class='image'> 
     </main> 
    </body> 
</html>

출처

2014-06-06 user3713465

당신이 지금까지 한 일을 보여주는 바이올린을 게시 할 수 있습니까? –

내가 수동으로 내 첫 번째 웹 사이트를 만들려고 해요, 내가 일을 수행하는 방법에 대한 몇 가지 질문이 있습니다. 순수 JS HTML5, 아니 JS에서 이것을 달성하고 싶습니다. 지금 당장 가지고있는 탐색 헤더는 페이지가 스크롤되는 정도에 상관없이 페이지 상단에 고정되어야합니다. 그러나이 헤더 크기를 존중하도록 이미지를 얻으려면 다음과 같이 CSS를 사용해야합니다.

좀 더 우아한 방법이 있습니까?

가이처럼 수행하는 또 다른 방법 : 당신이 더 많거나 적은 우아한 당신에게 달려있다 생각하든

body 
{ 
    overflow: hidden; 
} 
header { 
    height: 20vh; 
} 
main { 
    height: 80vh; 
    overflow: scroll; 
}

또한 px를 사용하는 것보다 공간을 상대적으로 구현하는 방법이 있습니까? 내가 글꼴에 대한 rem에 대해 알고 있지만 간격에 대해 비슷한 무엇입니까? 나의 독서는 retina 스크린이 2px 변환을 기리는 것을 나타냅니다. 그러나 4k 스크린은 어떻습니까?

뷰포트 높이의 백분율 인 "vh"를 사용할 수 있습니다.

또한 어떻게 텍스트를 세로 간격으로 가운데에 배치합니까?

nav { 
    text-align: center; 
}

이것은 탐색 내의 텍스트를 중심으로합니다.

마지막으로, 사람의 데스크톱에 로컬로 설치된 글꼴을 참조하여 서버에서 글꼴을 다운로드 할 필요가 없으므로 어떻게해야합니까?이 사용자의 바탕 화면에 설치되어있는 경우

p { 
    font-family:"Times New Roman"; 
}

이처럼 참조 할 수 있어야한다.

출처

2014-06-06 04:45:22 semicolon

HTML5 & CSS3 고정 탐색 모음

답변

관련 문제