Heim > Artikel > Web-Frontend > Verwenden Sie geschickt CSS-Code, um eine abgerundete Tabelle zu erstellen

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

小云云Original: 2017-11-16 16:15:422585Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel dafür, wie CSS einen Textfarbverlauf implementiertNächster Artikel：Beispiel dafür, wie CSS einen Textfarbverlauf implementiert

In Verbindung stehende Artikel

Mehr sehen