CSS 웹 페이지 레이아웃 팁 요약

이 글은 CSS 웹 페이지 레이아웃 팁을 요약한 것입니다. 참고할 만한 가치가 있으므로 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

CSS 웹 페이지 레이아웃에는 다양한 기술이 있습니다. 다음은 초보자에게 적합한 CSS 웹 페이지 레이아웃 팁을 요약한 것입니다. 이는 보다 실용적인 참조 값이 될 수 있습니다.

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

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

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

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

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

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

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

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

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

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

9. 링크 방문 상태 Hover 활성

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

11. 정의된 색상은 #으로 축약될 수 있습니다. 8899FF=#89F

12. 테이블은 일부 측면에서 다른 태그보다 훨씬 더 나은 성능을 발휘합니다. 열 정렬이 필요한 곳에 사용하세요.

13. <script>에는 다음과 같이 작성해야 합니다. <script type="text/JavaScript"></script>

14. 제목의 내용입니다. 때로는 제목에 텍스트를 표시할 필요가 없으므로

제목 내용

이

제목 내용

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

Example Source Code

코드는 다음과 같습니다:

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

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

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

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

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

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

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

예제 소스 코드

코드는 다음과 같습니다.

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

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 웹 페이지 레이아웃 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!