应同时设置list-style: none、margin: 0和padding: 0清除nav ul的圆点与缩进，因浏览器默认添加padding-left和list-style，仅清其一仍会导致布局偏移。

nav ul 怎么清掉圆点和缩进？ 浏览器给 ul 默认加了 padding-left 和 list-style，不处理就会左边空一大块、还带黑圆点。这不是“不好看”，是布局基准直接偏移了。

• 必须同时写 list-style: none 和 padding-left: 0，只清一个没用
• margin 也要设为 0，否则顶部/底部可能多出空白
• 不要用通配符 * { padding: 0 }，会误伤 textarea、select 等需要默认内边距的控件

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a 标签怎么撑满整个 li 宽度？ 默认 a 是行内元素，hover 只在文字上生效，左右空白点不动——用户会以为菜单失灵。

• 必须设 display: block 或 display: flex，否则热区不完整
• 如果要居中文字，text-align: center 要写在 li 上，不是 a
• 别漏掉 text-decoration: none，不然下划线干扰视觉节奏

nav li a {
  display: block;
  padding: 12px 24px;
  text-decoration: none;
  color: #333;
}

float:left 还是 display:flex？float 能用，但得手动清除浮动（overflow: hidden 或伪元素），稍不注意就塌陷；flex 更干净，但老版本 IE 不支持。

• 现代项目优先用 display: flex，一行搞定水平排列 + 垂直居中
• 用 float 时，nav ul 必须加 overflow: hidden 或 ::after 清除浮动，否则父容器高度为 0
• flex 下不用管浮动问题，但要注意 flex-wrap: nowrap 防止小屏换行

nav ul {
  display: flex;
}
nav li {
  flex: 0 0 auto; /* 防止被压缩 */
}

为什么加了 reset 还有白边？ 常见错误是只重置了 ul，却忘了 nav 或 body 自带的 margin。Chrome 和 Safari 对 nav 没默认样式，但 body 几乎都带 margin: 8px。

• 检查 computed styles，看白边到底来自哪一层
• 最保险是单独重置 body { margin: 0 }，别依赖通配符
• 如果用第三方 UI 库（比如 Bootstrap），它的 reset 可能覆盖你自己的规则，顺序很重要

真正容易被忽略的是：语义结构本身不能错。nav 内必须只包一个 ul，每个菜单项必须是 li > a，否则屏幕阅读器读不出来，键盘 Tab 也跳不过去。样式可以调，结构错了，修复成本高得多。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！