CSS3盒子相关样式

最新推荐文章于 2021-06-07 17:04:12 发布

UIEngineer

最新推荐文章于 2021-06-07 17:04:12 发布

阅读量184

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79334081

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    table{
        border:solid 3px #0af;
    }
    td{
        border:solid 1px #f0f;
    }
</style>
</head>

<body>

    你好shang
    <table>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
    </table>
    你好xia

</body>
</html>

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    table{
        display:inline-table;
        border:solid 3px #0af;
    }
    td{
        border:solid 1px #f0f;
    }
</style>
</head>

<body>

    你好shang
    <table>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
        <tr><td>A</td><td>A</td><td>A</td><td>A</td></tr>
    </table>
    你好xia

</body>
</html>

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    div{
        display:list-item;
        list-style-type:georgian;
        margin-left:30px;
    }
</style>
</head>

<body>

    <div>实例1</div>  
    <div>实例2</div>
    <div>实例3</div>
    <div>实例4</div>

</body>
</html>