목록 내 비게 이 션 표시 줄 인 스 턴 스 (02) - 아름 다운 전자상거래 사이트 감상 분석
7311 단어 전자 상 거래
[준비 작업]
1. 그림 과 같이 사이트 프레임 워 크 를 만 듭 니 다.
2. reset. css 파일 참고 내용:
/*YUI CSS Reset
http://baike.baidu.com/view/5186496.htm
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
padding: 0;
margin: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img
{
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var
{
font-weight: normal;
font-style: normal;
}
ol, ul
{
list-style: none;
}
caption, th
{
text-align: left;
}
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
font-size: 100%;
}
q:before, q:after
{
content: '';
}
abbr, acronym
{
border: 0;
}
[설명]
이 css reset 파일 은 http://baike.baidu.com/view/5186496.htm 에서 왔 습 니 다. YUI 의 CSS Reset 이 라 고 합 니 다. 버 전 이 알려 지지 않 았 습 니 다. 원본 파일 의 출처 를 아 는 사람 이 있 으 면 아낌없이 가르쳐 주 십시오.
이 파일 은 여기 서 주로 {padding: 0; margin: 0;} 역할 을 합 니 다. 일반적인 설정 * {padding: 0; margin: 0;} 을 대체 하 는 것 과 같 습 니 다.
인용 사진
bg-header.jpg
bg-pattern.jpg
nav.png
[조작 절차]
효과
HTML
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title> </title>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="#" id="farm">Our Farm</a></li>
<li><a href="#" id="blog">The Blog</a></li>
<li><a href="#" id="shop">Shop</a></li>
<li><a href="#" id="info">Info & Extras</a></li>
<li><a href="#" id="contact">Contact Us</a></li>
</ul>
</div>
</body>
</html>[설명]
이 인 스 턴 스 에서 네 비게 이 션 표시 줄 의 세 가지 상 태 는 lay. css 파일 의 스타일 에 있 습 니 다. 배경 그림 nav. png 로 이 루어 졌 습 니 다. 목록 에 있 는 목록 항목 문 자 는 표시 되 지 않 았 습 니 다. 스타일 시트 가 지원 되 지 않 는 손바닥 네트워크 장치 에 표 시 될 수 있 습 니 다.
3. CSS
/*- LET'S GET STARTED!
----------------------------------------------------------------------*/
body
{
background: url(../images/bg-pattern.jpg);
font-family: "adobe-garamond-pro-1" , "adobe-garamond-pro-2" , Georgia, "Times New Roman" , Times, serif;
color: #6B5F51;
font-size: 14px;
}
a
{
text-decoration: none;
}
a:focus
{
outline: none;
}
/*- HEADER
----------------------------------------------------------------------*/
#header
{
background: transparent url(../images/bg-header.jpg) repeat-x center top;
overflow: hidden;
}
/*- NAV
----------------------------------------------------------------------*/
#nav
{
width: 847px;
height: 112px;
margin: 0 auto;
z-index: 9999;
position: relative;
margin-top: 14px;
}
#nav li
{
display: inline;
}
#nav li a
{
display: block;
position: relative;
float: left;
height: 112px;
background: url(../images/nav.png);
text-indent: -9999px;
}
#nav li a#farm
{
width: 131px;
margin-right: 40px;
}
#nav li a#farm:hover
{
background-position: left -112px;
}
#nav li a#farm:active
{
background-position: left -224px;
}
#nav li a#blog
{
background-position: -171px top;
width: 131px;
margin-right: 41px;
}
#nav li a#blog:hover
{
background-position: -171px -112px;
}
#nav li a#blog:active
{
background-position: -171px -224px;
}
#nav li a#shop
{
background-position: -344px top;
width: 164px;
margin-right: 33px;
}
#nav li a#shop:hover
{
background-position: -344px -112px;
}
#nav li a#shop:active
{
background-position: -344px -224px;
}
#nav li a#info
{
background-position: -551px top;
width: 131px;
margin-right: 41px;
}
#nav li a#info:hover
{
background-position: -551px -112px;
}
#nav li a#info:active
{
background-position: -551px -224px;
}
#nav li a#contact
{
background-position: -723px top;
width: 130px;
}
#nav li a#contact:hover
{
background-position: -723px -112px;
}
#nav li a#contact:active
{
background-position: -723px -224px;
}
[설명]
1. 이 스타일 시트 의 주요 기술 은 background - position 속성 을 설정 하 는 것 입 니 다. 네 비게 이 션 바 5 개 링크 3 개 상태 에서 모두 15 개의 그림 을 높이 3 * 112 = 336 px 의 그림 nav. png 에서 background - position 속성 을 설정 하 는 것 입 니 다. 즉, 배경 이미지 의 시작 위 치 를 설정 하여 서로 다른 배경 그림 을 캡 처 하 는 것 입 니 다.이 시작 위 치 는 대체적인 계산 에 근거 하여 조정 을 거 쳐 얻 은 것 이다.
2. 스타일 a 는 주로 연결 문자 의 기본 밑줄 을 제거 합 니 다.
3. 스타일 a: focus 는 주로 링크 를 클릭 할 때 초점 을 얻 기 때문에 링크 그림 주변 에 표 시 된 점선 사각형 을 제거 합 니 다.
4. a: active 의 효 과 는 링크 를 클릭 할 때 마 우 스 를 눌 러 놓 지 않 고 표시 할 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
목록 내 비게 이 션 표시 줄 인 스 턴 스 (02) - 아름 다운 전자상거래 사이트 감상 분석이 css reset 파일 은 에서 왔 습 니 다. YUI 의 CSS Reset 이 라 고 합 니 다. 일반적인 설정 * {padding: 0; margin: 0;} 을 대체 하 는 것 과 같 습 니 다. css 파...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
