Need help? Chat now!

Hostwinds 튜토리얼

에 대한 검색 결과:


목차


왜 탐색 모음이 필요합니까?
계획을 세우십시오
index.html에 대한 navbar 만들기
css.css에서 navbar를 포맷하십시오
그것을 반응시키는 것
귀하의 사이트를 테스트하십시오!
참고 용
index.html
css.css

웹 사이트에 탐색 모음을 추가하는 방법

태그 : Web Site 

왜 탐색 모음이 필요합니까?
계획을 세우십시오
index.html에 대한 navbar 만들기
css.css에서 navbar를 포맷하십시오
그것을 반응시키는 것
귀하의 사이트를 테스트하십시오!
참고 용
index.html
css.css

이 안내서는 데스크톱 및 모바일에 간단한 반응 형 탐색 막대를 만드는 방법을 설명합니다.탐색 막대를 만드는 준비가 되셨습니까?나도 나도 가자.

왜 탐색 모음이 필요합니까?

사이트에 여러 페이지가있는 경우 방문자가 페이지를 변경할 때마다 URL을 입력 해야하는 대신 페이지간에 쉽게 탐색 할 수 있습니다.이 안내서는 다음 탐색 모음을 만드는 방법을 초과합니다.

계획을 세우십시오

귀하의 사이트에 따라 몇 가지 하위 도메인이있을 수 있습니다.그러나 방문자에 대한 액세스의 편의성을 제공하기 위해 탐색 막대는 관련 링크 만 포함되어야합니다.어떤 링크가 포함될 필요가있는 링크와 소셜 미디어 링크와 같은 추가 콘텐츠 또는 포함되어야하는 로그인 상자를 결정할 때입니다.

index.html에 대한 navbar 만들기

navbar에 스타일을 만들기 전에 요소 및 클래스를 index.html 페이지에서 정의해야하며 웹 사이트의 홈페이지로 사용할 수 있습니다.

1 단계 : NavBar 만들기

이 예에서는 태그를 사용합니다 \

  • 항목을 나열하십시오.

2 단계: 클래스 및 링크 생성

귀하의 사이트는 아마도 유사한 요소를 호출하는 여러 페이지의 탐색 모음을 사용할 수 있습니다.올바른 속성이 CSS에 정의되어 있는지 확인하려면 클래스를 사용해야합니다.

다음은 항목을 다른 페이지에 연결할 수 있도록 각 목록 항목 내에 HREF 앵커를 추가하는 예입니다.여기서는 example.com/blog 또는 파일 이름과 같은 실제 링크가 될 수 있습니다.

3 단계: 소셜 미디어 아이콘 추가

이 예에서 소셜 미디어는 SVG 아이콘을 사용합니다.이 가이드는 공개 도메인을 사용합니다 아이콘. 이들은 파일 관리자에 추가되어 파일 경로 / 이름을 통해 호출되었습니다.

위의 이미지에서 소셜 미디어 아이콘은 페이지 링크보다 매우 다른 포맷을 가지며 왼쪽 하단에서 볼 수 있습니다.DIV 컨테이너를 추가하고 두 개의 클래스를 만드는 것으로 수행됩니다.DIV의 수업은 '사회적'이고 LI 수준의 소셜 미디어입니다.

이 예제의 탐색 모음 HTML은 index.html 페이지에 어떻게 생겼는지 여기에 있습니다.

css.css에서 navbar를 포맷하십시오

중복성 또는 포맷의 중복을 줄이려면 가장 많은 '광범위한'요소 또는 클래스로 시작한 다음 작업하십시오.

4 단계: NAVBAR를 수직으로 만듭니다.

수직 탐색 모음을 화면의 전체 측면을 덮게하려면 일부 서식을 조정해야합니다.첫째, 상단 (상단의 위치)은 위치를 고정시켜 0으로 변경해야합니다.둘째, 높이는 100 % 여야하며, 너비는 사이트의 레이아웃에 따라 다릅니다.이것은 배경색 (불투명도 포함)이 호출되는 곳입니다.다음은 예제의 navbar 클래스가 다음과 같습니다.

5 단계: 각 요소와 클래스를 포맷합니다.

더 구체적으로 가려고할수록 CSS에서보다 구체적으로 호출되어야하는 요소입니다.예를 들어, CSS에 일반 클래스와 해당 클래스의 특정 요소를 호출 할 수있는 옵션이있는 경우 클래스를 다른 요소 유형에서 사용할 수 있습니다.

