html/css横向竖向导航栏的绘制 |
您所在的位置:网站首页 › 网页的导航栏是什么样的 › html/css横向竖向导航栏的绘制 |
导航栏编写一般都是用标签来写及列表,下面就看一下代码如何编写的吧: 【竖向导航栏】 产品 工具与镜像 客户与伙伴 帮助与支持 论坛与博客 (图为没有css修饰的运行截图)接下来css修饰:在没有用css处理过的代码上,其样式ul,li标签的属性都是默认的值: a:去除li前的点:需要在ul的样式里添加 list-style-type: none; 知识在(点击打开链接); b:去除标签的默认样式下划线:需在a标签样式里加 text-decoration: none;知识在(点击打开链接); c:怎么让导航栏当鼠标移动上去的时候都会有响应会变色?需要为li标签添加hover选择器在,知识在(点击打开链接) 当鼠标移动上时当前li变色. d:鼠标移动到ul范围内时变为手形:设置li 的属性cursor: pointer;知识在(点击打开链接) 【竖向导航栏效果】
【横向导航栏】 横向只需在li标签样式中添加属性:display:inline-block;知识在(点击打开链接) 【横向导航栏效果】
【横向代码(全)】 body,ul,li,a { padding: 0; margin: 0; } body { margin-top: 50px; background-color:#e6e6e6; color: #fff; } .menu { font-size: 0; padding: 0; height: 50px; padding-left: 5%; background-color: #00a2ca; position: relative; } .menubar { margin: 0 auto; position: absolute; list-style-type: none; width: 100%; overflow-y: auto; } .menubar li { padding:0px 5px; display:inline-block; cursor: pointer; line-height: 50px; } .menubar li:hover { background-color:#0095bb; } .menubar li.menu-value { background-color: #0095bb; } .menubar a { display: block; height: 50px; font-family: "微软雅黑","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"宋体" ; font-size: 15px; text-align: center; text-decoration: none; color: #fff; } 产品 工具与镜像 客户与伙伴 帮助与支持 论坛与博客 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |