CSS 코드를 영리하게 사용하여 둥근 테이블 만들기-CSS 튜토리얼-php.cn

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

小云云

풀어 주다： 2017-11-16 16:15:42

원래의

2604명이 탐색했습니다.

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로 둥근 테이블을 만드는 방법에 대한 작은 튜토리얼이 모든 사람에게 도움이 되기를 바랍니다.