[分享]css做出来的网站

发布于 2024-11-11 15:55:46

CSS（Cascading Style Sheets）是一种用来描述网站外观和样式的语言。在网站开发中，CSS通常被用来控制网站的布局、颜色、字体和其他视觉效果。 / 一个简单的CSS代码 / bod...

CSS（Cascading Style Sheets）是一种用来描述网站外观和样式的语言。在网站开发中，CSS通常被用来控制网站的布局、颜色、字体和其他视觉效果。

 /* 一个简单的CSS代码 */
  body {
    font-size: 16px;
    color: #333;
    background-color: #f5f5f5;
  }
  
  .header {
    background-color: #fff;
    height: 60px;
    padding: 10px 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }

  .menu {
    float: left;
    margin-right: 20px;
    font-size: 14px;
    font-weight: bold;
  }

  .content {
    margin-top: 20px;
    float: left;
    width: 70%;
  }

  .sidebar {
    margin-top: 20px;
    float: right;
    width: 25%;
  }

  .footer {
    clear: both;
    height: 100px;
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }

使用CSS的好处是，可以将网站的样式与HTML内容分离，这样可以更容易地修改样式，同时也可以让网站的HTML代码更加简洁明了。下面是一个使用CSS样式的网站的例子：

 <!DOCTYPE html>
  <html>
  <head>
    <title>我的网站</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <p class="logo">我的网站</p>
      <ul class="menu">
        <li><a href="#">主页</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">关于我</a></li>
      </ul>
    </div>
    <div class="content">
      <h1>欢迎来到我的网站</h1>
      <p>这是一个使用CSS样式的网站，非常漂亮和易于阅读。</p>
      <p>......</p>
    </div>
    <div class="sidebar">
      <h2>我的信息</h2>
      <p>姓名：张三</p>
      <p>邮箱：zhangsan@example.com</p>
      <p>......</p>
    </div>
    <div class="footer">
      <p>版权所有 ? 2021 我的网站</p>
    </div>
  </body>
  </html>

如上所示，使用CSS可以非常方便地对网站进行样式的控制，让网站更加美观和易于阅读。

css 教程