CSS 웹 페이지 레이아웃 팁

프런트 엔드 웹 페이지 레이아웃 팁:

(권장 동영상 튜토리얼: css 동영상 튜토리얼)

1 Mozilla에서는 ul 태그에 기본적으로 패딩 값이 있지만 IE에서는 여백에만 값이 있습니다. .

2. 동일한 클래스 선택기는 문서에 반복적으로 나타날 수 있지만 ID 선택기는 클래스와 ID를 동시에 사용하여 정의가 반복되면 ID 선택기가 수행됩니다. ID의 가중치가 CLASS보다 크기 때문에 정의가 유효합니다.

3. 호환성을 조정하는 어리석은 방법(IE 및 Mozilla):

초보자는 다음과 같은 상황에 직면할 수 있습니다. IE에서는 동일한 레이블 속성을 A로 설정하는 것이 일반적이지만 Mozilla에서는 A로 설정해야 합니다. .B가 되거나, 둘이 뒤집어졌을 때만 정상적으로 표시될 수 있습니다.

임시 해결 방법:

选择符{属性名:B !important;属性名:A}

4. 중첩된 태그 그룹에 약간의 간격이 필요한 경우 외부에 있는 태그의 패딩을 정의하는 대신 내부에 있는 태그의 여백 속성에 그대로 두는 것이 좋습니다. li 태그 앞의 아이콘에는 목록 스타일 이미지 대신 배경 이미지를 사용하세요.

6. IE는 상속관계와 부자관계를 구분하지 못합니다. 모두 상속관계입니다.

7. 태그에 선택기를 추가할 때 CSS의 선택기에 주석을 추가하는 것을 잊지 마세요. 나중에 CSS를 수정할 때 이 작업을 수행하는 이유를 알게 될 것입니다.

8. 라벨에 어두운 배경 이미지와 밝은 텍스트 효과를 설정하는 경우. 이때 라벨의 배경색을 더 어둡게 설정하는 것이 좋습니다.

9. 링크의 4가지 상태를 정의할 때 순서에 주의하세요.

Link Visited Hover Active

10. 내용과 관련 없는 사진은 배경을 사용하세요

11. 정의 색상은 #8899FF=#로 줄여서 사용할 수 있습니다. 89F

12. 어떤 측면에서는 테이블 다른 태그보다 성능이 훨씬 좋습니다. 컬럼 정렬이 필요한 곳에 사용하시기 바랍니다.

13. <script>에는 언어 속성이 없습니다. </script>

다음과 같이 작성해야 합니다.

<script type=”text/JavaScript”>

14. 제목은 제목의 텍스트입니다.

때때로 제목에 텍스트를 표시할 필요가 없으므로

제목 콘텐츠

가

제목 콘텐츠

15로 변경됩니다. 완벽함 단일 픽셀 개요 테이블(IE5, IE6, IE7 및 FF1.0.4 이상에서 테스트 통과 가능)

table{border-collapse:collapse;}
td{border:#000 solid 1px;}

16. 레이블이 절대 위치 지정을 사용할 때 음수 여백 값이 상대 위치 지정에 역할을 할 수 있습니다. 페이지가 중앙에 표시되므로 left:XXpx 속성은 절대 위치 지정을 사용하는 레이어에 적합하지 않습니다. 상대적으로 위치를 지정해야 하는 라벨 옆에 이 레이어를 배치한 후 여백에 음수 값을 사용하는 것이 좋습니다.

17. 절대 위치 지정을 사용하는 경우 여백 값을 사용하여 자체 위치를 기준으로 위치를 지정할 수 있습니다. 이는 창 가장자리를 기준으로 위쪽 및 왼쪽과 같은 속성의 위치 지정과 다릅니다. 절대 위치 지정의 장점은 다른 요소가 자신의 존재를 무시할 수 있다는 것입니다.

18. 텍스트가 너무 긴 경우 긴 부분을 줄임표로 변경하여 표시합니다. IE5, FF는 유효하지 않지만 숨길 수는 있지만 IE6은 유효합니다

<p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

19. IE의 주석으로 주석을 다음과 같이 변경할 수 있습니다:

<!–[if !IE]>Put your commentary in here…<![endif]–>

20. CSS를 사용하여 외부 글꼴을 호출하는 방법

구문:

@font-face{font-family:name;src:url(url);sRules}

값:

이름: 글꼴 이름. 글꼴 계열 속성의 가능한 모든 값

url(url): OpenType 글꼴 파일을 지정하려면 절대 또는 상대 URL 주소를 사용하세요.

sRules: 스타일 시트 정의

21 양식의 텍스트 상자에 텍스트를 수직으로 가운데 맞추는 방법. ?

FF에서 line height와 height의 조합이 효과가 없다면, 원하는 효과를 얻기 위해 위쪽과 아래쪽 패딩을 정의하는 방법이 있습니다.

22. A 레이블을 정의할 때 주의해야 할 작은 문제:

{color:red;}를 정의하면 A의 네 가지 상태의 스타일을 나타냅니다. 마우스가 있는 상태를 정의하려면 배치되면 a:hover를 정의하면 됩니다. 다른 세 가지 상태는 A에 정의된 스타일입니다.

a:link가 하나만 정의된 경우 다른 세 가지 상태를 정의하는 것을 잊지 마세요!

23. 모든 스타일을 축약할 필요는 없습니다.

스타일 시트가 p{padding: 1px 2px 3px 4px}로 정의되면 후속 프로젝트에 위쪽 패딩이 5px이고 아래쪽 패딩이 6px인 다른 스타일이 추가됩니다. 반드시 p.style1{padding:5px 6px 3px 4px}를 작성할 필요는 없습니다. p.style1{padding-top:5px;padding-right:6px;} 이렇게 쓰면 원본만큼 좋지 않다고 생각하실 수도 있는데, 혹시 생각해보신 적 있으신가요? 메소드는 스타일을 반복적으로 정의합니다. 또한 원래의 아래쪽 패딩 값과 왼쪽 패딩 값이 무엇인지 알 필요가 없습니다! 앞으로 이전 스타일 P가 변경되면 정의한 p.style1의 스타일도 변경됩니다.

24. 웹사이트 규모가 클수록 CSS 스타일도 많아지기 전에 명명 규칙을 포함한 충분한 준비와 계획을 세워주세요. 페이지 블록 분할, 내부 스타일 분류 등

25. 일반적으로 사용되는 여러 가지 CSS 스타일:

1) 한자의 양쪽 끝 정렬:

text-align:justify;text-justify:inter-ideograph;

2) 고정 폭 한자 잘림:

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(단, 한 쪽의 텍스트 잘림만 처리할 수 있습니다. 여러 줄을 처리할 수 없으며 여러 OK를 처리할 수 없습니다.) (IE5 이상) FF는 할 수 없으며 숨기기만 합니다.

3) 고정폭 한자(단어) 줄바꿈:

table-layout:fixed; word-break:break-all;

(IE5 이상) FF는 불가능합니다.

4）文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：

.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}

在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）Flash透明：

选中swf,打开原代码窗口，在前输入 以上是针对IE的代码。

针对FIREFOX 给 标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img 
{
filter: alpha(opacity=45); 
}
.pictures a:hover img 
{
filter: alpha(opacity=90); 
}

图文教程推荐：CSS教程

위 내용은 CSS 웹 페이지 레이아웃 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!