본문 내용의 테두리 CSS, HTML

HTML에서 본문 내용의 테두리를 만드는 데 어려움을 겪고 있습니다.본문 내용의 테두리 CSS, HTML

-moz-border-image: url(/images/border.png) 20 repeat; 
-webkit-border-image: url(/images/border.png) 20 repeat; 
-o-border-image: url(/images/border.png) 20 repeat; 
border-image: url(/images/border.png) 20 repeat; 
behavior: url(/css/PIE.htc);

을 ...하지만 탐색기에서 작업하고 다른 브라우저도 이전 버전되지 않기 때문에, 나는 그것을 만드는 옛날 방식에 와서하기로 결정했습니다 : 내가 사용. 그러나, 어떻게 해야할지 잘 모르겠습니다.

<BODY leftmargin=0" topmargin=0" marginwidth=0" marginheight=0" class="content"> 
<TABLE align="center" width="880" cellpadding="0" cellspacing="0" border="0"> 
    <TR> 
     <TD><IMG src="/images/b-01-tl.jpg" alt="" width="20" height="20" border="0"><BR> 
     </TD> 
     <TD background="../images/b-01-mt.jpg" width="100%" valign="bottom"> 
     </TD> 
     <TD><IMG src="/images/b-01-tr.jpg" alt="" width="20" height="20" border="0"><BR> 
     </TD> 
    </TR> 
    <TR> 
     <TD background="../images/b-01-ml.jpg"><BR> 
     </TD> 
     <TD bgcolor="#000000" class="bg-w0">

지금은 사업부와 HTML5로 페이지를 만들었 ..하지만 우리는 그런 우리의 오래된 웹 페이지에있는 테이블을 사용했다. 누구나 콘텐츠 주위에 새로운 경계를 구현하는 방법을 알 수 있습니까? 왼쪽 상단, 위쪽 라인, 오른쪽 상단, 오른쪽 하단, 오른쪽 하단, 하단 라인, 왼쪽 하단 및 왼쪽 라인의 8 가지 사진이 있습니다. div를 사용하여 작업을 수행하는 것이 가능하다는 것을 알고 있지만 튜토리얼에서는 그 작업을 수행하는 방법을 찾을 수 없습니다. 어떤 도움을 기다리는 : 당신은 국경의 사진를 필요로하는 경우에, 저를 작성하고 내가 업로드 그것을

출처

2012-07-10 user1384668

맨 위/왼쪽 위/오른쪽 위 경계가 포함 된 상단에는 3 개의 div : 1을 사용할 수 있습니다. 왼쪽/오른쪽 테두리 1 개; 하단/하단 - 왼쪽/하단 - 오른쪽 1; 3 이미지 모두. 중간의 콘텐츠는 콘텐츠의 높이까지 동적으로 늘어납니다. –

을'누락 잘못이다 " 옛날 방식 "어, 경계 이미지가 지원 부족으로 당신을 부끄러워하기 때문에?

<body> 
<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
    <tbody> 
     <tr valign="top"> 
      <td class="upper-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td class="upper-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td> 
      <td class="upper-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>  
     <tr valign="top"> 
      <td class="middle-left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td width="100%"> 
       <!-- content below --> 

       <!-- content above --> 
      </td> 
      <td class="middle-right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>   
     <tr valign="top"> 
      <td class="lower-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
      <td class="lower-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td> 
      <td class="lower-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td> 
     </tr>   
    </tbody> 
</table> 
</body>

을 그리고 CSS :

이

<style type="text/css"> 
body { padding: 0; margin: 0; } 
table tbody tr td { background-repeat: repeat; background-position: 0 0; } 

.upper-left {background-image: url(/images/b-01-tl.jpg);} 
.upper-center {background-image: url(/images/b-01-mt.jpg);} 
.upper-right {background-image: url(/images/b-01-tr.jpg);} 

.middle-left {background-image: url(/images/b-01-ml.jpg);} 
.middle-right {background-image: url(/images/b-01-ml.jpg);} 

.lower-left {background-image: url(/images/b-01-bl.jpg);} 
.lower-center {background-image: url(/images/b-01-mb.jpg);} 
.lower-right {background-image: url(/images/b-01-bl.jpg);} 
</style>

