CSS 웹 페이지 레이아웃 입문 튜토리얼 11: 현재 로고를 사용하여 레이블이 지정된 수평 탐색 이미지의 개선된 버전_기본 튜토리얼
- PHP中文网원래의
- 2016-05-16 12:07:081531검색
탭 내비게이션은 완성되었지만 사각형 모양의 내비게이션은 현재의 디자인 추세에 맞지 않는 것 같습니다. 실제로 내비게이션은 CSS 색상을 사용하여 정의할 수 있을 뿐만 아니라 세심하게 디자인된 그림이나 기타 요소도 가능합니다. 탐색을 작성하는 데 사용할 수 있습니다. 여기서는 탐색 디자인을 개선하고 더 나은 레이블 효과를 만들어 보겠습니다.
단일 정사각형 배경 요소를 제거하고 색상이 둥근 모서리 라벨을 사용하여 디자인을 완성하는 것을 고려해 보겠습니다. 그러나 이번 개선을 통해 우리는 CSS 디자인의 또 다른 장점을 실현할 수 있습니다. 즉, 구조 코드를 수정할 필요가 없으며 스타일만 수정하면 개선이 완료되므로 여기에서 디자인을 직접 볼 수 있습니다. CSS 코드 중:
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style> 위 코드에서 볼 수 있듯이 배경색 설정을 제거하고 페이지의 본문 태그에 검정색 배경을 추가했습니다. 일반, 마우스 오버, 현재 페이지의 세 가지 대화형 상태를 포함한 개체입니다. 그런데 이 세 주의 사진이 한 장의 사진에 담겨 있다는 것을 알게 될 것입니다. 왜? 이는 소프트웨어의 디자인 방법을 사용하는 한편, 웹 페이지를 다운로드할 때 사진 하나만 다운로드하면 됩니다. 이 이미지를 배경 이미지로 설정할 때 CSS만 사용하면 이미지의 위치를 제어할 수 있는데, CSS 기능이 정말 강력한 것 같습니다.
CSS 코드만 수정하면 내비게이션의 모양이 바뀌는 것을 상상해 보세요. 대규모 웹사이트의 응용 프로그램에서 특정 공통 모듈이 만족스럽지 않으면 모든 페이지를 수정할 필요가 없습니다. 스타일만 변경할 수 있다는 것이 실현되었습니다. CSS를 사용하면 디자인이 정말 쉬워집니다!
<!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>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主页</a></li>
<li><a id="current" 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>
</body>
</html>