垂直导航菜单制作技巧一

我们导航菜单的制作一般都用ul li a这几个标签，但是我们可以思考一个问题，这个a标签是一个行内标签，而ul 和li是块级标签，我们写在li上面的样式可以写在最里面的a上面

HTML代码如下：

1 <ul>
2     <li><a href="">菜单1</a></li>
3     <li><a href="">菜单2</a></li>
4     <li><a href="">菜单3</a></li>
5     <li><a href="">菜单4</a></li>
6     <li><a href="">菜单5</a></li>
7 </ul>

我们常规的css做法就是

<style type="text/css">* {margin: 0;padding: 0;    font-size: 14px;}ul {list-style: none;width: 100px;margin: 0 auto;}ul li {width: 100px;height: 30px;line-height: 30px;background: #CCC;margin-bottom: 1px;text-indent: 10px;}ul li a {text-decoration: none;}
</style>

而我想表达的就是 li标签上的样式可以全部放到a标签上写只要给a标签加上 display:block; 让a标签变成块级元素即可。

这样做的好处是，在做hover交互效果时，处理起来比较方便。

修改后的代码如下：

<style type="text/css">* {margin: 0;padding: 0;    font-size: 14px;}ul {list-style: none;width: 100px;margin: 0 auto;}ul li a {display: block;width: 100px;height: 30px;line-height: 30px;background: #CCC;margin-bottom: 1px;text-indent: 10px;text-decoration: none;}ul li a:link,ul li a:visited {color: #000;}ul li a:hover, ul li a:active {color: #FFF;background: green;}
</style>

hover和avtive平时设置成一样的就好，link和visited设置成一样的

在li前面添加个性小图标技巧

转载于:https://www.cnblogs.com/xiaqilin/p/6880152.html

垂直导航菜单制作技巧一相关推荐

Orman Clark的垂直导航菜单：CSS3版本
奥曼·克拉克(Orman Clark)编码的PSD系列中的下一个是他超酷的" 垂直导航菜单" . 我们将使用CSS3和jQuery重新创建它,同时使用尽可能少的图像. 我们将使用的 ...
网页导航菜单制作——快，很快，非常快
网页导航菜单已成为网页不可或缺的一部分,或许我们误以为它与网页是一个整体,而忽视了他的存在.不可否认,网页导航菜单与网页有密不可分的联系.但是,网页导航菜单也是需要独立编写的,特别是flash网页导航 ...
20个很酷的CSS3导航菜单制作教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 ...
带图标和按钮切换特效的垂直导航菜单的html页面源码
大家好,今天给大家介绍一款,带图标的垂直导航菜单的html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击每个按钮时,都有切换特效,并显示按钮的说明,看起来非常不错(图2) 图2 代码完 ...
网页中滑动导航菜单制作
<html> <head> <title>网页特效-导航菜单-滑动的二级导航菜单</title> <meta http-equiv="c ...
CSS 制作垂直导航
垂直导航主要用于网站的侧边栏导航,使用侧边栏的好处是可以节约空间.因此,一些内容多,而又喜欢简约的网站,常常以侧边栏的方式进行展示. 默认情况下,列表及列表项 li 元素都是块级元素,每个列表项后独占 ...
3.垂直折叠导航菜单
要实现以下效果的导航当点击水果时,弹出水果列表,当再次点击时,菜单合上需要掌握的知识点 ####DOM节点相关知识,元素节点节点类型1,文本节点3 ####找下一个兄弟节点的方法(封装函数) fu ...
2015年主流的页面导航菜单设计
在移动版应用网站中,用汉堡菜单图标已经成为主流的一种很常见的导航设计模式了,由于它不会干扰用户使用的任务过程,只要在需要的时候点击图标来访问菜单,很多可以让人眼花缭乱的元素都可以被隐藏在汉堡包菜单中, ...
ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单例子首页 ...

垂直导航菜单制作技巧一

垂直导航菜单制作技巧一相关推荐

最新文章

热门文章