今天捣鼓网页导航栏的时候突然想到，好多新手对着dw界面发懵的样子，干脆把实操过程捋一遍。掏出我的老伙计dw，直接新建个html文件开工！

第一步：画个导航栏地盘

鼠标啪嗒点在插入工具栏那个"布局"上，反手就拖了个div标签到画布顶头。顺手在属性面板给它起了个诨名叫"daohang"，方便待会儿使唤。

第二步：往框里塞货

点进这个灰框框，直接敲键盘怼了个LOGO占位文字上去。接着光标挪到后边，戳开"插入"菜单找到导航条功能。弹出来的窗口里哗填了四个栏目名："首页""教程""案例""关于我"，每填完一个就猛敲回车加新的。

• 重点来了：勾上那个"使用无序列表"的小方框！
• 手一抖把"垂直方向"改成了"水平方向"
• 按"确定"时差点把鼠标戳穿

第三步：瞎调位置到怀疑人生

选中刚蹦出来的导航列表，属性栏宽度值删光光，发现列表突然缩成一小坨。赶紧拖住右边那个小蓝点，呲溜一下拉到和LOGO对齐。中间空出块大窟窿？反手在列表前塞了个空白div当垫背，调成自动填充宽度。

看那个导航列表上下窜得闹心，在css设计器里抓狂找了半天，终于在方框模式里把浮动改成了左飘。总算跟LOGO肩并肩排排坐了！

第四步：整点花活打扮下

• 全选导航文字右键进CSS样式
• 把字号调到16px才看得清
• 文字间距拉到1.5倍顺眼多了
• 背景色换成藏青，字刷成雪花白
• 鼠标碰到文字就让它变黄，加了个hover特效

第五步：检查有没有瘸腿

按F12弹调试窗口，左上角点手机图标来回拖窗口宽度。发现宽度小于500像素时导航栏开始叠罗汉。火速在css里给div加了个自动换行属性，才算救回这残疾响应式。

折腾完一看表：好家伙！说好的分分钟，实际半小时打底。缩着脖子把浏览器窗口拉大拉小几十遍，确认每个按钮都能戳得动，这才敢喘大气。