예를 들어, 일반 Div 클래스 소셜을 부르면 다음과 같이 보일 것입니다.

그러나 소셜 미디어 클래스 내의 목록 항목 앵커와 같은 클래스 내의 특정 요소를 호출하는 것은 다음과 같습니다.

UL 및 LI 태그에는 미리 정의 된 일부 설정이 있습니다.이 예에서는이 속성을 요소 ul.navbar Li A에 추가하여 글 머리 기호와 밑줄을 제거 할 수 있습니다.

다음은이 예제에서 탐색 모음의 CSS.css가 다음과 같습니다.

6 단계: 호버 효과 추가

위의 코드 세그먼트에서 볼 수 있듯이 섹션을 포함하여 호버 효과를 추가 할 수 있습니다.

그것을 반응시키는 것

@media 섹션을 편집하여 화면 크기에 따라 더 많은 레이아웃 옵션을 만듭니다.

모바일보기 :

수직 탐색 막대는 화면 크기에 따라 사이트에 가장 적합하지 않을 수 있습니다.그러나 @media 태그에 일부 코드를 추가하면 응답 이브 navbar를 만들 수 있습니다.

7 단계: 수평 탐색 막대로 변경하십시오

현재의 CSS.CSS는 높이와 너비 속성을 재정의하여 탐색 막대를 수직으로 변경할 수 있습니다.

링크와 아이콘이 이전에 가로로 표시되도록 포맷되었으므로 해당 속성을 업데이트해야합니다.다음은 900px 및 400px 화면 크기 모두에 대한 @media 섹션입니다.

귀하의 사이트를 테스트하십시오!

다양한 유형의 트래픽을 준비하려면 Mozilla, Chrome 및 Safari와 같은 여러 브라우저를 사용하여 사이트를 테스트하십시오.또한 모든 링크가 작동하고 올바른 위치를 가리키는지 확인하십시오.

참고 용

다음은 귀하의 편의를 위해이 안내서에 사용 된 전체 코드입니다.

index.html

css.css

body {
    background-image:url('background-background-image-blue-sky-1054218.jpg');
    background-size: 2000px;
    background-repeat: no-repeat;
    margin:0px;
}

ul.navbar{
    top:0;
    position:fixed;
    background-color:#9e9e9e7a;
    margin: 0;
    padding:0.25em;
    list-style-type: none;
    width: 15%;
    height: 100%;
}

.social{
    position:fixed;
    bottom:0;
}

li{
 display:block;

}   
ul.navbar li a{
    font-size:25px;
    color: rgb(11, 11, 11);
    float:none;
    text-decoration: none;
}

        ul.navbar li a:hover{
            color:blueviolet;
        }

ul.navbar li.socialmedia{
float:left;
    padding:5px;

}
.content {
    font-family: verdana;
    color:black;
    margin: 20% 0 0 15%;
     text-align:center;
}

h1{

    font-size: 75px;
    text-shadow: 1px 3px 8px grey;
}
p{

    font-size: 40px;
      text-shadow: 1px 1px 3px lightgrey;
}
p2{
    display:none;
}

@media screen and (max-width: 900px) {
    body{
        background-size: 1500px, 1000px;
        max-width: 1000px;
        min-width: 400px;
        height:100%;
    }
 .content {
   margin-top:20%;
           margin-left: 0;

    }
    h1{
        font-size: 3em;
    }   
    p{
        display:none;
    }    
    p2{
        display:none;
    }
.social{
    position:relative;
}
    ul.navbar {
        max-width: 900px;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
    }

        ul.navbar li a {
    float: left;
    padding:5px;
        }

ul.navbar li.socialmedia{
    float:right;
    margin-top:0;

}
}

