CSS 웹 페이지 레이아웃 입문 튜토리얼 11: 현재 로고를 사용하여 레이블이 지정된 수평 탐색 이미지의 개선된 버전

집

웹 프론트엔드

CSS 튜토리얼

CSS 웹 페이지 레이아웃 입문 튜토리얼 11: 현재 로고를 사용하여 레이블이 지정된 수평 탐색 이미지의 개선된 버전_기본 튜토리얼

PHP中文网

May 16, 2016 pm 12:07 PM

탭 내비게이션은 완성되었지만 사각형 모양의 내비게이션은 현재의 디자인 추세에 맞지 않는 것 같습니다. 실제로 내비게이션은 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>

로그인 후 복사

본 웹사이트의 성명

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