CSS 布局练习

作者: roy_pub | 来源:发表于2018-12-15 23:02 被阅读13次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .footer {
            height: 200px;
            background-color: #212425;
            overflow: hidden;
        }

        .subnav {
            text-align: center;
            margin-top: 75px;
            color: #f0f1f1;
        }

        .subnav a {
            color: #f0f1f1;
            text-decoration: none;
            padding: 0 5px;
            font-size: 14px;
        }

        .subnav a:hover {
            color: #2288f6;
            text-decoration: underline;
        }

        .footer p {
            color: #888888;
            text-align: center;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="footer">
        <div class="subnav">
            <a href="#">home</a> |
            <a href="#">iPad</a> |
            <a href="#">iMac</a> |
            <a href="#">iPhone</a> |
            <a href="#">iPod</a>
            <a href="#">Support</a> |
            <a href="#">Shop</a> |
            <a href="#">Personal</a>
        </div>
        <p>@Copyright 2015 Apple Inc. | USA00001 Number-1</p>
    </div>
</body>
</html>