CSS 코드를 사용하여 웹사이트 탐색 표시줄을 만드는 방법은 무엇입니까? (예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 코드를 사용하여 웹사이트 탐색 표시줄을 만드는 방법은 무엇입니까? (예)

藏色散人

Aug 25, 2018 am 09:40 AM

이 글은 주로 CSS를 사용하여 네비게이션 바를 만드는 방법에 대한 관련 지식을 소개합니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다. 어떤 웹사이트든 네비게이션 바의 존재는 매우 중요하므로 HTML을 사용하여 지루한 네비게이션 메뉴를 만든다면 확실히 효과가 좋지 않을 것입니다. 이때 CSS 속성의 중요성이 반영됩니다.

다음은 CSS 탐색 코드의 구체적인 예입니다.

세로 탐색 모음

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css垂直导航代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

로그인 후 복사

위 효과는 다음과 같습니다.

CSS 코드를 사용하여 웹사이트 탐색 표시줄을 만드는 방법은 무엇입니까? (예)

2. 는 효과는 다음과 같습니다. 그림:

CSS 코드를 사용하여 웹사이트 탐색 표시줄을 만드는 방법은 무엇입니까? (예)
여기에 관련된 주요 중요한 지식:

display: 해당 속성은 요소가 생성해야 하는 상자 유형을 지정합니다. 이 속성은 레이아웃 생성 시 요소에 의해 생성되는 표시 상자 유형을 정의하는 데 사용됩니다. HTML과 같은 문서 유형의 경우 표시를 부주의하게 사용하면 HTML에 이미 정의된 표시 계층 구조를 위반할 수 있으므로 위험할 수 있습니다. XML의 경우 XML에는 이러한 종류의 계층 구조가 내장되어 있지 않으므로 모든 표시가 절대적으로 필요합니다.

display:inline; - 기본적으로

요소는 블록 요소입니다. 여기서는 각 목록 항목 앞뒤에 개행 문자를 제거하여 한 줄을 표시합니다.

그래서 위의 내용은 특정 참조 가치가 있는 웹 페이지에서 CSS 탐색을 사용하는 방법에 대한 문제에 대한 관련 소개입니다. 그것이 모두에게 도움이 되기를 바랍니다.

위 내용은 CSS 코드를 사용하여 웹사이트 탐색 표시줄을 만드는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.