DIV + CSS 웹 페이지 레이아웃 튜토리얼 (1): 플 로트 속성 소개

중간 트랜잭션 http://www.aliyun.com/zixun/aggregation/6858.html "> seo 진단 Taobao 게스트 클라우드 호스트 기술 홀

2008 년 7 월 이후 마오 차이에서 물러났다는 원래, 그리고 Ofseo 형제 함께 "창업 네트워크." 그 6 개월 시간에 많은 것 들을 배우고, div + css 웹 디자인, 검색 엔진 최적화 관련 지식, Google 애드 센스, 익은 dedecms와 다른 주요 CMS 및 포럼 시스템을 단일 페이지를 포함 하 여...

연구와 모색의 몇 개월을 통해 마오 차이 또한 많은 경험, 또한 약간의 인터넷 수수료를 적립 하려면 단일 페이지를 수행 하 여 원래 매우 그들의 자신의 경험에서 배우고 싶다 또한 주고 싶어 네트워크 신인 그래서 공유, 공유 하 고 인터넷 신인 처럼 사람의 역을 신속 하 게 개발할 수 있도록 기본 기술 네트워크의 일부을 마스터 하실 수 있습니다. 하지만 마오 차이 너무 게으른 할 하지 쓸 것, 같은 몇 시간 전에 또한 바쁜, 그래서 비록이 마음, 하지만 하지 않은 뭔가 작성 하 고 모든 사용자와 공유 하려면 시작, 마오 차이 일 단계, 그래서 유휴 찾는 시간이 더,이 기간. 사실, 우리는 컴퓨터를 너무 오래 할 모피 터치 사이트는 적어도 100, 하지만 타이핑 속도 슈퍼 느린, 지금까지 것입니다 하지 장 님, 하지만이 고급 메서드 입력 wubi 하지, 그래서 쓰기를 믿지 않을 수 있습니다 또 다른 이유는 나를 위해 뭔가 광대 한 프로젝트 이다.

글쎄, 처음가 십, 우리의 div + css를 시작 자습서.

이 자습서에서 나 주로 Div에 대 한 이야기 + css 페이지 레이아웃, 그래서 가장 기본적인 HTML과 CSS 기초 나 말을 하지 것입니다, 아니라면 전혀 기본 자습서를 보러 갈 수 있다.

DIV + CSS를 사용 하 여 페이지 레이아웃을 달성 하는 방법:

컨테이너 DIV, 웹 페이지에 콘텐츠가 내부 컨테이너에 포함 되어, 우리가 사용할 수 있는 테이블 사업부를 설정 하려면 설정된 테이블 처럼 수를 div로 테이블 (표)와 동일 테이블 레이아웃을 사용 하 여 익숙한 친구에 대 한 아이디어를 테이블을 사용 하 여 연구의 시작 부분에 div를 사용할 수 있습니다.

Div의 가로 배열에 대 한 친구는 매우 이해, 여기 말 div 문제의 수직 배열 하 고 쉽습니다.

예를 들어 살펴보겠습니다.

다음과 같이 전통적인 테이블 구조 레이아웃 코드를 사용 하는 경우 페이지의 두 개의 열이 있습니다.

< 헤드 >
< 제목 > 제목 문서 < / 타이틀 >
</헤드 >
< 몸 >
< 폭 표 "100%" 국경 = "0" cellspacing = "0" cellpadding = "0" = >
< tr >
< T d > 컨테이너 하나 < 신안 >
< /tr >
</테이블 >

< 폭 표 "100%" 국경 = "1" cellspacing = "0" cellpadding = "0" = >
< tr >

< TD width = "50%" > 컨테이너 2 < 신안 >

< TD width = "50%" > 컨테이너 3 < 신안 >
< /tr >
</테이블 >
</바디 >
< / html >

이 효과 어떻게 DIV + CSS로 작동 합니까? 코드를 살펴 봅시다:
< 헤드 >
< 제목 > 제목 문서 < / 타이틀 >
</헤드 >
< 스타일 >
. div1 {폭: 100%}
. 분주 div2 {플 로트: 왼쪽 폭: 50%}
. div3 {플 로트: 오른쪽 폭: 50%}