@media only screen and (max-width: 500px) {
    body {
        background-size: 900px, 100%;
        max-width: 400px;    
    }
    .content {
padding:10px;
        margin-top:45%
    }
        h1{ 
        display:none;
            font-size: 25px;    
        }
    p{
         display:none;
        font-size: 20px; 
    }    
p2{
    font-size: 45px;
    display:block;

    text-shadow: 1px 5px  10px lightgrey;
}
ul.navbar{
    float:none
}
.socialmedia{
    display:none;
}

<!DOCTYPE html>
<html>
<head>
    <title>Coming Soon</title>
    <link rel="stylesheet" href="css.css" >
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>

<ul class="navbar">

  <li><a href="main.html">Home</a></li>
  <li><a href="main.html">Blog</a></li>
 <li><a href="main.html">About</a></li>
  <li><a href="main.html">Contact</a></li>
<div class="social">

   <li class="socialmedia"><a href="https://twitter.com/example" >
        <img title="Twitter" alt="Facebook" src="iconfinder_twitter_3009565.svg" width="35" height="35" />
    </a></li>
 <li class="socialmedia"><a href="https://www.instagram.com/example/?hl=en" >
        <img title="Instagram" alt="Twitter" src="iconfinder_instagram_3009537.svg" width="35" height="35" />
    </a></li>
   <li class="socialmedia"><a href="https://www.facebook.com/example/?hl=en" >
        <img title="Instagram" alt="Instagram" src="iconfinder_facebook_3009513.svg" width="35" height="35" />
    </a></li>
    </div>

</div>
</ul>
<div class="content">
    <h1>This Site is Under Construction</h1>
        <p>Content Coming December 2018</p>
      <p2>Coming Soon...</p2>
</div>

</body>
</html>
@media screen and (max-width: 900px) {
    body{
        background-size: 1500px, 1000px;
        max-width: 1000px;
        min-width: 400px;
        height:100%;
    }
 .content {
   margin-top:20%;
   margin-left: 0;   
    }
    h1{
        font-size: 3em;
    }   
    p{
        display:none;
    }    
    p2{
        display:none;
    }
.social{
    position:relative;
}
    ul.navbar {
        max-width: 900px;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
    }

        ul.navbar li a {
    float: left;
    padding:5px;
        }

ul.navbar li.socialmedia{
    float:right;
    margin-top:0;

}
}

@media only screen and (max-width: 500px) {
    body {
        background-size: 900px, 100%;
        max-width: 400px;    
    }
    .content {
padding:10px;
        margin-top:45%
    }
        h1{ 
        display:none;
            font-size: 25px;    
        }
    p{
         display:none;
        font-size: 20px; 
    }    
p2{
    font-size: 45px;
    display:block;

    text-shadow: 1px 5px  10px lightgrey;
}
ul.navbar{
    float:none
}
.socialmedia{
    display:none;
}
ul.navbar {
    max-width: 900px;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
}
ul.navbar li a{
    font-size:25px;
    color: rgb(11, 11, 11);
    float:none;
    text-decoration: none;
}

ul.navbar li a:hover{
    color:blueviolet;
}
ul.navbar{
    top:0;
    position:fixed;
    background-color:#9e9e9e7a;
    margin: 0;
    padding:0.25em;
    list-style-type: none;
    width: 15%;
    height: 100%;
}

.social{
    position:fixed;
    bottom:0;
}

li{
 display:block;

}   
ul.navbar li a{
    font-size:25px;
    color: rgb(11, 11, 11);
    float:none;
    text-decoration: none;
}

ul.navbar li.socialmedia{
float:left;
    padding:5px;

}
.content {
    font-family: verdana;
    color:black;
    margin: 20% 0 0 15%;
     text-align:center;
}
 text-decoration: none;
ul.navbar li.socialmedia{}
.social{}
ul.navbar{
    top:0;
    position:fixed;
    background-color:#9e9e9e7a;
    margin: 0;
    padding:0.25em;
    list-style-type: none;
    width: 15%;
    height: 100%;
}
<ul class="navbar">

  <li><a href="main.html">Home</a></li>
  <li><a href="main.html">Blog</a></li>
 <li><a href="main.html">About</a></li>
  <li><a href="main.html">Contact</a></li>
<div class="social">

   <li class="socialmedia"><a href="https://twitter.com/example" >
        <img title="Twitter" alt="Facebook" src="iconfinder_twitter_3009565.svg" width="35" height="35" />
    </a></li>
 <li class="socialmedia"><a href="https://www.instagram.com/example/?hl=en" >
        <img title="Instagram" alt="Twitter" src="iconfinder_instagram_3009537.svg" width="35" height="35" />
    </a></li>
   <li class="socialmedia"><a href="https://www.facebook.com/example/?hl=en" >
        <img title="Instagram" alt="Instagram" src="iconfinder_facebook_3009513.svg" width="35" height="35" />
    </a></li>
    </div>

</div>
</ul>
<ul class="navbar">
  <li><a href="home.html">Home</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="About.html">About</a></li>
  <li><a href="Contact.html">Contact</a></li>
</ul>
<ul class="navbar">
  <li>Home</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

작성자 Hostwinds Team  /  유월 5, 2021