그래서 테이블 자체에, 우리는 우리의 국경 이미지가 서로 완벽하게 정렬 할, 즉 왜 우리를 글쎄, 여기에 옛날 방식이 더 이하의 cellspacing="0" cellpadding="0" border="0"이 필요합니다. 패딩이 0이고 테두리가 접히는 요즘은 무너질 수 있습니다. 이 종류의 테이블은 필요한만큼 신축성이 있습니다. 전체 너비 또는 좁은 너비 (예 : 60 픽셀)가 될 수 있습니다. width 속성은 값의 일부로 "px"를 사용하지 않습니다. 따라서 100 %는 100 %이지만 60px는 60입니다.

중간 열에는 <td> 각각에 대해 width="100%"을 설정하여 마지막 열이 실수로 너무 넓어서 우회적으로 진행되도록합니다 너비 - 그래서 우리는 빈 GIF를 사용하여 배경을 볼 수 있고 올바른 크기를 얻을 수 있습니다. 경우에 따라서는  을 사용할 수도 있지만 크기가 예측할 수없는 경우가 있습니다. 이러한 경계선을 2 픽셀 높이로 만들려는 경우 위험합니다. 한동안 사람들은 실제 Netscape <spacer> 태그를 사용했지만 그다지 제대로 작동하지 않았습니다.

실제로 align = "left"및 align = "right"가 있습니다. 왼쪽 및 오른쪽 <img> 태그에 빈 gif를 사용하는 대신 실제 이미지를 사용했다면 그렇게 할 수 있습니다.

이 예제에서는 CSS를 사용하여 배경을 실제로 적용하고 있습니다. 실제로이 점을 이해하지 못하는 지난 10 년 동안 만든 브라우저를 생각할 수 없으며 유지 관리가 약간 더 쉽습니다. 나는 background 속성을 사용하는 것을 결코 좋아하지 않았으며, 언젠가는 미래에 일부 브라우저가 지원하지 않을 것이라고 확신합니다. 이 솔루션은 그런 식으로 앞뒤로 보입니다. 나는 하루 종일이 마크 업을 많이했다.

일반적으로 테두리를 만들었을 때 국경과 어느 정도 일치하는 배경색을 포함 시켰습니다. bgcolor 속성을 사용하면 <tr>에 지정할 수 있습니다. 한 번만 지정하거나 전체적으로 지정할 수 있습니다 표를 클릭 한 다음 필요한 셀에서 재정의하십시오. 마크 업 (markup)을 줄이면 항상이 기능이 향상됩니다. 그렇지 않으면 검색 기능이 잘 작동하고 문서에서 교체됩니다.불행히도 오래된 디즈니 랜드 사이트의 예는 나에게 유용하지 않지만, http://web.archive.org/web/19980709083315/http://namco.com/은 영감을 얻기 위해 테이블과 스페이서 gif를 많이 사용합니다.

출처

2012-07-10 13:14:46 artlung

I 이처럼 역사 수업을 즐기세요. 생각해 보니, HTML 표현 특성에 연루된 것을 기억할 수있어서 놀랍습니다. 그때까지도 십대는 아니 었습니다. (Crazy.) . 정직하게!) – BoltClock

고마워, 나는 그것을 작동하게 만들었다 :) IE6에는 여전히 약간의 결함이있다. 그러나 나는 정말로 러시아가 그들의 브라우저를 곧 업데이트 할 것을 희망한다. – user1384668

코드는, 당신은 그래서 당신이 그것을하고 싶은 '

-moz-border-image: url('/images/border.png') 20 repeat; 
-webkit-border-image: url('/images/border.png') 20 repeat; 
-o-border-image: url('/images/border.png') 20 repeat; 
border-image: url('/images/border.png') 20 repeat; 
behavior: url('/css/PIE.htc');

출처

2012-07-10 12:41:18

아니요, 괜찮습니다. 따옴표는 필요하지 않습니다. – BoltClock

예, 여전히 IE는 테두리 이미지를 지원하지 않습니다 .. 어떻게 옛날 방식으로 그렇게합니까? :) – user1384668

@BoltClock CSS에서 ''나쁜 습관이 없습니까? 그리고 누락 된 ''여전히 그것을 작동하게 할 수 있습니까? –

본문 내용의 테두리 CSS, HTML

답변

관련 문제