Verwenden Sie geschickt CSS-Code, um eine abgerundete Tabelle zu erstellen-CSS-Tutorial-php.cn

Verwenden Sie geschickt CSS-Code, um eine abgerundete Tabelle zu erstellen

小云云

Freigeben： 2017-11-16 16:15:42

Original

2530 Leute haben es durchsucht

Wir alle wissen, dass CSS ein Cascading Style Sheet (vollständiger englischer Name: Cascading Style Sheets) ist, mit dem HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) auf dem Computer ausgedrückt werden kann Sprache für Dateiformate. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren.

Heute werde ich Ihnen einen kleinen Trick beibringen, wie Sie mithilfe von CSS-Code eine abgerundete Tabelle erstellen können. Die Wirkung von

ist wie folgt:

Verwenden Sie geschickt CSS-Code, um eine abgerundete Tabelle zu erstellen

<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>

Nach dem Login kopieren

CSS kann eine präzise Steuerung des Layouts von Elementpositionen in Webseiten auf Pixelebene durchführen. und unterstützt nahezu alle Schriftgrößen und -stile sowie die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten. Unabhängig davon, ob wir Front-End oder Back-End lernen, müssen wir alle grundlegende CSS-Kenntnisse beherrschen. Ich hoffe, dass das obige kleine Tutorial zum Erstellen abgerundeter Tabellen mit CSS für alle hilfreich ist.

Verwandte Empfehlungen:

Tutorial zum einfachen CSS3-Grafikzeichnen

Beispiel für die Implementierung eines Textfarbverlaufs in CSS

Ein Beispiel für die Verwendung von CSS zur Realisierung eines Kreisbewegungsballs

Das obige ist der detaillierte Inhalt vonVerwenden Sie geschickt CSS-Code, um eine abgerundete Tabelle zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!