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