ul 리스트 마크 디자인 웹페이지 다열 레이아웃_HTML/Xhtml_웹페이지 제작

며칠 전 CSS로 3열 레이아웃을 작성할 때 갑자기 이 방법이 생각났는데, 뭔가 잘못된 것이 있으면 언제든지 조언해 주세요.
3열 레이아웃을 작성해야 할 때 일반적으로 다음 DIV 레이아웃 방법을 사용합니다.
그림 1 DIV 레이아웃
이러한 중첩 방법을 사용하면 의심할 여지 없이 코드 오류 가능성을 많이 줄일 수 있지만 동시에 이러한 레이아웃은 약간 복잡하고 나중에 유지 관리하기가 약간 불편합니다. 탐색을 레이아웃할 때 자주 사용하는 방법은 레이아웃에

목록을 사용하는 것입니다. 탐색은 다중 열 레이아웃으로 설명할 수 있습니다. 이 경우 다중 열 레이아웃에도 사용할 수 있습니다.
그림 2 DIV 레이아웃
이것은 고정 너비 레이아웃이므로 유동적 레이아웃은 아직 테스트되지 않았습니다. 시간이 나면 아래에 이 레이아웃의 코드를 붙여넣어 보겠습니다.

ldquo;-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



다중 열 레이아웃에 UL 사용 본문 {
너비:100%;높이:100%;
배경:#ddedfb;}
#mainContent {
너비:600px;
여백:10px 자동;
}
#header,#footer {
배경:#8AC7FA;
높이:80px;
clear:both;
}
#footer {
• clear:both;
padding-top:10px;
}
• #content {
  높이:300px;
  margin:10px auto;
  }
  • #content ul {
  list-style:none;
  height:100%;
  • }
  #content ul li {
  너비:150px;
  높이:100%;
  배경:#8AC7FA;
float:left;
}
• #content ul li#li2 {
너비:280px;
여백:0 10px;
}
#content ul li#li2 ul li {
너비:270px;
높이:140px;
여백:5px;
배경:#0581F0 ;
}



이것이 머리이것이 왼쪽입니다가운데 윗 부분입니다아래 부분이 중앙입니다 이것이 오른쪽이것이 바닥이다 이 코드는 IE7 및 FF3에서 정상적으로 표시될 수 있습니다. 다른 브라우저에서는 테스트되지 않았습니다. 더 좋은 방법이 있으면 제안해 주세요.