사이트 자신을위한 수평 메뉴를 확인

수평 메뉴는 거의 모든 사이트가 - 그것은 유치하거나, 반대로, 방문자를 쫓아 외관 및 유용성 수로는 중요한 부분입니다. 이제 초등학교 수평 메뉴를 만드는 방법에 대해 알아 보자 만드는 기본적인 기술을 마스터, HTML에 "골격"합니다. 당신은 확실히 준비 메뉴를 찾을 수 있지만, 훨씬 좋네요은 스스로를 개발하는 방법을 배울 수 있습니다. 그것은 꽤 재미 있어요.

메뉴를 만들기 위해 알아보기

우리는 레이아웃의 주요 인물을 준수 의미에서 이탈하지 않으려 고. 먼저, HTML에 대한 우리의 메뉴의 "골격"을 만들어 자신의 수평 메뉴를 만드는 기본 기술을 배울 수있다. 그리고는 스타일 시트를 사용하여 장식합니다. 우리 horizontal 메뉴는 5 항목이 포함되어 보자. 첫 번째 항목은 홈페이지로 연결됩니다. 두 번째 포인트 - "회사 소개". 세 번째 - "우리의 상". 넷째 - "그것은 재미 있어요." 다섯 번째 - "저희에게 연락하십시오."

HTML 코드는 다음과 같습니다 :

모르는 사람 : UL 태그가 사용되는 총알, 그 요소는 리튬로 시작합니다. 리튬 태그는 UL에 적용되는 스타일을 상속합니다.

UL -리스트의 블록 요소, 그것은 폭으로 연신한다. 리는 또한 블록이다.

그래서하는 index.html을을 만들 수 있습니다. 우리는 우리의 코드를 수집합니다. 이 시점에서, 브라우저는 오히려 수평 메뉴보다 수직을 표시합니다. 하지만 목표로 우리는 - 사이트에 대한 수평 메뉴를 확인합니다. 이를 위해 우리는 CSS가 필요합니다.

CSS는 무엇인가?

당신이 사이트의 개발을 마스터 아직 경우, 캐스 케이 딩 스타일 시트의 개념에 익숙해 필요가있다. 사실, 이러한 웹 사이트의 페이지에 다른 요소에 적용되는 서식 처리를 위해 규칙이 있습니다. 우리는 표준 HTML에있는 요소의 속성을 설명하는 경우, 당신은 당신이 동일한 코드 조각의 중복을 얻을이 여러 번 반복해야합니다. 사용자의 컴퓨터에 페이지로드 시간은 증가 할 것이다. 이를 방지하기 위해, CSS있다. 그것은 한 번만 특정 요소를 설명하기에 충분하고 단순히 위치를 특정 스타일의 속성을 사용하는 방법을 나타냅니다. 페이지 자체의 텍스트뿐만 아니라 다른 파일뿐만 아니라에 대한 설명을 할 수있다. 이 사이트의 모든 페이지에 다른 스타일의 설명을 적용 할 수 있습니다. CSS 파일을 수정, 일부 페이지를 수정하는 것이 편리합니다. 스타일 시트는 사이트의 그래픽 페이지를 악화 방지하기 위해 돕는 HTML보다 더 나은 수준의 글꼴로 작업 할 수 있습니다.

메뉴 개발을위한 스타일 시트를 사용하여

메뉴에 대한 CSS 코드 :

1. # My_1menu {목록 스타일 : 없음; 패딩 : 6; 폭 : 800 픽셀; 마진 : 자동;}
2. # My_1menu 리 {플로트 : 왼쪽; 폰트 : 이탤릭체 18px의 굴림;}
3. # My_1menu {색상 : # 756; 디스플레이 : 블록; 높이 : 픽셀,; 라인 높이 : 픽셀,; 패딩 : 0 픽셀 15 픽셀 0 픽셀 15 픽셀; 배경 : #dfc; 텍스트 장식 : 없음;}
4. # My_1menu A : 가져가 {색상 : #foa; 배경 : # 788;}

이제 결과 수평 CSS 메뉴를 살펴 보자.

- 예약 된 항목이 남긴 자국을 제거하려면이 명령 없음 : - # My_1menu 그래서 아이디 = my_1menu,리스트 스타일 UL- 요소의 스타일 지정이 있습니다.

폭 : 800 픽셀 - 우리 메뉴의 폭은 800 픽셀입니다.

패딩 : 0 -이 내부 패딩을 제거합니다.

마진 : 자동 - 우리의 페이지 중앙에 수평 메뉴를 vyravnivnie.

# My_1menu 리튬 - 스타일 리 요소를 할당.

높이 : 픽셀, - 메뉴 높이입니다.

# My_1menu A : 호버 - 요소에 스타일을 할당하고이를 유도 마우스.

모든 개발자가 여기에 해당 매개 변수를 지정할 수있는 우리는, 구체적으로 모든 라인을 설명하지 않습니다. 웹 사이트의 메뉴 스타일의 사용에 대한이 기준. 당신은 사진을 사용하여, 그것을 좀 더 완성 된 아름다운 외관을 제공 할 수 있습니다. 예를 들어, 배경에 대 한 요소를 지정하지만 : 홈페이지 (img1.png) 반복-X를. 반복-X를 A에 대한 URL (img2.png) : 호버 배경이 있으라.

당신의 상상력, 창조적 인 환경 설정을 사용합니다. 그런 다음 웹 사이트에서 간단한 메뉴를 만드는 방법에 대한 지식을 기반으로, 당신은 자신의 독특한 디자인과 페이지를 개발할 수 있습니다.