最近有读者在群里吐槽：“学 CSS 快崩溃了！display、position、flex……每个属性都要背，这得背到猴年马月啊？” 其实，学 CSS 就像搭积木，我们不需要记住所有形状和颜色的积木（CSS 属性），而是先掌握常用的几种。用这些基础积木先搭出大致形状（实现网页基本布局），之后想让作品更精美，再去了解其他积木特性，一步步完善细节。重点是先让积木稳稳立住，再追求花哨外观。
一、从最基础的 float 布局开始
我们先从 float 布局讲起，写一个最简单的导航栏：Logo 在左，导航链接在右。下面是示例代码：
<html lang="zh-CN"><head><meta charset="UTF-8"><title>简单导航栏（float版）</title><style>body {margin: 0;font-family: Arial, sans-serif;}.navbar {background-color: #333;overflow: hidden;}.navbar .logo {float: left;color: #fff;font-size: 20px;padding: 14px 20px;text-decoration: none;}.navbar .nav-links {float: right;}.navbar .nav-links a {display: block;color: #f2f2f2;text-align: center;padding: 14px 20px;text-decoration: none;float: left;}.navbar .nav-links a:hover {background-color: #ddd;color: black;}</style></head><body><div class="navbar"><div class="logo">MyLogo</div><div class="nav-links"><a href="#home">首页</a><a href="#about">关于</a><a href="#services">服务</a><a href="#contact">联系</a></div></div><h1>欢迎来到我的网站！</h1><p>这是正文内容区域。</p></body></html>
二、进阶：用 Flex 布局写更优雅的导航栏
当你熟悉了 float 后，就可以自然过渡到现代更流行的 Flex 布局，因为 Flex 不仅写法简单，效果更好，而且响应式设计（适配手机端）也更方便！下面是示例代码（Flex 版）：
<html lang="zh-CN"><head><meta charset="UTF-8"><title>简单导航栏（flex版）</title><style>body {margin: 0;font-family: Arial, sans-serif;}.navbar {display: flex;justify-content: space-between;/* 左右两端对齐 */align-items: center;/* 垂直居中 */background-color: #333;padding: 0 30px;}.navbar .logo {color: #fff;font-size: 30px;text-decoration: none;}.navbar .nav-links a {color: #f2f2f2;text-decoration: none;margin-left: 30px;}.navbar .nav-links a:hover {color: #ff6600;/* 悬停变色 */}</style></head><body><div class="navbar"><div class="logo">MyLogo</div><div class="nav-links"><a href="#home">首页</a><a href="#about">关于</a><a href="#services">服务</a><a href="#contact">联系</a></div></div><h1>欢迎来到我的网站！</h1><p>这是正文内容区域。</p></body></html>
你也可以看出：只是增加了几个新元素而已，并不需要死记硬背这些属性，当你想要用的时候再学完全来得及。同样我们也可以右键-->检查看看具体的布局同上面 float 的区别：
<html lang="zh-CN"><head><meta charset="UTF-8"><title>酷炫导航栏（Sticky版）</title><style>body {margin: 0;font-family: Arial, sans-serif;line-height: 1.6;}.navbar {position: sticky;top: 0;z-index: 1000;display: flex;justify-content: space-between;align-items: center;background: rgba(51, 51, 51, 0.95);/* 半透明背景 */padding: 10px 30px;transition: background-color 0.5s;}.navbar .logo {color: #fff;font-size: 24px;text-decoration: none;font-weight: bold;}.navbar .nav-links a {color: #f2f2f2;text-decoration: none;margin-left: 30px;padding: 10px 15px;border-radius: 5px;transition: background-color 0.3s, color 0.3s;}.navbar .nav-links a:hover {background-color: #ff6600;color: white;}.content {padding: 20px 40px;}</style></head><body><div class="navbar"><div class="logo">MyLogo</div><div class="nav-links"><a href="#home">首页</a><a href="#about">关于</a><a href="#services">服务</a><a href="#contact">联系</a></div></div><div class="content"><h1>欢迎来到我的网站！</h1><p>（以下是模拟大段正文内容，为了让滚动效果更明显）</p><p>这里是内容……</p><p>继续滚动可以看到导航栏吸附在顶部！</p><p>更多内容……</p><p>再更多内容……</p><p>无限内容……</p><p>无限滚动内容……</p><p>页面很长……</p><p>再继续滚动……</p><p>你会发现……</p><p>导航栏会一直在顶部……</p><p>直到你滚动到页面底部……</p><p>导航栏会一直在顶部……</p><p>这是一个酷炫的导航栏！</p><p>谢谢</p></div></body></html>
适合新手的学习路线总结
第五阶段：善用现成工具！可以用开源 CSS 框架，比如 Tailwind、Bootstrap，一行代码就能生成现成的导航栏。
BY/
本文作者：江小白
编辑 & 版式：一格
声明：本文归“力扣”版权所有，未经授权不得以任何形式储存、转载或商用，如需转载请联系。文中部分图片来源于网络，如有侵权联系删除。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
