Wulin.com (www.vevb.com) 기사 소개 : 웹 페이지 제작 기술 : XHTML, CSS 및 JS.
세부 1 ……………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………1. 텍스트와 그림이 같은 줄에있을 때 텍스트는 그림의 맨 아래에 정렬되어야하며 다음과 같이 작성해야합니다.
<li> 비밀번호를 기억하십시오 <img src = align = ottom style = margin-bottom : -4px/> </li>
2. 텍스트와 그림이 같은 줄에있을 때 텍스트와 그림은 다음과 같이 중심으로 작성되어야합니다.
<li> 비밀번호를 기억하십시오. <img src = static/img/xyx.jpg align = middle/</li>를 기억하십시오
3. IE보기 소스 코드 메뉴에서 열린 편집기 변경
레지스트리 편집기를 열고 START-RUN에 Regedit을 입력하십시오
다음 위치 찾기 : hkey_local_machinesoftwaremicrosoft 인터넷 explorerview sourceeditoreditor 이름 기본 데이터를 d : program filesemeditoremeditor.exe로 수정합니다.
소스 코드를 보려면 IE로 전환하면 효과를 볼 수 있습니다.
view source editorEditor 이름 항목에 이름이 없으면 직접 만들 수 있습니다.
4. 창을 자동으로 최대화하고 <body>와 </body> 사이에 추가하십시오.
<스크립트 언어 = javaScript>
settimeout ( 'top.moveto (0,0)', 5000);
settimeout ( 'top.resizeto (screen.availwidth, screen.availheight)', 5000);
< /스크립트>
5. Window.opener는 실제로 Window.open으로 열린 양식의 부모 형식입니다.
예를 들어, Parent Form ParentForm, Pass Window.open (subform.html), subform.html Window.opener에서
ParentForm을 의미하고 부모 양식의 값을 설정하거나 JS 메소드를 이러한 방식으로 호출 할 수 있습니다.
1, window.opener.test (); --- 부모 양식에서 test () 메소드를 호출하십시오.
2. Window. OPENER가 존재하면 StockBox의 값을 ParentForm에서 설정하십시오.
if (window.opener &&! window.opener.closed)
{
Window.opener.document.parentform.stockbox.Value = Symbol;
}
6. 페이지를 새로 고치는 방법
JavaScript에서 페이지를 새로 고치는 방법 :
1 history.go (0)
2 location.reload ()
3 위치 = 위치
4 location.assign (위치)
5 document.execcommand ( '새로 고침')
6 Window.Navigate (위치)
7 location.replace (위치)
8 document.url = location.href
페이지를 자동으로 새로 고침하는 방법 :
1. 자동 페이지 새로 고침 : <메타 http-equiv = refresh content = 20> <head> 영역에 추가
2. 자동 페이지 점프 : 추가 <메타 http-equiv = 새로 고침 컨텐츠 = 20; url = http : //www.webjx.com> <head> 영역에 추가
3.js는 페이지를 자동으로 새로 고쳐줍니다
<스크립트 언어 = javaScript>
MyRefresh () 기능
{
Window.location.reload ();
}
settimeout ( 'myrefresh ()', 1000); // 1 초 안에 새로 고침을 지정하십시오
< /스크립트>
4.JS 새로 고침 프레임 워크
a) 프레임이 포함 된 페이지를 새로 고치십시오
<스크립트 언어 = javaScript>
parent.location.reload ();
< /스크립트>
b) 어린이 창이 부모 창을 새로 고칩니다
<스크립트 언어 = javaScript>
self.opener.location.reload ();
< /스크립트>
(또는 <a href = javaScript : opener.location.reload ()> 새로 고침 </a>)
c) 다른 프레임의 페이지를 새로 고치십시오
<스크립트 언어 = javaScript>
parent.another frameid.location.reload ();
< /스크립트>
7. CSS 해킹을 사용한 경우 밑줄로 이름 지정이 해킹임을 알아야합니다. _style을 사용하는 경우 IE 외부의 대부분의 브라우저 가이 스타일의 정의를 무시할 수 있으므로 이름 지정이 표준화되지 않을 때 _를 분리기로 사용하십시오. CSS 검사를 수행 할 때 오류 메시지가 나타납니다.
8. 조건부 주석 쓰기 방법
<!-[if! ie]> ie <! [endif]->를 제외하고 인식 할 수 있습니다
<!-[IF IE]> 모든 IE는 식별 할 수 있습니다 <! [endif]->
<!-[IE 5.0 인 경우]> IE 5.0 만 인식 할 수 있습니다 <! [endif]->
9. CSS 해킹 쓰기 방법
첫 번째 유형 :
.div {
배경 : 오렌지;
*배경 : 녹색! 중요;
*배경 : 파란색;
}
두 번째 유형 :
.div {
여백 : 10px;
*마진 : 15px;
_margin : 15px;
}
세 번째 유형 :
#div {색상 : #333; }
*+html #div {색상 : #999; }
* html #div {색상 : #666; }
세부 2 ……………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. IE6 및 다음은 태그 외부에서 호버 의사 클래스를 인식하지 못합니다. Firefox, IE7에서 효과는 올바르게 달성 될 수 있습니다. 해결책:
#show li.s1 {테두리 : 1px solid #ff9900; 배경 :#454242;}
#show li.s2 {테두리 : 1px solid #d9d8d8; 배경 :#312E2E;}
<li> </li>
2. 요소에 대한 HASLAYOUT 세트
많은 IE6 (또는 IE7) 문제는 haslayout 값을 설정하여 해결할 수 있습니다. 요소의 Haslayout 값을 설정하는 가장 쉬운 방법은 CSS의 높이 또는 너비를 추가하는 것입니다 (물론 Zoom을 사용할 수도 있지만 CSS의 일부는 아닙니다). 예를 들어 높이로 설정 : 1%. 상위 요소가 높이를 설정하지 않으면 요소의 물리적 높이가 변하지 않지만 이미 Haslayout 속성이 있습니다.
3. IE6에서 캐릭터가 반복적으로 나타납니다
디스플레이를 확인하십시오 : 인라인은 부유 요소로 설정되어 있습니다.
플로팅 요소에서 마진 오른쪽 : -3px 사용;
4. 스타일 우선 순위
1. 인라인 스타일 [1.0.0.0]
2. ID 선택기 [0.1.0.0]
3. 클래스, 속성, 의사 클래스 선택기 [0.0.1.0]
4. 요소 태그, 의사 요소 선택기 [0.0.0.1]
5. CSS는 수직 중심의 한 요소의 쓰기 방법
#exm {
위치 : 절대;
왼쪽 : 50%;
상단 : 50%;
z- 인덱스 : 1;
너비 : 200px;
높이 : 100px;
마진 왼쪽 : -100px;
마진-탑 : -52px;
}
6. 줌 : 정상 | 숫자
객체의 스케일링 비율을 설정하거나 검색합니다. 렌더링 된 객체 의이 속성 값을 설정하거나 변경하면 객체를 둘러싼 컨텐츠가 다시 흐릅니다. 이 속성은 상속 할 수 없지만 물체 (어린이)의 모든 아동 대상에 영향을 미칩니다.
7. 그림과 텍스트가 나란히 배열되면 그림 텍스트는 수직으로 중앙에 있어야합니다.
1> 줄 높이 설정 : 이미지의 높이 또는 이미지의 상위 요소의 높이.
2> 그런 다음 그림의 CSS에서 수직-정렬을 설정합니다.
8. Li 요소에 IMG 요소가 포함되면 ie6 아래에 블랭크가 나타납니다.
해결책 1
Li를 떠나 IMG를 블록 레벨 요소로 설정하십시오
해결책 2
UL의 글꼴 크기 설정 : 0;
해결책 3
IMG의 세로 정렬 설정 : 하단;
해결책 4
IMG의 마진 바닥을 설정하십시오 : -5px;
세부 3 ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. 클릭하여 방문한 하이퍼 링크 스타일에는 호버와 활성이 없습니다.
솔루션 : CSS 속성 순서 변경 : LVHA
2. FF 하의 연속성 긴 필드는 자동으로 포장 할 수 없습니다.
솔루션 : Word-Wrap : Break-Word; 오버플로 : 숨겨진;
3. 부모 컨테이너의 높이는 FF에서 적응할 수 없습니다.
해결책 : 어린이 요소의 부동을 지우십시오
4. 갭은 IE 아래 그림 아래에서 생성됩니다.
솔루션 : IMG를 디스플레이로 정의하십시오 : 블록 또는 세로-정렬을 상단/하단/중간/텍스트 바닥으로 정의하십시오
부모 컨테이너의 글꼴 크기를 0, 글꼴 크기로 정의하십시오
5. IE6 하의 부동 요소와 인접한 비 플로팅 요소 사이에는 3px 간격이 있습니다.
솔루션 : 인접한 비 플로팅 요소도 플로트로 설정됩니다.
플로팅 요소는 ie6_margin-righ에 대해 정의됩니다 : -3px;
6. Li 함량은 너무 길어진 후에 타원으로 표시됩니다.
해결책 : 흰색 공간 : Nowrap; (텍스트가 랩되지 않습니다) 텍스트 오버 플로 : 엘리석시스; -o-텍스트-오버 플로우 : 엘립스 시스; 오버플로 : 숨겨진;
7. 텍스트는 수직으로 중앙에있을 수 없습니다
솔루션 : 라인 높이와 컨테이너 높이는 동일 선-높이 = 높이입니다.
8. 텍스트 입력 상자는 인접한 텍스트와 정렬 될 수 없습니다.
솔루션 : 텍스트 입력 상자를 설정하십시오. vertical-align : middle;
9. 즉, 스크롤 막대 스타일을 설정합니다
해결책:
몸{
스크롤바 팬 컬러 :#f6f6f6;
스크롤 바 하이 라이트 컬러 : #fff;
Scrollbar-Shadow-Color : #eeeeee;
Scrollbar-3dlight-color : #eeeeee;
Scrollbar-Arrow-Color :#000;
스크롤 바 트랙 컬러 : #ffff;
Scrollbar-Darkshadow-Color : #fff;
}
10. IE6은 높이가 1px 인 컨테이너를 정의 할 수 없습니다.
해결책 : 오버플로 : 숨겨진
줌 : 0.8
라인 높이 : 1px
세부 4 ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. 레이어를 플래시에 표시하게하십시오
솔루션 : 투명 설정 <param name = wmode value = transparent /> 또는 <param name = wmode value = opaque /> for Flash
2. 브라우저에있는 레이어를 수직으로 만듭니다
솔루션 : 외부 패치의 음수 값으로 절대 포지셔닝 백분율을 사용하십시오.
위치 : 절대;
상단 : 50%;
왼쪽 : 50%;
마진 : -100px 자동 자동 -100px;
너비 : 200px;
높이 : 200px;
3. 즐겨 찾기에 추가하십시오
솔루션 : <스크립트 유형 = 텍스트/JavaScript>
// <! [cdata [
함수 북마크 () {
var title = document.title
var url = document.location.href
if (window.sidebar) wind
else if (window.opera && window.print) {
var mbm = document.create_r_relement_x ( 'a');
mbm.setattribute ( 'rel', 'sidebar');
mbm.setattribute ( 'href', url);
mbm.setattribute ( 'title', title);
mbm.click ();}
else if (document.all) window.external.addfavorite (url, title);
}
//]]>
< /스크립트>
<a href = javaScript : bookmark ()> 즐겨 찾기에 추가 </a>
세부 5 ……………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. 일반적인 뉴스 목록 작성 방법 :
<ul class = list>
<li> <span> 2006 년 6 월 6 일 </span> <a href =#> 뉴스 제목 01 </a> </li>
<li> <span> 2006 년 6 월 6 일 </span> <a href =#> 뉴스 제목 02 </a> </li>
<li> <span> 2006 년 6 월 6 일 </span> <a href =#> 뉴스 제목 03 </a> </li>
<li> <span> 2006 년 6 월 6 일 </span> <a href =#> 뉴스 제목 04 </a> </li>
< /ul>
2. 페이지 구현 페이지 배경 구배 (FF 및 Chrome은 지원하지 않음)
위에서 아래로 :
Body {필터 : progid : dximagetransform.microsoft.gradient (gradientType = 0, startColorstr =#ffffff, endColorstr =#000000);}
오른쪽 왼쪽에서 하단 상단 :
필터 : 알파 (스타일 = 1, 불투명도 = 25, finishopacity = 100, startx = 50, finishy = 100, Starty = 50, finishy = 100); 배경색 : SkyBlue;}
왼쪽에서 오른쪽으로
Body {필터 : progid : dximagetransform.microsoft.gradient (gradientType = 1, startColorstr =#ffffff, endcolorstr =#000000);}
위에서 아래로
스타일 = 필터 : progid : dximagetransform.microsoft.gradient (gradientType = 0, startColorstr = blue, endcolorstr = white);
3. 호버의 스타일은 다양한 효과를 달성하고 유연하게 사용할 수 있습니다.
#outer a {border : 1px solid #069;}
#OUTER A : 호버 {테두리 : 1PX 대시 #C00;}
4. 보더 : 없음; 국경과의 차이 : 0
이론적 성능 차이 :
국경 : 0; 테두리를 0 픽셀로 설정하면 페이지에서 보이지 않지만 테두리 기본값 값에 따르면 브라우저는 여전히 경계 폭/국경 색상, 즉 메모리 값이 점유되었습니다. 국경 : 없음; 국경을 없애지 않습니다. 즉, 브라우저가 없음, 즉 메모리 값이 소비되지 않을 때 렌더링 조치가 없습니다.
호환성 차이 :
호환성 차이는 브라우저 IE6, IE7, 태그 버튼, 입력에만 해당되며 Win, Win7 및 Vista의 XP 테마에서 발생합니다. 국경이 없을 때, IE6/7의 유효하지 않은 경계는 여전히 존재하는 것 같습니다. 테두리가 0 일 때는 아무 것보다 더 효과적입니다. 모든 브라우저는 지속적으로 테두리를 숨 깁니다.
국경을 만드는 방법 : 없음; 완전히 호환 되나요? 동일한 선택기에 배경 속성을 추가하십시오
5.CSS는 다중 열 윤곽 레이아웃, 양의 내부 마진 및 음수 외부 마진을 구현합니다.
윤곽선을 달성하는 데 필요한 각 열에 스타일을 적용하십시오. .e {Padding-Bottom : 32767px; 마진 바닥 : -32767px;}
6. 위치 : 상대적; 특별 사용? ? ? ?
* {마진 : 0; 패딩 : 0; font : 정상 12px/25px songti;}
바디 {배경 :#f8f8f8;}
ul {목록 스타일 : 없음; 너비 : 300px; 높이 : 25px; 마진 : 20px 자동;}
li {float : 왼쪽; 너비 : 86px; 높이 : 25px; 텍스트 -정렬 : 중심; 마진 : 0 -5px; 디스플레이 : 인라인;}
A {색상 : #ffff; float : 왼쪽; 너비 : 86px; 높이 : 25px; 상단 : 0; 왼쪽 : 0; 배경 : URL (***. gif) 센터 센터 No-Repeat;}
A : 호버 {색상 :#000; 배경 : URL (***. gif) 0 0 No-Repeat; 너비 : 86px; 위치 : 상대;}
세부 6 ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. InnerText : 시작 위치에서 끝 위치로의 내용은 태그 내부 html을 포함하지 않습니다.
OUTERHTML : InnerHTML 및 태그가 포함되어 있습니다
<div id = test> <span> test1 </span> test2 </div>
test.innertext : test1 test2
test.innerhtml : <span> test1 </span> test2
test.outerhtml : <div id = test> <span> test1 </span> test2 </div>
2. 번호 () : 숫자가 아닌 문자가 포함 된 문자열이 매개 변수로 사용되는 경우 결과는 NAN입니다.
parseint () : 왼쪽에서 오른쪽으로 줄을 왼쪽에서 오른쪽으로 숫자로 변환하지 않을 때까지 멈출 때까지 문자열을 왼쪽에서 오른쪽으로 변환합니다.
ISNAN () : 매개 변수가 숫자가 아닌 경우 true를 반환합니다.
3. a = 23.50ABC
타입 (a) = 문자열
parsefloat (a) = 23.5
parseint (a) = 23
번호 (a) = nan
4. JS 변수 이름에는 달러 표지판으로 밑줄이 그어진 숫자가 포함되어 있으며 숫자로 시작할 수 없습니다.
5. 문서가로드 된 후 getElementsByTagName_r ()를 검색해야합니다.
6. Nodetype : 12 유형, 1은 요소 노드를 나타내고 3은 텍스트 노드를 나타냅니다.
Nodename : 노드 이름을 나타냅니다. 텍스트 노드 인 경우 #text를 의미합니다
nodevalue : 노드의 값을 나타냅니다
예 : if (obj.nodename.tolowercase () == 'li') {} 노드를 가져옵니다.
p document.getElementsByTagname_r ( 'p') [0] .firstChild.Nodevalue = ''의 텍스트 내용을 변경하십시오.
7. 부모 노드에서 하위 노드
Childnodes : 더 깊은 아동 노드 제외, 요소의 모든 첫 번째 수준의 자식 노드 목록
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
Haschildnodes () 요소에 자녀가 있는지 여부를 결정하고 부울 가치를 반환합니다.
7. 자식 노드에서 부모 노드
var parentelm = mylinkitem.parentNode;
while (parentelm, classname! = 'syna'&& parentelm! = 'document.body')
parentelm = parentelm.parentNode
8. 요소 속성을 수정하십시오
1) 객체 속성 형태로 설정 또는 설정
var mainimage = document.getElementByIdx_x ( 'nav'). getElementsByTagName [ 'img'] [0];
mainimage.src = '';
메인.;
2) getAtattribute () 및 setAttribute () 메소드를 사용하십시오
세부 7 ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1. x 소수점이있는 형태로 숫자를 변환합니다.
{var m = math.pow (10, 정밀);
var a = math.round (base*m)/m;
반환 a;
}
var n = 3.942487;
Roundto (n, 3) = 3.942
Roundto (n, 0) = 3
2. 제한된 랜덤 숫자를 만듭니다
기능 randombetween (Min, Max)
{return min+math.floor (math.random ()*(max-min+1))}
3. 숫자를 문자열로 변환하십시오
var a = 10;
a = string (a);/a = a.tostring ();
4. URL 인코딩
var a =? p = e;
var b = 탈출 (a);
var c = (b);
5. 문서의 요소 유형을 변경하십시오
p ---> div
먼저 div 요소를 작성한 다음 p의 하위 노드를 div로 복사 한 다음 마지막으로 p로 교체하십시오.
6. 함수에 필요한 매개 변수 수
함수 추가 (n1, n2) {}
return num = add.length;
7. 함수에서 얼마나 많은 매개 변수가 전달되는지
함수 추가 (n1, n2) {
return arguments.length;}
세부 8 ……………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………
1). 디스플레이 : 인라인 블록; 이름에서 알 수 있듯이 인라인의 블록 모양이며 높이 너비를 설정할 수 있습니다.
.Element-Class {
디스플레이 : -moz-inline-stack; // Firefox 전용 코드
디스플레이 : 인라인 블록; // 일부 표준 브라우저
줌 : 1; // 예를 들어
*디스플레이 : 인라인; // IE만이 코드를 알고 있습니다 (CSS Hack)
}
2) 플로트를 청소합니다
.ClearFix : {가시성 : 숨겨진; 디스플레이 : 블록; 글꼴 크기 : 0; 내용 :; clear : 둘 다; 높이 : 0;}
.ClearFix {Zoom : 1;}
3). 주소 표시 줄에 사용자 정의 아이콘을 추가하십시오
먼저 16*16 픽셀 크기의 아이콘 파일을 미리 만들어야합니다. 파일 확장자는 ICO이며 해당 디렉토리에 업로드합니다. HTML 소스 파일 <Head> </head> 사이에 다음 코드를 추가하십시오. 물론 사용자가 IE5 이상을 사용하여 탐색하면 훨씬 쉽습니다. 웹 사이트의 루트 디렉토리에 사진을 업로드하면 자동으로 인식 할 수 있습니다!
4). 디스플레이를 설정할 때 : <p style = height : 1px;> </p>와 같이 IE6의 블록의 빈 컨테이너가 더 작은 높이로, 높이가 특정 값보다 작을 수 없다는 것을 알게됩니다. 해결책 : 오버플로 설정 : 숨겨진.
5). 텍스트는 타원체로 잘립니다
div {너비 : 200px; 높이 : 100px; 오버플로 : 숨겨진; 텍스트-오버 플로우 : 엘립스 시스; 흰색 공간 : nowrap;}