这事得从头说起。昨儿个下午捣鼓个人网站，突然想到得加个搜索栏，总不能让人家靠眼睛扒拉内容？打开dw插件就开始瞎倒腾，结果差点被这破软件气出高血压。
第一步就掉坑里
先在顶部菜单栏扒拉半天，发现压根没"搜索栏"这选项。不死心去左侧工具栏翻，好家伙，图标长得都差不多，手一抖把表单栏拖进去，整个页面排版直接稀碎。
- 踩雷操作：直接拽了个"表单"框占满整个header
- 血压飙升点：保存后刷新页面，底下文章全被顶到屏幕外了
跟代码死磕五分钟
急得直接切代码视图，发现这玩意儿自动生成了一坨：
<form><input type="text"></form>
难怪霸占整行！逮住代码里style="width:100%"这行字，改成width:200px。手贱刷新页面——搜索框缩成细条了，右边确认键死活看不见！
开窍时刻
突然想起b站视频里提过组件嵌套。先把原来那坨代码全删了，重新抓了个div容器当底座：
- 1. 在header区域插灰色div盒子
- 2. 把表单组件拖进盒子右端
- 3. 属性面板狂点浮动按钮（就那个←→图标）
眼看搜索框终于卡在右上角，顺手在input里敲了"搜文章..."，结果网页显示框里是竖着写的字！原来少打个placeholder属性，补上立马正常。
收尾玄学
测试时候更邪门：输入关键词按回车，页面疯狂闪屏就是不跳转。发现是<form action="#">在作妖，把这句删光光，整个世界清净了。随手塞个放大镜图标进去，测试了下还真能用，全程看表正好3分10秒，新手buff属实没白给。
血泪忠告：千万别信官方组件默认参数！尤其那个width:100%，纯纯的排版杀手。
