웹 페이지를 디자인 할 때는 항상 불쾌한 것들을 만납니다. 가장 일반적인 것은 백그라운드에 콘텐츠를 추가 한 후 표시된 페이지가 열려있어 웹 페이지를 매우보기 흉한 것으로 나타났습니다. 과거에는 사람들이 기본적으로 테이블을 디자인 했으므로 온라인으로 자연스럽게 많은 솔루션이 있습니다. 이제 Div CSS 표준 디자인이 있으며 관련된 좋은 방법을 거의 보지 못합니다. 이제 Xiaoxiang Online은 테이블이 퍼지는 것을 방지하고 공유하는 것을 방지하기 위해 일상 생활에서 발견 된 좋은 방법을 요약합니다.
1. 예를 들어 웹 페이지에서 이미지 크기를 직접 설정하십시오 (예 : <img src = http : //www.cuoxin.com/images/cuoxincom.jpg width = 600 높이 = 500 경계 = 0). 이미지 크기를 제한 할 수 있지만 이미지를 업로드하기 전에 이미지 크기를 수동으로 수정해야합니다. 그렇지 않으면 업로드 된 이미지가 변형됩니다.
2. 다음 코드를 사용하십시오. <img src = http : //www.cuoxin.com/images/cuoxincom.jpg onload = javaScript : if (this.width> 600} {this.Resized = true; this.style.width = 600;}>
이 방법은 그림을 호출 할 때 지정된 너비로 자동 줄어들므로 그림이 변형되지 않으며 테이블이 깨지지 않습니다. 그러나 단점은 그림이 너무 크면 이미지 다운로드 프로세스 중에 이미지 표시 프로세스 중에 먼저 그림의 원래 크기로 표시되며 테이블이 끊어지고 페이지가 추악합니다. 둘째, 그림이 완전히 표시되면 사진이 자동으로 줄어 듭니다.
3. 예를 들어 <테이블 width = 600 경계 = 0 CellPading = 0 CellPacing = 0 셀 패키지 = 0 셀 패키지 = 0 셀 패키지 = 테이블 레이 아웃 : 고정; 워드 워드; 워드 브레이크; break-all;, 여기서 테이블 층 : 고정; 테이블이 늘어나지 못하게 할 수있는 테이블 레이아웃을 수정하는 것입니다. Word-Wrap : 브레이크 워드; 라인 브레이크, 즉 라인 브레이크를 시행하는 것입니다. 텍스트 내용이 많을 때 사용해야합니다. 특별한 중복 컨텐츠가 나타나고 라인 브레이크가 실행되지 않으면 테이블이 늘어납니다. 그리고 단어-브레이크 : 브레이크 alf; IE 프레임 워크가 영어 (아시아 텍스트 라인 이외의 텍스트 라인)로 퍼지는 문제를 해결할 수 있지만 라인 랩을 강제하지 않으며 테이블 너비의 내용 만 표시됩니다. 일반적으로 Style = Table-Layout을 사용하십시오 : 고정; Word-Wrap : Break-Word; 물론 위에서 불리는 진술은 예를 들어 CSS에서 정의 할 수 있습니다.
| 테이블 { 테이블 레이 아웃 : 고정; Word-Wrap : 브레이크 워드; } |
4. CSS를 사용하여 그림의 적응 형 크기를 제어하면 코드는 다음과 같습니다.
| img { 최대 세포 : 600px; 너비 : 표현식 (this.width> 600? 600px : this.width); 오버플로 : 숨겨진; } |
그중에서도 Max-Width : 600px; IE7 및 Firefox와 같은 다른 비 EI 브라우저에서 최대 너비는 600px이지만 IE6에서 유효하지 않습니다. 너비 : 600px; 모든 브라우저에서 사진의 크기는 600px입니다. 사진 크기가 600px보다 큰 경우 자동으로 600px로 축소되며 IE6에서 유효합니다. 그리고 오버플로 : 숨겨진; 이미지 크기를 제어하지 않아 테이블의 변형을 피하기 위해 세트 크기를 넘어 부분을 숨기는 것을 말합니다. 전체 이전 페이지 12의 2 페이지 다음 페이지