小学生都能用的CSS2.0+PS切片技巧制作自适应文字圆角滑动门导航栏

2022-11-13 12:29:35

自适应文字圆角滑动门导航栏：一步一步实现你的网页梦想

引言

自适应文字圆角滑动门导航栏，一款集颜值与功能于一体的网页设计神器，备受前端开发者的青睐。它能自动适应不同的屏幕尺寸，无论是在宽屏显示器还是移动设备上，都能完美呈现，极大提升用户体验。本篇文章将手把手带你打造一款这样的导航栏，只需跟着步骤一步步来，小白也能轻松上手。

准备工具

首先，我们需要准备一些必备的工具：

PS（图像处理软件）
Text Editor（文本编辑器）
浏览器

创建项目

打开 PS，新建一个空白文件，大小为 1280px*800px，分辨率为 72dpi。
使用矩形工具创建矩形，作为导航栏的背景。
使用文字工具在矩形中输入文字，作为导航栏的标题。

切片导航栏

选中矩形，使用切片工具将它切成两部分：背景和文字。
将切好的导航栏导出为 PNG 格式。

创建 HTML 文件

使用文本编辑器创建一个新的 HTML 文件，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  <script src="script.js"></script>
</body>
</html>

创建 CSS 文件

使用文本编辑器创建一个新的 CSS 文件，输入以下代码：

nav {
  width: 100%;
  height: 50px;
  background-color: #333;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  margin: 0 10px;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #000;
}

创建 JavaScript 文件

使用文本编辑器创建一个新的 JavaScript 文件，输入以下代码：

const nav = document.querySelector('nav');

window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    nav.classList.add('scrolled');
  } else {
    nav.classList.remove('scrolled');
  }
});