新手入门基础店铺页面样式实现，通俗易懂，轻松上手！

新手入門基礎店鋪頁面樣式，通俗易懂，輕鬆上手！

大家好，我是小又又，一名转行学前端的新手。今天是学习前端的第 19 天，我来分享一下我的学习成果——基础店铺页面上半部分样式实现。

一、確認通用的CSS樣式

在开始之前，我們先確認一下通用的CSS樣式。這些樣式可以應用於任何網站，包括基礎店鋪頁面。

• font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  

}```

• font-size: 24px;
  font-weight: bold;
  

}```

• font-size: 18px;
  font-weight: bold;
  

}```

• font-size: 16px;
  line-height: 1.5;
  

}```

• color: blue;
  

}```

二、CSS變數

CSS變數是一個非常有用的功能，它可以讓你在整個網站中輕鬆地修改樣式。例如，如果你想改變網站的字體，你只需要修改一個變數，而不必修改所有的CSS樣式。

要定義一個CSS變數，你可以在CSS文件中使用 -- 前綴，後跟變數的名稱和值。例如：

--font-family: Arial, sans-serif;

然後，你就可以在CSS樣式中使用變數了。例如：

body {
  font-family: var(--font-family);
}

三、CSS工具

CSS工具可以幫助你提高工作效率，並編寫出更優質的代碼。我推薦你使用以下CSS工具：

• Sass
• Less
• Stylus

四、頭部分樣式效果

現在，我們來實現頭部分樣式效果。我們將使用HTML標籤結構和CSS樣式來完成這項任務。

<header>
  <div class="container">
    <div class="logo">
      <a href="/">
        <img src="logo.png" alt="Logo">
      </a>
    </div>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

header {
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.container {
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;
}

.logo {
  float: left;
}

nav {
  float: right;
}

nav ul {
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #333;
  font-size: 16px;
  text-decoration: none;
}

nav a:hover {
  color: #000;
}

以上是基礎店鋪頁面上半部分樣式的實現。希望對大家有所幫助。