写一纯HTML+CSS的黑白的详细的网页首页详细的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Black and White Homepage</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
<pre><code>    header {
        padding: 20px;
        background-color: #000;
        text-align: center;
    }
    
    h1 {
        margin: 0;
    }
    
    nav {
        background-color: #000;
        padding: 10px;
        text-align: center;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    nav ul li {
        display: inline-block;
        margin-right: 10px;
    }
    
    nav ul li a {
        text-decoration: none;
        color: #fff;
        padding: 5px 10px;
    }
    
    main {
        padding: 20px;
    }
    
    section {
        margin-bottom: 20px;
    }
    
    footer {
        background-color: #000;
        padding: 20px;
        text-align: center;
        color: #fff;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <header>
        <h1>Black and White Homepage</h1>
    </header>
<pre><code>&lt;nav&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;

&lt;main&gt;
    &lt;section&gt;
        &lt;h2&gt;Welcome to our Black and White Homepage!&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ex in turpis cursus, ac vehicula libero semper. Sed imperdiet, libero et ornare consectetur, quam dolor scelerisque augue, sit amet vehicula velit neque in nunc. Nullam auctor mi sed turpis luctus, quis fringilla sapien volutpat.&lt;/p&gt;
    &lt;/section&gt;
    
    &lt;section&gt;
        &lt;h2&gt;About Us&lt;/h2&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus ex in turpis cursus, ac vehicula libero semper. Sed imperdiet, libero et ornare consectetur, quam dolor scelerisque augue, sit amet vehicula velit neque in nunc. Nullam auctor mi sed turpis luctus, quis fringilla sapien volutpat.&lt;/p&gt;
    &lt;/section&gt;
    
    &lt;section&gt;
        &lt;h2&gt;Our Services&lt;/h2&gt;
        &lt;ul&gt;
            &lt;li&gt;Service 1&lt;/li&gt;
            &lt;li&gt;Service 2&lt;/li&gt;
            &lt;li&gt;Service 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/section&gt;
    
    &lt;section&gt;
        &lt;h2&gt;Contact Us&lt;/h2&gt;
        &lt;p&gt;Email: example@example.com&lt;/p&gt;
        &lt;p&gt;Phone: 123-456-7890&lt;/p&gt;
    &lt;/section&gt;
&lt;/main&gt;

&lt;footer&gt;
    &lt;p&gt;&amp;copy; 2021 Black and White Homepage. All rights reserved.&lt;/p&gt;
&lt;/footer&gt;
</code></pre>
</body>
</html