div+css div+css divcss 레이아웃 입문 강좌 신속 다운로드

뭐 공부 해요? CSS 포석 이 요?아직 완전히 파악 할 수 없 는 거 아니 야? CSS 배치보통 두 가지 상황 이 당신 의 공 부 를 방해 합 니 다.     제. CSS 페이지 를 처리 하 는 원리.페이지 의 전체적인 표현 효 과 를 고려 하기 전에 내용 의 의미 와 구 조 를 먼저 고려 한 다음 에 의미,구조 에 대해 추가 해 야 한다. CSS。이 문장 은 너 에 게 어떻게 해 야 하 는 지 알려 줄 것 이다. HTML 구조 화     또 다른 이 유 는 당신 이 매우 익숙 한 표현 층 속성(예 를 들 어 cellpadding,hspace,align="left"등)에 대해 속수무책 으로 대응 하 는 것 으로 전환 해 야 할 지 모 르 기 때 문 입 니 다. CSS 구문.니 가 해결 하면 HTML,나 는 목록 을 하나 더 제시 하고 원래 의 표현 속성 을 자세히 보 여 줍 니 다. CSS 로 대체 하 다.     구조 화 HTML     우 리 는 웹 페이지 제작 을 처음 배 울 때 항상 어떻게 디자인 하 는 지 를 먼저 고려 하고 그림,글씨체,색깔,그리고 레이아웃 방안 을 고려한다.그리고 저희 가... Photoshop 또는 Fireworks 그림 을 그 려 작은 그림 으로 자르다.마지막 으로 편집 을 통 해서... HTML 모든 디자인 을 페이지 에 복원 합 니 다.     하면,만약,만약... HTML 페이지 용 CSS 레이아웃 ),당신 은 돌아 서서 다시 해 야 합 니 다.먼저'외관'을 고려 하지 않 고 페이지 내용 의 의미 와 구 조 를 먼저 생각해 야 합 니 다.     외관 이 중요 한 것 은 아니다.구조 가 양호 하 다 HTML 페이지 는 모든 외관 으로 표현 할 수 있 습 니 다.CSS Zen Garden 전형 적 인 예 다.CSS Zen  Garden 우리 가 마침내 깨 닫 도록 돕다 CSS 의 강력 한 힘.     HTML 컴퓨터 화면 에서 만 읽 는 것 이 아니다.네가 쓰다 photoshop 정성 들 여 디자인 한 화면 은 표시 되 지 않 을 수도 있 습 니 다. PDA,이동 전화,스크린 리더 에 있 습 니 다.하지만 구조 가 좋 은 HTML 페이지 통과 가능 CSS 의 다른 정 의 는 모든 네트워크 장치 에 표 시 됩 니 다.     생각 하기 시작 하 다     먼저'구조'가 무엇 인지 배 워 야 하고 일부 작가 들 도'의미'라 고 부른다.이 용 어 는 당신 의 내용 블록 과 모든 내용 서비스의 목적 을 분석 한 다음 에 이런 내용 의 목적 에 따라 해당 하 는 것 을 구축 해 야 한 다 는 뜻 이다. HTML 구조     만약 당신 이 앉 아서 당신 의 페이지 구 조 를 자세히 분석 하고 기획 한다 면,당신 은 이러한 몇 가 지 를 얻 을 수 있 습 니 다.  표지 와 사이트 이름   홈 페이지 내용   사이트 탐색(메 인 메뉴)   하위 메뉴   검색 상자   기능 구역(예 를 들 어 카 트,계산대)   꼬 릿 말(저작권 및 관련 법률 성명)   우 리 는 통상 적 으로 채택 한다 DIV 요 소 는 이러한 구 조 를 정의 합 니 다.다음 과 같 습 니 다.                    이것 은 포석 이 아니 라 구조 다.이것 은 내용 블록 에 대한 의미 설명 이다.당신 이 당신 의 구 조 를 이해 하면 대응 할 수 있 습 니 다. ID DIV 올라가다DIV 용기 에는 어떤 콘 텐 츠 블록 도 포함 할 수 있 고 다른 것 도 끼 워 넣 을 수 있 습 니 다. DIV。내용 블록 은 임의의 것 을 포함 할 수 있다. HTML 요소-제목,단락,그림,표,목록 등.     위 에서 말 한 바 에 의 하면,너 는 이미 어떻게 구조 화 하 는 지 알 고 있다. HTML,이제 레이아웃 과 스타일 정 의 를 할 수 있 습 니 다.모든 콘 텐 츠 블록 은 페이지 의 어느 곳 에 나 놓 을 수 있 습 니 다.이 블록 의 색상,글꼴,테두리,배경 과 정렬 속성 등 을 지정 할 수 있 습 니 다.     선택 기 를 사용 하 는 것 은 아름 다운 일이 다.     id 의 이름 은 특정한 콘 텐 츠 블록 을 제어 하 는 수단 입 니 다.이 콘 텐 츠 블록 에 DIV 를 씌 우 고 유일한 id 를 추가 하면 CSS 선택 기로 모든 페이지 요소 의 외관 표현 을 정확하게 정의 할 수 있 습 니 다.제목,목록,그림,링크 또는 단락 등 을 포함 합 니 다.예 를 들 어 당신 은\#header 입 니 다. 쓰다 CSS 규칙 은\#content 와 완전히 다 를 수 있 습 니 다. 안의 그림 규칙.  넷 째 페이지   《Div + CSS  포석 대전.  블 로그 가든 Jesse Zhao  정리 하 다.     http://jessezhao.cnblogs.com    MSN/Mail:[email protected]     또 다른 예 는 서로 다른 규칙 을 통 해 서로 다른 콘 텐 츠 블록 안의 링크 스타일 을 정의 할 수 있다 는 것 이다.이렇게:\#globalnav a:link 혹은 #subnav  a:link 혹은 a:link。서로 다른 콘 텐 츠 블록 에서 같은 요소 의 스타일 이 다르다 고 정의 할 수 있 습 니 다.#content p footer p 각각 정의\#content footer 중. p 스타일.구조 적 으로 볼 때 당신 의 페이지 는 그림,링크,목록,단락 등 으로 구성 되 어 있 습 니 다.이 요소 들 은 어떤 네트워크 장치 에 표 시 됩 니까?(PDA) 아니면 핸드폰 이나 인터넷 텔레비전)이 영향 을 미 치 는 지,그것들 은 어떠한 표현 외관 으로 도 정의 할 수 있다.     꼼꼼 한 구조 화 HTML 페이지 는 매우 간단 하고 모든 요 소 는 구조 적 목적 에 사용 된다.한 단락 으로 들 어가 고 싶 을 때 사용 할 필요 가 없습니다. blockquote 태그,사용 하기 만 하면 p 태그 플러스 CSS 의 margin 규칙 은 들 여 쓰기 목적 을 실현 할 수 있다.p 는 구조 화 된 태그,margin 표현 속성 HTML CSS。(이것 이 바로 표현 에 구 조 된 상 분리 이다.)     양호 한 구조의 HTML 페이지 에 속성 을 나타 내 는 탭 이 거의 없습니다.코드 가 아주 깔끔 하고 깔끔 합 니 다.예 를 들 어,원래 의 코드,지금 은 HTML 표현 을 제어 하 는 모든 것 을 기록 합 니 다. CSS 구조 화 HTML 가운데 다른 것 이 아니 라 표 입 니 다.     구조 화 를 직접 실천 해 보도 록 하 겠 습 니 다.     위 에서 말 한 것 은 가장 기본 적 인 구조 일 뿐 실제 응용 에서 필요 에 따라 내용 블록 을 조정 할 수 있다.자주 나타 납 니 다. DIV 끼 워 넣 은 경우"container"층 에 다른 층 이 있 는 것 을 볼 수 있 습 니 다.구 조 는 다음 과 같 습 니 다.     

