전문가들이 CSS 웹 페이지 레이아웃에 관한 25가지 실용적인 팁을 공유합니다.

이 글은 CSS 웹 페이지 레이아웃에 대한 실용적인 팁을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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

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

3. 호환성을 조정하는 어리석은 방법(IE 및 Mozilla): 초보자는 다음과 같은 상황에 직면할 수 있습니다. IE에서는 동일한 레이블의 속성이 A로 설정되면 정상적으로 표시되지만 Mozilla에서는 B로 설정되어야 합니다. 정상적으로 표시될 수도 있고, 둘이 반대로 표시될 수도 있습니다.

임시 해결 방법: 선택기 {속성 이름: B !important; 속성 이름: A}

4. 중첩할 태그 그룹 사이에 간격이 필요한 경우 패딩을 정의하는 대신 속성 내부에 태그의 여백을 남겨두세요. 외부 라벨

5.li 태그 앞의 아이콘에는 목록 스타일 이미지 대신 배경 이미지를 사용하는 것이 좋습니다.

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

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

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

9. 링크 방문 상태 Hover 활성

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은 유효합니다

<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>

예를 들어 다음과 같은 줄이 있습니다. 텍스트가 너무 길어서 테이블에 한 줄을 표시할 수 없습니다.

19. IE에서 댓글로 인해 텍스트 중복 문제가 발생할 수 있는 경우 댓글을 다음과 같이 변경할 수 있습니다.

여기에 댓글을 입력하세요…

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

구문: ​​

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

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

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;（不过只能处理文字在一行上的截断，不能处理多行。）（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网页布局实用小技巧的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

위 내용은 전문가들이 CSS 웹 페이지 레이아웃에 관한 25가지 실용적인 팁을 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!