DIV+CSS 레이아웃
6441 단어 div+css
DIV+CSS 레이아웃 에 사용 되 는 CSS 필수 지식 을 보십시오http://www.kwstu.com/ArticleView/divcss_201442291125960
DIV+CSS 레이아웃 의 주요 CSS 속성 소개:
Float:
Float 속성 은 DIV+CSS 레이아웃 에서 가장 기본 적 이 고 자주 사용 되 는 속성 입 니 다.다 열 기능 을 실현 하 는 데 사 용 됩 니 다.
탭 의 기본 줄 은 하나만 표시 할 수 있 고 Float 속성 을 사용 하면 한 줄 에 여러 개의 div 를 표시 하 는 기능 을 실현 할 수 있 습 니 다.가장 직접적인 해석 방법 은 표 격 레이아웃 의 다 열 기능 을 실현 할 수 있 습 니 다.
Margin:
Margin 속성 은 두 요소 사이 의 거 리 를 설정 하 는 데 사 용 됩 니 다.
Padding:
Padding 속성 은 요소 의 테두리 와 내용 의 거 리 를 설정 하 는 데 사 용 됩 니 다.
Clear:
Float 속성 을 사용 하여 한 줄 에 여러 개의 DIV 가 있 는 지 설정 한 후(여러 열)다음 줄 이 시작 되 기 전에 Clear 속성 을 사용 하여 변동 을 분명하게 하 는 것 이 좋 습 니 다.그렇지 않 으 면 위의 레이아웃 이 아래 에 영향 을 줄 수 있 습 니 다.
실례 설명:아래 실례 를 사용 하여 간단 하면 서도 기본 적 인 레이아웃 을 만 들 면 다음 그림 과 같은 효과 가 있 습 니 다.
코드:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
설명:Container 는 전체 페이지 의 용기 로 서 전체 페이지 가 브 라 우 저의 위 치 를 제어 합 니 다.여 기 는 margin:0 auto 를 사용 합 니 다.Container 용기 가 브 라 우 저 에서 수평 으로 가운데 있 는 것 을 제어 합 니 다.보통 고정 너비 의 레이아웃 은 이 코드 를 사용 합 니 다.
Margin:
Margin 속성 은 두 요소 사이 의 거 리 를 설정 하 는 데 사 용 됩 니 다.
Padding:
Padding 속성 은 요소 의 테두리 와 내용 의 거 리 를 설정 하 는 데 사 용 됩 니 다.
Clear:
Float 속성 을 사용 하여 한 줄 에 여러 개의 DIV 가 있 는 지 설정 한 후(여러 열)다음 줄 이 시작 되 기 전에 Clear 속성 을 사용 하여 변동 을 분명하게 하 는 것 이 좋 습 니 다.그렇지 않 으 면 위의 레이아웃 이 아래 에 영향 을 줄 수 있 습 니 다.
실례 설명:아래 실례 를 사용 하여 간단 하면 서도 기본 적 인 레이아웃 을 만 들 면 다음 그림 과 같은 효과 가 있 습 니 다.
코드:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>DIV+CSS </title> <style type= "text/css" > #Container{ width:1000px; margin: 0 auto; /* */ background:#CF3; } #Header{ height:80px; background:#093; } #logo{ padding-left:50px; padding-top:20px; padding-bottom:50px; } #Content{ height:600px; /* ， ， overflow:auto; ， ， 1 ， （footer） margin-top: */ margin-top:20px;/* margin ， content header */ background:#0FF; } #Content-Left{ height:400px; width:200px; margin:20px;/* 20 */ float:left;/* ， ，div+Css */ background:#90C; } #Content-Main{ height:400px; width:720px; margin:20px;/* 20 */ float:left;/* ， ，div+Css */ background:#90C; } /* ：Content-Left Content-Main Content ， float:left; ， padding、margin Content ， */ #Footer{ height:40px; background:#90C; margin-top:20px; } .Clear{ clear:both; } </style> </head> <body> <div id= "Container" > <div id= "Header" > <div id= "logo" > padding padding ,padding 。</div> </div> <div id= "Content" > <div id= "Content-Left" >Content-Left</div> <div id= "Content-Main" >Content-Main</div> </div> <div class = "Clear" ><!-- float , 。--></div> <div id= "Footer" >Footer</div> </div> </body> </html> 설명:Container 는 전체 페이지 의 용기 로 서 전체 페이지 가 브 라 우 저의 위 치 를 제어 합 니 다.여 기 는 margin:0 auto 를 사용 합 니 다.Container 용기 가 브 라 우 저 에서 수평 으로 가운데 있 는 것 을 제어 합 니 다.보통 고정 너비 의 레이아웃 은 이 코드 를 사용 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
자주 사용하는div+css 3열 레이아웃 구조와 스타일 (1)3열 레이아웃은 흔히 볼 수 있는데 보통 좌우 2열의 너비가 고정된 다음에 중간 내용이 스스로 적응한다. 구조: 스타일: 부동을 이용하여 왼쪽 층을 왼쪽으로 부동시키고 오른쪽 층을 오른쪽으로 부동시킨 다음에 중간 층...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
