016 內外邊距作示例

時間 2019-12-09

標籤內外邊距示例简体版

原文原文鏈接

1.程序案例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*統一清除內外默認邊距*/
        * {
            padding: 0px;
            margin: 0px;
        }
        .article {
            width: 410px;
            height: 283px;
            border: 1px solid #ccc;
            margin: 50px;
            padding: 20px 15px 0;
        }
        .article h4 {
            color: #202026;
            font-size: 22px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 3px;
        }
        .article li {
            list-style: none;/*清除列表的樣式*/
            height: 38px;
            line-height: 38px;
            border-bottom: 1px dashed #ccc;
            text-indent: 2em;/*首行縮進*/
        }
        ul {
            margin-top: 12px;
        }
        .article a{
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }

        .article a:hover {
            text-decoration: underline;
            color: red;
        }
    </style>
</head>
<body>
    <div class="article">
        <h4>最新的文章</h4>
        <ul>
            <li><a href="#">平面設計</a></li>
            <li><a href="#">淅淅瀝瀝裏</a></li>
            <li><a href="#">夢想</a></li>
            <li><a href="#">夢中還在</a></li>
            <li><a href="#">依然在等待</a></li>
        </ul>
    </div>
</body>
</html>

2.效果spa

相關標籤/搜索