CSS 웹 페이지 레이아웃 입문 강좌 1:1 열 고정 너비

본 시리즈 의 튜 토리 얼 은 입문 급 튜 토리 얼 로 초보 자 들 이 공부 하기에 적합 하 며 가장 간단 한 지식 에서 조금씩 진급 합 니 다.주로 사례 를 위주 로 하고 일부 이론 이 적 으 며 초보 자 들 이 신속하게 파악 하 는 데 더욱 적응 된다.본인 도 공부 하고 있 기 때문에 약간의 잘못 이나 누락 이 있 을 수 있 으 니 여러분 의 지적 을 바 랍 니 다.본 튜 토리 얼 은'CSS 사이트 레이아웃 실 록'이라는 책 을 참고 하여 저자 에 게 감 사 를 드 립 니 다.DIV+CSS 를 잘 배 우려 면 먼저 HTML 과 CSS 지식 이 있어 야 합 니 다.만약 이것 을 아직 모 르 신다 면 먼저 이 수업 을 보충 하고 본 강 좌 를 공부 하 는 것 을 권장 합 니 다.또한 전통 적 인 표 구조의 사고방식 도 버 려 야 한다.왜 본 튜 토리 얼 을 공부 하면 서 느 낄 수 있 을 까?만약 이것 이 네가 모두 준비 가 다 되 었 다 면,그럼 시작 해라!한 열의 고정 폭,한 열의 고정 폭 은 기초 중의 기초 이기 때문에 이 절 은 입문 의 첫 번 째 절 이다.div 에 layot 를 id 이름 으로 사 용 했 습 니 다.보기 편 하도록 background-color 를 사 용 했 습 니 다. #E8F5FE;div 배경 색 을 옅 은 파란색 으로 설정 하고 border 로: 2px solid #A9C9E2;테 두 리 를 하늘색 으로 설정 합 니 다.배경 색 과 테두리 의 속성 은 다음 튜 토리 얼 에서 설명 할 것 입 니 다.고정 너비 레이아웃 이기 때문에 너비 속성 width 를 직접 설정 하 였 습 니 다. 300px;고도 속성 height: 200px;최종 효 과 는"이 코드 실행"단 추 를 눌 러 보십시오.[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]구체 적 인 절 차 를 설명 하 겠 습 니 다.이 시 리 즈 는 입문 급 튜 토리 얼 이기 때문에 dreaweaver 시각 화 개발 을 통 해 수 동 으로 코드 를 적 게 쓰 는 동시에 튜 토리 얼 에서 그림 을 최대한 배치 하여 간결 하고 쉽게 이해 할 수 있 습 니 다.CSS 에 대해 많이 알 고 있다 면 이 절 차 는 생략 할 수 있 습 니 다.1.dream weaver(8.0 예)를 열 고 파일 을 선택 하 십시오.새로 만 듭 니 다.
그림 과 같이 문서 형식 을 잘 선택 하고 XHTML 1.0 Transitional 형식 을 선택 하 는 것 을 권장 합 니 다.문서 유형 에 대한 더 많은 지식 을 참고 하 십시오적합 한 Doctype 을 선택 하여 CSS 실효 문 제 를 해결 합 니 다.도구 모음 에 div 태그 삽입 도 구 를 선택 하 십시오.대화 상자 의 ID 상자 에 id 이름 을 먼저 쓰 고 CSS 면 판 에 CSS 스타일 을 새로 만 들 거나 아래 에 있 는 새 css 스타일 단 추 를 직접 누 르 십시오.생 성 에 성공 하면 id 이름 이 자동 으로 삽 입 됩 니 다.확인 을 누 르 면 div 탭 이 페이지 에 삽입 되 었 음 을 볼 수 있 습 니 다.
CSS 스타일 설정 은 다음 과 같 습 니 다.
주:붉 은 선 상자 안의 부분 은 본 예 에서 설정 해 야 할 부분 입 니 다.어 때,한 줄 의 고정 폭 이 이렇게 간단 해!