집 > 기사 > 웹 프론트엔드 > CSS 코드를 영리하게 사용하여 둥근 테이블 만들기

CSS 코드를 영리하게 사용하여 둥근 테이블 만들기

小云云원래의: 2017-11-16 16:15:422532검색

CSS는 HTML(Standard Generalized Markup Language의 응용 프로그램)이나 XML(Standard Generalized Markup Language의 하위 집합)을 표현하는 데 사용되는 파일인 Cascading Style Sheet(영어 전체 이름: Cascading Style Sheets)라는 것은 모두 알고 있습니다. 스타일의 컴퓨터 언어. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.

그래서 오늘은 CSS 코드를 사용하여 둥근 테이블을 만드는 방법을 가르쳐 드리겠습니다. 물론 둥근 div도 만들 수 있습니다.

효과는 아래와 같습니다:

CSS 코드를 영리하게 사용하여 둥근 테이블 만들기

<html xmlns="http://www.phpernote.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS打造圆角Table</title>
<style type="text/css">
div.RoundedCorner{background:#9BD1FA;width:260px;}
b.rtop, b.rbottom{display:block;background:#FFF}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}
b.r1{margin:0 5px}
b.r2{margin:0 3px}
b.r3{margin:0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height:2px}
</style>
</head>
<body>
    <div class="RoundedCorner">
        <b class="rtop">
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
            <b class="r4"></b>
        </b>
        <table style="width:100%;height:100px;">
            <tr>
               <td>单元格1</td>
               <td>phpernote.com</td>
            </tr>
            <tr>
               <td>单元格3</td>
               <td>单元格4</td>
            </tr>
        </table>
        <b class="rbottom">
            <b class="r4"></b>
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
        </b>
    </div>
</body>
</html>

CSS는 웹 페이지의 요소 위치 레이아웃을 픽셀 수준으로 정밀하게 제어할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일. 프론트엔드를 배우든 백엔드를 배우든 우리 모두는 기본적인 CSS 지식을 숙지해야 합니다. 위의 CSS로 둥근 테이블을 만드는 방법에 대한 작은 튜토리얼이 모든 사람에게 도움이 되기를 바랍니다.

CSS 코드를 영리하게 사용하여 둥근 테이블 만들기

관련 기사