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

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

PHP中文网

풀어 주다： 2016-05-16 12:07:09

원래의

1483명이 탐색했습니다.

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