검토 :
스프라이트 그림 사용 :
도 PS 절단 애플리케이션 à
그림 스프라이트는 CSSSprite 또는 CSS 스프라이트라고
목표는, HTTP 요청을 줄일 페이지로드의 속도를 높이는 것입니다, 그래서 상대적으로 큰 그림에 집중 사진 Suixiao의 페이지,로드
도 스프라이트는 키가 배경 위치를 조정하는 것입니다 구현
표준 및 비표준도 스프라이트 스프라이트도에 스프라이트도.
위치 위치
고정 위치 고정 (기본)
그 자체에 대해 상대 이동의 상대적인 위치, 및 문서 스트림으로부터 벗어나지 않고 여전히 원래 위치가
표준 흐름에서 벗어나지 부동 절대 절대 위치와, 선조 엘리먼트는 제 요소에 대해 오프셋되어 위치
상황이 페이지에 대해 위치에 상관없이 표준 흐름 중 고정형 측위
점성 점착 위치
팁 : 실 사용에있어서, 상대적 위치 또는 절대적 위치를 사용? 그 대답은 절대 위치를 이용하여 상대 위치의 하위 요소를 사용하는 부모 요소
의 값으로 네 방향으로 위치 지정
상단
권리
바닥
왼쪽
글 랜드 효과
定位 상대 위치가 고정 스티커
좌우 부동
글 랜드 위해
Z- 색인에는 단위없는 순수한 숫자보다 큰 값의 상위 (상위 계층에 도시) 우선
중첩 관계의 존재의 경우 뚜껑의 부모 요소 Z- 색인 표시 순서에 따라, 자식 요소가 무효로 설정된다 (요소 설정 형제 부모 요소에 대하여 무효)
아들 중첩 상자 Z- 색인
무관하게 카세트 서브 세트가 어떻게 Z- 인덱스, 상위 박스 선 결정된 순서 Z 색인
하나, 이가지 회전 목마 그림 선물
회전 목마 그림 호흡 : Jingdong를
모든 사진은 함께 쌓아
회전 목마 그림을 스크롤 : Taobao의를
모든 이미지는 나란히 표시
두, CSS 일반적인 단위
EM 상대적인 : 상위의 크기의 비에 대하여 박스
상대 유닛 REM 수면 : 루트 요소에 대하여 비 (HTML) 폰트 사이즈
화소 PX, 가장 기본 위치 데이터가 화면에 표시된다. 웹 디자인, 쉽고 직관적, 상대 단위
픽셀은 디스플레이의 스크린 해상도에 상대적이다.
예를 들어, 사용자가 사용하는 윈도우 해상도는 일반적으로 96 개 픽셀 / 인치입니다. MAC는 사용자에 의해 사용되는 해상도는 통상적으로 72 개 픽셀 / 인치이다.
PT는 일반적으로 인쇄 산업 단위에 1pt = 1/72 인치를 사용한다. 절대 단위
인치, 절대 단위
절대 mm 단위 mm
절대 cm 단위 cm
1 인치 = 2.54 = 25.4 mm = 72pt = 6PC
당신 度
회전 링
전원을 켭 = 360deg
네, 해킹
해커 해커
브라우저 호환성 문제 때문에, 우리는 같은 효과를 볼 수있는 다른 브라우저를 달성하기 위해, 다른 HTML이나 다른 브라우저를위한 CSS 코드를 작성합니다.
html hack 일본 css hack
4.1 HTML 해킹
IE 브라우저 큰 문제 호환성, 해킹, 쓰기, 우리에게 포트를 많이 제공합니다.
| 1 <! -하다면 LTE IE 9> 제 2 부 내용 3 <[ENDIF! -> |
같은 HTML 파일에 다른 브라우저의 경우, HTML은 다른 구조를 작성합니다.
IE는 호환성 문제를 많이 가지고 인터페이스의 번호와 우리를 제공합니다.
해킹 기호는이 코멘트라고 생각합니다 IE9의 브라우저 아래, IE10 이상 또는 고급 브라우저 만 표시 내부의 내용을 나타냅니다.
이면, LTE가 이하보다 작거나 같을 경우, IE 브라우저 9 버전을 나타낸다.
LTE : 이하 나타내는 같 이하.
LT : 표시 미만 미만.
된다 : 표시되는보다 큰,보다 크다.
GTE : 그 이상일
응용 프로그램 : 브라우저의 낮은 버전의 특정 코드를 작성할 수 있습니다.
IE의 특정 버전 용으로 작성된 특별 있습니다 :
| 1 <! - 만약 IE 6]> 2 <H3>가 만 IE6 브라우저에서 표시 할 수있는 고급 IE 브라우저 또는 그 이상 버전으로 간주됩니다 코멘트 </ H3> 3 <[ENDIF! -> 1 |
만 IE6 브라우저 주석 코드에,
| (4) <! - 만약 IE 6]> 5 <H3> 나는 IE6 </ H3>를 해요 6 <[ENDIF! -> 1 |
4.2 CSS를 해킹
CSS를 해킹 : 해킹과 가치 선택을 해킹
Ø의 해킹 CSS 값
/ * 6 * IE /
.selector {_color : 파란색; }
.selector {색 : 블루; }
문자를 해킹 : -, _
프로퍼티 이름 앞에 밑줄 또는 수평 라인.
이 속성은 IE6는 알고이 다른 속성을 모르는 나타냅니다.
| {1 .box 2 폭 : 200 픽셀; 3 높이 200 픽셀; 4 배경 : 오렌지; 5 색상 : # 000; 6 색 : #fff; // IE6는 흰색 텍스트 색상을 표시합니다. 7} |
/ * IE 6/7 * /
符 해킹! $ & * () = @ % +. /`[] # ~? <> |
이 속성은 IE6 / 7 노하우를 나타냅니다이 다른 속성을 모른다.
/ * IE 8/9 * /
.selector {색상 : 블루 \ 0 /; }
문자를 해킹 : 0 / \.
속성 값의 뒷면에 작성해야합니다.
IE8,9에서 경우에만 알고있다.
/ * IE 6/7/8/9/10 * /
.selector {색상 : 블루 \ 9; }
연산자를 해킹 : \ 9.
세미콜론 전에 속성 값의 뒷면에 작성해야합니다.
Ø CSS 선택기 해킹
/ * 6 * IE / 아래
* HTML을 .selector {}
이 선택은 단지 IE6에서로드, 다른 브라우저는 당신의 선택이 잘못 생각합니다.
고급 브라우저가 이미 HTML 루트 태그, *없는 그의 조상 요소로 간주됩니다.
| * 1의 HTML .box { 2 폭 : 200 픽셀; 3 높이 200 픽셀; 4 배경 : 오렌지; 5 색상 : # 000; 6} (7) |
/ * 7 * IE / 아래
.selector, {}
이 선택은 IE7과로드 버전 이하, 다른 브라우저는 당신의 선택이 잘못 생각합니다.
| 1 .box { 2 폭 : 200 픽셀; 3 높이 200 픽셀; 4 배경 : 오렌지; 5 색상 : # 000; 6} |
/ * 除了 IE 6 * /
HTML> 바디 .selector {}
> 아이 선택기 : 외아들 레벨을 선택, 다른 레벨이 자손을 투표하지.
IE6는 아이 선택기를 인식하지 못합니다.
除了IE6都能正常加载。
| 1 html > body .box{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 color:#000; 6 } |
五、IE6的兼容
5.1 选择器的兼容
IE6不兼容交集选择器里的类选择器连写。
div.box 可以兼容
div.box.cl 不兼容
解决办法：
使用标签和一个类的交集。
其他的7种选择器完美的兼容：
标签、id、类、交集（div.box）、后代、并集、通配符
| 1 div.box.cl{ 2 width: 200px; 3 height: 200px; 4 background: orange; 5 } 6 div.box { 7 8 } 9 //高级浏览器中.box.cl权重比.box高渲染为橘色 10 //IE6中.box 和.box.cl权重相同，css书写后面的层叠掉前面的颜色渲染为红色。 |
5.2 盒模型的兼容
Ø 如果不写DTD，IE6里的盒子是内减的，其他浏览器是外扩。
解决方法：
必须写DTD。
Ø 如果盒子高度小于默认字号，不会正常显示。高度会是默认的字号。
解决方法：
单独给IE6浏览器，强制给个很小的字号。
| 1 .box{ 2 width: 200px; 3 height:3px; 4 background: orange; 5 -font-size:3px; 6 } |
5.3 浮动的兼容
Ø 不浮动的盒子不会钻到底下
情况：一个盒子浮动，一个盒子不浮动，在IE6里，不浮动的盒子不会钻到浮动盒子的下面占领它原来的标准流位置。
解决办法：制作压盖效果用定位。同一级的盒子要浮动都浮动，要不浮动都不浮动。
Ø 3px bug
情况：一个浮动，一个不浮动，IE6里两个盒子之间会出现3px的间距。
解决方法：（不允许这么写）。
必须解决：给左边的浮动盒子加一个-3px的右margin。
只给IE6浏览器加，注意Hack符。
| 1 .box1{ 2 width: 200px; 3 height: 200px; 4 background: pink; -3px; // 만 6으로 이해 : 5 -margin 오른쪽. 6} |
Ø 이중 마진 문제
: 부유 요소의 개수는 상기 플로트와 동일한 방향으로 여유가 이중 마진 문제의 첫 번째 요소가 발생한다.
| 1 .box 피 { 2 플로트 : 왼쪽; 3 여백 왼쪽 : 10px; 4 폭 : 100 픽셀; 5 높이 100 픽셀; 6 배경 : 분홍색; 7} |
해결 방법 : 아버지의를 집어 넣은 패딩 ①
| {1 .box 2 폭 : 590px; 3 높이 100 픽셀; 테두리 4 : 1 픽셀 고체 #ddd; 5 마진 : 100 픽셀 자동; 6 패딩 왼쪽 : 10px; 7} 8 .box p.first { 9 여백 왼쪽 : 0; 10} |
절반 플로팅 마진의 첫 번째 요소 ② (IE6 만 추가)
| {1 .box p.first 2 -margin 왼쪽 : 5px; 삼 } |