css和html写个人网站

CSS和HTML是构建个人网站的重要工具。HTML负责网站的结构和内容，而CSS负责网站的样式。下面介绍如何使用CSS和HTML来构建个人网站。

    <!DOCTYPE html>
    <html>
    <head>
        <title>个人网站</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">联系我</a></li>
            </ul>
        </nav>
        <header>
            <h1>欢迎来到我的个人网站</h1>
            <p>这里是我分享我的想法和经历的地方</p>
        </header>
        <main>
            <article>
                <h2>我的一天</h2>
                <p>今天我起床很早。</p>
            </article>
            <article>
                <h2>我的旅行</h2>
                <p>我最近去了一趟旅行。</p>
            </article>
        </main>
        <footer>
            <p>版权所有 © 2021 我的个人网站</p>
        </footer>
    </body>
    </html>

css和html写个人网站

以上是一个简单的HTML代码。它包含了一个导航栏、一个头部、两篇文章和一个底部。现在我们需要使用CSS来美化它。

    nav {
        background-color: #333333;
        color: #ffffff;
    }
    
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    li {
        display: inline-block;
        margin: 10px;
    }
    
    li a {
        color: #ffffff;
        text-decoration: none;
        font-size: 18px;
    }
    
    header {
        text-align: center;
        margin-top: 50px;
    }
    
    h1 {
        font-size: 42px;
    }
    
    main {
        margin-top: 50px;
    }
    
    article {
        margin-top: 50px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    footer {
        text-align: center;
        margin-top: 50px;
        background-color: #333333;
        color: #ffffff;
    }

CSS代码定义了导航栏、头部、文章和底部的样式，如背景色、字体大小、字体颜色等等。使用CSS之后，我们得到一个美观易读的个人网站。

css和html写个人网站

相关推荐