html和css制作简单的网页

admin 2024年03月04日 14:58 36 0

一个段落和一些样式。

我们创建一个HTML文件，命名为`index.html`：

<!DOCTYPE html>
<html>
<head>
    <title>我的简单网页</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网页！</h1>
    </header>

    <main>
        <p>这是一个简单的网页示例，使用HTML和CSS制作。</p>
    </main>

    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

接下来，我们创建一个CSS文件，命名为`styles.css`，用于添加样式：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

main {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

在这个示例中，我们创建了一个简单的网页结构，包括一个标题（`header`）、一个主要内容区域（`main`）和一个页脚（`footer`），CSS文件用于添加样式，如字体、颜色、背景、边距和阴影等。

将这两个文件保存在同一个文件夹中，然后用浏览器打开`index.html`文件，你就可以看到一个简单的网页了。

请注意，这只是一个非常基本的示例，你可以根据自己的需求进一步扩展和定制网页，HTML和CSS提供了丰富的功能和选项，可以帮助你创建更复杂的网页和网站。