小兔鲜儿：简单HTML+CSS网页搭建指南

前端

2023-02-27 21:55:15

用 HTML+CSS 搭建一个可爱的“小兔鲜儿”网页：新手入门教程

踏入网页制作的第一步：HTML 和 CSS

作为一名初学者，学习网页制作的第一步就是掌握 HTML 和 CSS。HTML 负责网页的结构，而 CSS 则负责美化和设计。使用这两种语言，即使是初学者也能创建出令人印象深刻的网页。

动手搭建“小兔鲜儿”网页

本教程将指导你使用 HTML 和 CSS 搭建一个名为“小兔鲜儿”的简单网页。这个网页将展示一只可爱的小兔子的图片、简短的介绍文字和版权信息。准备好开始了吗？

代码篇：HTML 和 CSS

要创建这个网页，需要两个文件：index.html 和 index.css。index.html 包含网页的结构，而 index.css 则包含网页的样式。以下是两个文件的代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>小兔鲜儿</h1>
    <p>这是一只可爱的小兔子！</p>
    <img src="image/rabbit.jpg" alt="小兔">
    <footer>
        <p>Copyright © 2023 小兔鲜儿</p>
    </footer>
</body>
</html>

index.css

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2em;
    text-align: center;
}

p {
    font-size: 1.2em;
    text-align: justify;
}

img {
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;
}

footer {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: center;
}