a list

     

another list

          끼 워 넣 었 어 div 요 소 는 더 많은 것 을 정의 할 수 있 습 니 다. CSS 규칙 은 표현 을 제어 합 니 다.예 를 들 어\#navcontainer 를 줄 수 있 습 니 다. 목록 을 오른쪽 에 두 고\#globalnav 에 게 주 는 규칙 목록 을 왼쪽 에 두 고\#subnav 에 게 주 는 규칙 의 list 또 다른 전혀 다른 표현.     CSS 로 전통 적 인 방법 을 바꾸다     아래 목록 이 도움 이 될 것 입 니 다. CSS 전통 적 인 방법 바 꾸 기:  HTML 속성 및 대응 적 CSS 방법  HTML 속성 CSS 방법. 설명 하 다.   align="left"  align="right" float: left;      float: right; 쓰다 CSS 부동 가능 모든 요소:그림,단락,div,제목,표,목록 등      하면,만약,만약... float 속성,이 유동 요소 에 폭 을 정의 해 야 합 니 다.     marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 쓰다 CSS, margin 모든 요소 에 설정 할 수 있 습 니 다. 뿐만 아니 라 body 요소.더 중요 한 것 은 요 소 를 각각 지정 할 수 있 습 니 다. top, right, bottom 왼쪽 의 margin 값 1  vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;  a:visited: #339;  a:hover: #999;  a:active: #00f;      HTML 링크 색상 body 속성 값 정의전체 페이지 의 링크 스타일 이 같 습 니 다.쓰다 CSS 의 선택 기,페이지 의 다른 부분의 링크 스타일 이 다 를 수 있 습 니 다.     bgcolor="#FFFFFF" background-color: #fff; ...에 있다 CSS 에서 모든 요 소 는 배경 색 을 정의 할 수 있 습 니 다. body 화해시키다 table 요소.     bordercolor="#FFFFFF" border-color: #fff; 모든 요 소 는 테두리(boeder)를 설정 할 수 있 습 니 다.각각 정의 할 수 있 습 니 다. top, right, bottom 과 left  border="3"  다섯 째 페이지   《Div + CSS  포석 대전.  블 로그 가든 Jesse Zhao  정리 하 다.     http://jessezhao.cnblogs.com    MSN/Mail:[email protected]     cellspacing="3" border-width: 3px; CSS 를 사용 하면 table 의 테 두 리 를 통일 스타일 로 정의 할 수도 있 고 top 을 각각 정의 할 수도 있 습 니 다. right, bottom  and left 테두리 의 색상,사이즈,스타일.       사용 할 수 있 습 니 다. table, td or th 이 선택 기 들.      테두리 없 는 효 과 를 설정 하려 면 사용 할 수 있 습 니 다. CSS 정의: border-collapse: collapse;         clear: left;  clear: right;  clear: both;      허 다 하 다 2 열 혹은 3 열 레이아웃 모두 사용 float 속성 으로 포 지 셔 닝 합 니 다.부동 층 에서 배경 색 이나 배경 그림 을 정의 했다 면 사용 할 수 있 습 니 다. 속성 을 선택 합 니 다.  cellpadding="3"  vspace="3"     hspace="3" padding: 3px; 쓰다 CSS,모든 요 소 를 설정 할 수 있 습 니 다. padding 속성 각각 설정 가능 top, right, bottom  and left。padding 투명 합 니 다.  align="center" text-align: center;  margin-right: auto; margin-left: auto;   Text-align 텍스트 에 만 적 용 됩 니 다.      코끼리 div,p 이런 덩어리 급 원한 은 통과 할 수 있다. margin-right: auto; margin-left 와: auto;래 수평 이 중간이다     안 타 까 운 기교 와 근무 환경     브 라 우 저 CSS 지원 이 완선 되 지 않 아서 우 리 는 가끔 기술(hacks)을 사용 하거나 환경(Workarounds)을 만들어 서 CSS 를 전통 적 인 방법 과 같은 효 과 를 실현 하 다.예 를 들 어 블록 급 요 소 는 수평 가운데 에 있 는 기술,박스 모델 을 사용 해 야 합 니 다. bug 의 기교 등등.이 모든 기술 이 다 있 습 니 다. Molly  Holzschlag 통합 Web Design: Strategies for Long-Term CSS Hack Management>에 상세 한 설명 이 있다.      다른 CSS 기술 의 자원 사이트 는 Big John 화해시키다 Holly Bergevin 라 고 말 했다. 。  로 컬 다운로드