요약 작업을 수행하는 방법은 무엇입니까?

저는 디자이너 친구를위한 웹 사이트를 만들고 있는데 디자인을 잘 할 수는 있지만 웹 사이트를 코딩하는 방법을 모릅니다. 그리고 그는 전문가에게는 너무 싸다. (800 픽셀 너비가 고정 된)요약 작업을 수행하는 방법은 무엇입니까?

Summary

그리고 그 페이지 컨테이너 중심으로해야합니다 : P

그는 다음과 같습니다 요약을 원한다.

내가 제일/가장 효율적인 방법이이 같은 들여 세포와 테이블, 것 할 생각 :

<html> 
<head> 
    <style type="text/css"> 
     body {background:#141318} 
     td  {min-width:266px;padding-top:10px;font-style:italic} 
     th  {font-size:14pt;font-family:sans-serif;text-align:left;color:#FFF} 
     td div {text-indent:20px;color:#999FAD} 
     td div a{color:#FFF} 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <th>DESIGN</th> 
      <th>MEDIA</th> 
      <th>ART</th> 
     </tr> 
     <tr> 
      <td><div>- 123</div><div>- <a href="#">456</a></div></td> 
      <td><div>- 789</div><div>- <a href="#">012</a></div></td> 
      <td><div>- <a href="#">345</a></div><div>- 678</div></td> 
     </tr> 
    </table> 
</body> 
</html>

하지만 많은 사람들이 테이블을 참조로보고, 너무 확실하지 않다 그것은 악의적 인 사례로서 표 형식의 데이터가 아닌 것에 사용됩니다.

이렇게하려면 어떻게해야할까요? 서로 옆에 세 개의 DIV가있을 수 있습니다. 고정 너비와 그 안에 div가로드되어 있습니까? (페이지 컨테이너가 이미 고정되어 있습니다.)

출처

2012-01-14 Simon M

예, 이것을 위해 테이블을 사용하지 마십시오. div와리스트의 조합은 완벽하게 작동합니다.

<html> 
<head> 
    <style type="text/css"> 
     #example {width:800px;} 
     #a {float: left; width: 250px;} 
     #b {float: left; width: 250px;} 
     #c {float: left; width: 250px;} 
    </style> 
</head> 
<body> 
    <div id="example"> 
    <div id="a"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
    <div id="b"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
    <div id="c"> 
     <h1>parent</h1> 
     <ul> 
      <li>child</li> 
      <li>child</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

CSS의 목록 스타일링은 쉬울 것입니다. 여기

가 좋은 정보입니다 - http://www.alistapart.com/articles/taminglists/

출처

2012-01-14 04:07:37 mcallinder

은 (AN 명확 추가로 : 모두) 좋은 작품, 감사합니다! –

요약 작업을 수행하는 방법은 무엇입니까?

답변

관련 문제