[分享]css写一个简单的页面

发布于 2024-11-11 15:33:30

在前端开发中，CSS是我们不可或缺的一部分。CSS的能力非常强大，我们可以用它来美化页面、改变页面的布局以及响应式设计等。下面我们来写一个简单的页面，使用CSS来美化它。我的简单页面 / 设置页面样...

在前端开发中，CSS是我们不可或缺的一部分。CSS的能力非常强大，我们可以用它来美化页面、改变页面的布局以及响应式设计等。

下面我们来写一个简单的页面，使用CSS来美化它。

<html>
<head>
  <title>我的简单页面</title>
  <style>
    /* 设置页面样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
      color: #666;
    }
    .center {
      text-align: center;
    }
    .highlight {
      background-color: #ffd700;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的简单页面</h1>
  <p>这是一个段落示例。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id dapibus dolor. Aliquam id mauris vel orci malesuada mattis. Integer rhoncus felis eget ultrices commodo. Morbi ultrices, ligula in bibendum convallis, nisi turpis suscipit neque, a bibendum mauris turpis a felis. Duis cursus, metus non euismod suscipit, elit augue aliquet leo, vel fringilla quam arcu a lorem.</p>
  <p class="center">这是另一个段落，居中显示。</p>
  <p>这是一个带有<span class="highlight">高亮</span>效果的段落。</p>
</body>
</html>

在上面的代码中，我们首先设置了整个页面的背景色和文本字体。然后我们对标题、段落等进行了样式设置，使得页面看起来更加美观。

我们还使用了class来设置一些特定的样式，如.center将文本居中显示，.highlight则定义了高亮效果。

通过CSS的强大功能，我们可以轻松地为网页增添更多的个性化元素，达到更好的用户体验。

css 教程