CSS를 사용하여 프런트엔드 웹 페이지 레이아웃을 개선하기 위한 실용적인 팁

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

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

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

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

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

4. 중첩할 라벨 그룹 사이에 간격이 있는 경우 외부에 있는 라벨의 패딩을 정의하는 대신 내부에 있는 라벨의 여백 속성에 그대로 두세요
5. 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. 댓글로 인해 발생할 수 있습니다. 텍스트가 반복되면 댓글을

<!–[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의 4가지 상태를 나타냅니다. 마우스가 있는 상태를 정의하려면 이때 a:hover만 정의하고 나머지 3가지 상태는 A에서 정의한 스타일입니다.
a:link가 하나만 정의된 경우 나머지 세 가지 상태를 정의하는 것을 잊지 마세요!

23. 모든 스타일을 축약할 필요는 없습니다. 스타일 시트가 p{padding: 1px 2px 3px 4px}로 정의되면 상위 패딩이 5px이고 하위 패딩이 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를 사용하여 프런트엔드 웹 페이지 레이아웃을 개선하기 위한 실용적인 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!