CSS 웹 페이지 레이아웃 소개 튜토리얼 10: 현재 로고가 포함된 탭 가로 탐색

집

웹 프론트엔드

CSS 튜토리얼

CSS 웹 페이지 레이아웃 소개 튜토리얼 10: 현재 로고가 포함된 탭 가로 탐색_기본 튜토리얼

PHP中文网

May 16, 2016 pm 12:07 PM

현재 로고는 사용자가 채널이나 컬럼을 클릭하는 것을 의미하며, 컬럼의 라벨은 다른 라벨과 다른 색상으로 표시되어 사용자에게 위치를 상기시킵니다.
이 디자인은 웹사이트 디자인에서 웹사이트 유용성을 향상시키는 매우 간단하고 고전적인 방법입니다. 사용자가 웹사이트를 사용할 때 사용자의 탐색 과정을 고려해야 합니다. 나쁜 웹 디자인은 사용자의 경험을 고려하지 않고 페이지 자체만 고려합니다. 이렇게 단순한 디자인은 사용자 중심이어야 합니다. 채널 식별은 많은 디자이너가 무시하는 경우가 많습니다. 사용자는 자신이 현재 어디에 있는지, 어디로 갈 수 있는지 알아야 합니다. 이를 통해 사용자는 웹 사이트에서 자신의 위치를 이해하고 다른 채널을 방문할 수 있습니다.
이전 글의 코드를 계속해서 작성하면 채널이 현재 채널이 되려면 이 채널이 다른 채널과 다른 배경색이나 텍스트를 가져야 하지만 현재는 모든 태그의 배경을 타겟팅하고 있습니다. 통합 설정이므로 첫 번째 작업은 예외, 즉 현재 채널, 특수 채널을 디자인하는 것입니다. HTML의 태그를 일부 수정합니다.

<ul id="nav"> 
    <li id="current"><a href="/index.asp">主页</a></li> 
    <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li> 
    <li><a href="/Sort/List_5.html">常用代码</a></li> 
    <li><a href="/Sort/List_6.html">水晶图标</a></li> 
    <li><a href="/Sort/List_7.html">幻灯图片</a></li> 
    <li><a href="/Sort/List_10.html">软件下载</a></li> 
    <li><a href="/css2/">CSS2.0实用手册</a></li> 
  </ul>

로그인 후 복사

첫 번째 a를 추가합니다. 태그 current라는 이름의 새 ID가 추가되었습니다. CSS 부분을 계속 읽으세요. 먼저 id current에 대한 색상 디자인을 만드세요.

#nav li a#current { background-color:#2788da; color:#fff;}

로그인 후 복사

홈페이지의 배경색이 파란색으로 바뀌었습니다. 컬러

<style> 
#nav li { float:left;} 
#nav li a { color:#000000; text-decoration:none; padding-top:4px; 
display:block; width:120px; height:22px; text-align:center; 
background-color:#ececec; margin-left:2px;} 
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 
#nav li a#current { background-color:#2788da; color:#fff;} 
</style> 
  <ul id="nav"> 
    <li>主页</li> 
    <li>DIV+CSS教程</li> 
    <li>常用代码</li> 
    <li>水晶图标</li> 
    <li>幻灯图片</li> 
    <li>软件下载</li> 
    <li>CSS2.0实用手册</li> 
  </ul>

로그인 후 복사

계속해서 탐색 기능을 개선하고 페이지 메뉴 아래에 가로선을 추가합니다.

#nav { height:26px; border-bottom:2px solid #2788da;}

로그인 후 복사

