[分享]css公用的头部怎么用

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

CSS公用的头部指的是多个页面都会用到的头部样式，如导航栏，logo等。为了避免重复编写代码，我们可以将这部分样式提取出来，作为一个公用的头部，然后在每个页面引用。/ 头部样式 / .header{ ...

CSS公用的头部指的是多个页面都会用到的头部样式，如导航栏，logo等。为了避免重复编写代码，我们可以将这部分样式提取出来，作为一个公用的头部，然后在每个页面引用。

/* 头部样式 */
.header{
  height: 60px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  ...
}

.logo{
  width: 120px;
  height: 40px;
  background: url(images/logo.png) no-repeat center;
  ...
}

.nav{
  ...
}

...

以上是一个简单的头部样式，其中包括了头部的高度、背景颜色、阴影等通用样式，以及logo和导航栏的样式。我们将这部分代码保存为一个独立的CSS文件，命名为header.css。

在需要用到头部的页面中，只需将header.css文件引入即可：

<head>
  <link rel="stylesheet" href="css/header.css">
  ...
</head>

<body>
  <div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
  </div>
  ...
</body>

在上面的代码中，我们将header.css文件链接到了head标签中，然后在body中使用了.header、.logo、.nav这些样式类，这样就可以使用头部样式了。

使用CSS公用的头部可以提高代码的复用率，减少重复编写。同时，还可以统一样式，让网站看起来更加整洁、美观。

css 教程