코드는 다음과 같습니다. 먼저 HTML 페이지 코드는 다음과 같습니다.
Jacob Song의 쇼핑 웹사이트< /title> < ;link rel="Stylesheet" href="css/header.css" type="text/css" />
CSS 파일, 해당 HTML
/ *헤더 스타일 시작*/ #header{ 너비:800px; 테두리: 1px 솔리드 #AAAAAA 여백:10px 자동; 3B5998; } /*로고 스타일 시작*/ #logo { float:left; color:#FFF; 글꼴 크기:3em; 글꼴 무게:700; 라인 높이:80px; } /*스킨 스타일 전환*/ #skin { float:right ; 여백: 10px; 너비: 120px; 목록 스타일: 없음 테두리: #CCCCCC; 🎜>} #skin li { float:left; 여백:4px; 높이:15px text-indent:-9999px; overflow:hidden; display:block; cursor:pointer; Background-image:url(../Imgs/theme.gif) >#skin_0 background-position:0px 0px } / *이미지가 설정된 위치입니다*/ #skin_1 { background-position:15px 0px } #skin_2 { background-position:35px 0px } #skin_3 { 배경 위치:55px 0px } #skin_4 { 배경 위치:75px 0px } #skin_5 { 배경 위치:95px 0px } #skin_0.selected; -position:0px 15px } #skin_1 .selected { 배경 위치:15px 15px } #skin_2.selected { 배경 위치:35px 15px } #skin_3.selected { 배경 위치 :55px 15px; } #skin_4.selected { background-position:75px 15px; } #skin_5.selected { background-position:95px 15px } 그러면 스킨 변경에 필요한 여분의 CSS를 클릭하면 다른 CSS가 사용되며 이를 선택하여 쿠키에 저장합니다. CSS 폴더 아래의 Skin 폴더에 대체 스키닝 CSS 스타일이 있습니다. Skin_0 .css 파일은 다음과 같습니다. 코드 복사
코드는 다음과 같습니다.
#header {
배경:#3B5998; } Skin_1.css 파일은 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
#header{
background:#BB3BD9 } Skin_2.css 파일
코드 복사
코드는 다음과 같습니다.