ul 태그의 높이를 설정하고 하단 2px 실선에 추가했습니다. , 효과를 다시 미리 보면 원래 상상했던 탭 탐색과 유사합니다. nav 요소의 정의로 돌아가면 border-bottom은 새로 추가된 속성으로 요소의 아래쪽 테두리 설정을 나타냅니다. 해당 매개변수는 너비 2px, 단일 실선 스타일 및 색상 값 #2788da를 참조합니다. 이러한 설정을 사용하면 ul 태그에 2px 색상의 아래쪽 테두리가 표시됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;} 
#nav li { float:left;} 
#nav li a { color:#000000; text-decoration:none; padding-top:4px; 
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;} 
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 
#nav li a#current { background-color:#2788da; color:#fff;} 
</style> 
</head> 
<body> 
  <ul id="nav"> 
    <li>主页</li> 
    <li>DIV+CSS教程</li> 
    <li>常用代码</li> 
    <li>水晶图标</li> 
    <li>幻灯图片</li> 
    <li>软件下载</li> 
    <li>CSS2.0实用手册</li> 
  </ul> 
</body> 
</html>

로그인 후 복사

CSS 디자인 세트를 통해 간단한 탭 탐색이 완성됩니다. 채널 페이지를 변경할 때마다 id="current"만 변경하면 됩니다. 색상 전환을 완료하려면 현재 채널이 위치한 요소입니다. 색상 속성을 작성할 필요가 없으며, 수정이 필요한 경우 CSS에서 쉽게 수정할 수 있습니다.

이 예에서는 XHTML의 요소 간 CSS 속성 상속 적용에 대해 설명합니다.
상속이란 무엇입니까? 상속은 각 요소가 여러 스타일을 가질 수 있음을 의미합니다. 일반적인 상황에서는 가장 바깥쪽에 있는 스타일 디자인을 준수합니다.
내부 레이어의 스타일이 외부 레이어의 스타일과 충돌하는 경우 내부 레이어의 스타일 효과가 표시됩니다.

이 예는 미리보기용 스타일 코드에 있는 새로운 속성인 list-style:none과도 연결됩니다.
기본적으로 ul의 li 목록 형식은 이전 장에서 볼 수 있듯이 앞에 점이 있습니다. 이 문장은 앞에 있는 기본 점을 제거한다는 의미입니다.

위 내용은 CSS 웹 페이지 레이아웃 입문 튜토리얼 10: 현재 로고를 사용한 수평 탐색_기본 튜토리얼의 내용입니다. 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7386

자바 튜토리얼

1630

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1267

PHP 튜토리얼

1216

Related knowledge

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? Apr 05, 2025 pm 11:24 PM

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

그림에 사용 된 인코딩 된 글꼴은 무엇입니까? 이 글꼴 스타일을 프로젝트에 적용하는 방법은 무엇입니까? Apr 05, 2025 pm 05:06 PM

프로그래밍 및 웹 디자인에서 인코딩 된 글꼴의 소개 및 사용 올바른 글꼴을 선택하면 코드의 가독성과 미학을 크게 향상시킬 수 있습니다. 최근의,...

요소 UI의 el-table에서 병합 행의 호버 스타일과 논리를 조정하는 방법은 무엇입니까? Apr 05, 2025 pm 07:45 PM

El-Table에서 병합 된 행의 호버 스타일과 논리를 조정하는 방법은 무엇입니까? 요소 사용 ...

CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까? Apr 05, 2025 pm 08:00 PM

CSS와 여러 줄의 텍스트를 정렬하고 강조하는 방법은 무엇입니까? 매일 웹 디자인에서는 종종 여러 줄의 텍스트를 특수 스타일로 스타일링해야합니다 ...

RECT-TRANSITION 그룹을 사용하여 RECT 구성 요소의 밀접하게 슬라이딩 스위칭의 효과를 달성하는 방법은 무엇입니까? Apr 05, 2025 pm 08:03 PM

React-Transition-Group을 사용하여 반응에서 성분 전환 전이 효과를 달성하는 문제와 관련하여. React Development Projects를 사용할 때는 종종 일부 스트림을 구현해야합니다 ...

H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? Apr 05, 2025 pm 11:27 PM

코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.