레이아웃 관련 문제 매우 좋음 통찰력_CSS/HTML

서문
차세대 WEB 개발 기술인 RIA 기술이 성숙되기 전에 우리는 물론 HTML과의 싸움을 계속해야 합니다. 얼마 전에는 "웹사이트 리팩토링"이 큰 인기를 끌었습니다.
이러한 작업은 모두 진전이 있었고 실제로 새로운 아이디어를 제공했습니다. 다음은 몇 가지 개발 경험을 요약한 것입니다.

레이아웃
1. 상하좌우 레이아웃
좀 더 많은 사람들이 배울 수 있도록 MM의 DW 소프트웨어를 사용하여 페이지 만드는 법을 배우기 시작했습니다. 웹 페이지.
페이지를 만들 때 DW를 사용했던 기억이 납니다. 한 친구가 "웹 페이지를 더 많은 양식으로 만드는 것과 더 많은 레이어를 사용하는 것의 차이점은 무엇입니까?"라는 같은 문장을 물었습니다.
실제로 DW의 Layout-Layout Table을 사용하여 전체 페이지의 프레임을 빠르게 그린 다음 단계별로 다듬는다고 말했습니다. 페이지 생성 속도는 매우 빠릅니다. 레이어를 사용하여 위치를 제어하기는 어렵습니다.
지금 생각해보면 정말 좀 오해가 있는 것 같아요. 하, 하지만 어쩌면 발전에는 과정이 필요할지도 모르겠습니다.

"웹사이트 재구성" 봄바람이 불고, 페이지 레이아웃에 레이어를 사용하는 것은 실제로 우리 개발에 새로운 아이디어를 가져왔습니다.
장점:
페이지가 더 명확해지고 코드 양이 줄어듭니다.
CSS가 더 널리 사용됩니다.

상단 및 하단 행, 명확한 레이어링, 코드 데모:

절대 위치 지정을 사용할 수 있습니다
#head{
position:absolute
top;10px
left:200px; 🎜> }

패딩을 사용하여 레이어 간 분리 제어

 

 


5. CSS를 사용하여 이미지 줄이기

페이지 레이아웃 데모(소스 코드를 볼 수 있으며 이전 TABLE 레이아웃보다 훨씬 명확해졌습니다) ：

http://davidblog.blogdriver.com/davidblog/ inc/demo_div.jpg

form
1. 폼의 여백과 패딩

예전에는 페이지에 폼을 삽입할 때 기본적으로 마진과 패딩이 0이 아닌 느낌이 항상 있었습니다.
CSS를 사용하여
형식으로 설정할 수 있습니다.
margin:0 0 0 0px

padding:0 0 0 0px; }
p 태그나 기타 태그를 정의할 수도 있습니다.

2.
optgroup 애플리케이션

을 선택합니다. 3. 체크박스 또는 라디오 라벨 추가


오늘


4. 버튼
이전 프로젝트에서는 사진 버튼을 사용했습니다. 애플리케이션의 결함을 점차적으로 발견합니다.
CSS를 사용하여 아름답게 만드는 것이 좋습니다.
실제로 CSS를 사용하면 더 아름다운 버튼


테이블
그래도 테이블을 사용해야 합니다. 테이블에는 항상 승리하는 쪽이 있습니다.
예를 들어 일부 데이터는 GRID를 표시하거나 구조가 비교적 균일하고 레이아웃이 행과 열로 나누어져 있습니다.
테이블 관련 스킬

응용 CSS 표현식
CSS 애플리케이션은 코드 작성을 줄일 수 있습니다
1. 테이블 마우스 이벤트



width:expression{document.body.clientWidth

주의할 점


메뉴 1


메뉴 2

• 
  
  
  건강 정보:
  키
  체중

  
  

  
  위 첨자