最近有读者在群里吐槽：“学 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，一行代码就能生成现成的导航栏。
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
