导航栏上的菜单:代码结构

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

导航栏上标志的左边是一个菜单 .. 先去添加需要的代码结构 .. 你可以用一组无序列表去表示这个菜单,或者直接用一组链接也行 .. 其实浏览器不是太在乎我们到底使用什么样的标签 .. 但是我们应该尽量使用更有意义的标签去包装不同类型的内容 ..

先添加一个包装 ... 可以用一个 div 标签 .. 上面加上一个 menu 类 .. 我们可以使用这个类去给它添加点样式 ..

每个菜单里的项目都用一个 a 标签,表示一个链接 .. 标签上面添加一个 item 类 ... 我们会用到它去给菜单项添加样式 .. 需要四个这样的元素 .. 编辑器上用了 emmet 插件可以使用这种缩写的形式去创建代码 ..

没安装的话,手工输入这些代码也可以 ..

执行一下链接上的文字 ... 车型 ... 故事 ... 体验 ... 经销商 ..

a 标签上的 href 属性里的值是链接到的目标 .. 在当前的菜单项的标签上,可以再添加一个额外的类 .. 比如 active ..

我们现在还处在设计开发静态页面的阶段,所以你可以直接把这个类添加到某个菜单项上 ... 以后如果我们为网站添加一个后台,这个 active 类,应该动态的添加到对应的菜单项上 .. 比如用户在访问 故事 这个页面的时候, active 类应该在这个故事菜单项上出现 ...

现在我们只在乎页面的展示 ..

导航栏上的菜单:代码结构《 网页设计案例:导航栏 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点