</스타일 >
< 몸 >
< div 클래스 "Div1" = > 컨테이너 < / div >
< div 클래스 "분주 Div2" = > 컨테이너 2 < / div >
< div 클래스 "Div3" = > 컨테이너 3 < / div >
</바디 >
< / html >

하자 그것에 보고 여기는 div + css의는 가장 중요 한 CSS 속성입니다.

구문:

플 로트: 없음 | 왼쪽 | 오른쪽

값:

없음:? 기본 값입니다. 개체 부동 하지 않습니다.

왼쪽:? 텍스트가 개체의 오른쪽으로 흐릅니다.

오른쪽:? 텍스트가 개체의 왼쪽으로 흐릅니다.

설명:

이 속성의 값을 개체 수레 여부 및 방법을 나타냅니다.

부동 개체를 다음 개체가 부동 개체의 위치를 이동 합니다. 테두리 (테두리, 패딩, 외부 패치 (여백 또는 다른 블록 개체 (블록 수준) 만날 때까지 부동 개체가 왼쪽 또는 오른쪽으로 이동.

예:

div 지우기: 왼쪽

img {플 로트: 오른쪽}

그래서 우리는 두 개의 병렬 컨테이너를 설정 거 야, 그냥 두 개의 컨테이너를 float 속성을 설정, 왼쪽 및 오른쪽 플 로트: rigeht 설정에 컨테이너에 플 로트: 왼쪽 설정. 특히, 그것은 필요한 총 폭 두 개의 병렬 컨테이너의 부모 컨테이너를 초과할 수 없습니다 또는 나란히, 표시 되지 않을 수 있지만, 컨테이너 하나 아래에 나타납니다.

여기에 친구의 말하기, 두 개의 컨테이너 배열 될 수 있다 이러한 방법으로, 그래서 방법에 대 한 3 개 이상의 병렬 컨테이너? 때문에 Float 속성은 3 값 Float: 없음 | 왼쪽 | 바로, 즉, 수만 부동 왼쪽 이나 오른쪽, 그래서 병렬의 수를 설정 하려면 컨테이너 같은 아이디어에 대 한 참조에 사용할 수 있습니다. 우리 두 측면-의해-측면 대형 컨테이너를 설정할 수 있습니다 그리고 다음 각 대형 컨테이너 다음과 두 개의 병렬 작은 용기, 고 등, 당신이 원하는 설정할 수 있습니다 n 병렬 컨테이너.

다음 예제를 살펴 봅시다:

간단한 코드는 다음과 같습니다.
< 헤드 >
< 제목 > 제목 문서 < / 타이틀 >
</헤드 >
< 스타일 >
. div1 {폭: 100%}
. 분주 div2 {플 로트: 왼쪽 폭: 50%}
. div3 {플 로트: 오른쪽 폭: 50%}
. div4 {플 로트: 왼쪽 폭: 50%}
. div5 {Float: 오른쪽 폭: 50%}

</스타일 >
< 몸 >< div 클래스 "Div1" = > 컨테이너 하나 < / div >
< div 클래스 "분주 Div2" = >
< div 클래스 "DIV4" = > 컨테이너 4 < / div >
< div class = "DIV5" > 컨테이너 5 < / div >
< / div >
< div 클래스 "Div3" = > 컨테이너 3 < / div >
</바디 >
< / html >

Div의 생각와 테이블 사이의 유사성을 많이 하지만 코드는 훨씬 간단 하 게, 그리고 실제 페이지 로딩 속도 테이블 구조 보다 훨씬 빠르게 볼 수 있습니다.

좋아, 첫 번째 강의 여기에, 다음 강의에 관심을 지불을 계속 하시기 바랍니다.

저자: 마오 Zi

출처: http://www.dianpu818.com/maozai/post/3.html

복제 원본 기사 소스를 유지 하십시오.