介绍
本文将为大家详细介绍”CSS3二级导航菜单怎么弄”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“CSS3二级导航菜单怎么弄”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
css是什么意思
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
如果想要实现网页的二级导航,我们可以使用JS技术,动态的显示和隐藏二级菜单,当然也可以使用css技术来实现,并且这里推荐使用css,因为其效率更高,更流畅。这里将介绍二级菜单的动态显示与隐藏。
<强> 1结构强>
一般导航的主体我们主要是使用ul李标签
& lt; body> ,,,& lt; header> ,,,,,,,& lt; !——,一级导航开始,——比; ,,,,,,,& lt; nav> ,,,,,,,,,,,& lt; ul 类=癿enu"比; ,,,,,,,,,,,,,,,& lt; li> ,,,,,,,,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/a href=" # ">首页> 李> <李> 产品> 李> <李> 服务><李> 技术支持> 李> <李> 产品外包> 李>
李> <李> 关于我们> 李> <李> 人才招聘> 李> 头> 身体>
<强> 2布局强>
导航的布局,由于子元素要随着父元素,所以对二级菜单选取定位布局。要想让多个李在一行中显示,那么就需要让李进行浮动。
,,,,身体{保证金:0;,字体大小:,14 px;,颜色:,# 666} ,,,,,,,ul, ol{保证金:0;填充:0;,list-style:,没有;} ,,,,,,,a {文字修饰:没有,,颜色:,# 666;} ,,,,,,,/*一级导航*/,,,,,,,/*背景色*/,,,,,,,ul.menu ul.submenu { ,,,,,,,,,,,背景颜色:,# ededed; ,,,,,,,} ,,,,,,,/*一级导航浮动*/,,,,,,,ul.menu: after { ,,,,,,,,,,,内容:,& # 39;& # 39;; ,,,,,,,,,,,显示:,块; ,,,,,,,,,,,明确:,两个; ,,,,,,,} ,,,,,,,ul.menu 祝辞,li { ,,,,,,,,,,,:浮动,离开; ,,,,,,,,,,,宽度:,120 px; ,,,,,,,,,,,行高:,3 em; ,,,,,,,,,,,身高:,3 em; ,,,,,,,,,,,text-align:,中心; ,,,,,,,,,,,光标:指针; ,,,,,,,} ,,,, ,,,,,,,/*二级导航项分割线*/,,,,,,,ul.submenu { ,,,,,,,,,,,/*默认隐藏*/,,,,,,,,,,,显示:,没有; ,,,,,,,} ,,,,,,,ul.submenu 祝辞,li { ,,,,,,,,,,,边界底部:,1 px solid # fff; ,,,,,,,} ,,,,,,, ,,,,,,,/*内容区*/,,,,,,,.content { ,,,,,,,,,,,最低高度:,800 px; ,,,,,,,,,,,背景颜色:,# fff; ,,,,,,,}
<强> 3。二级菜单显示特效强>
光标放到导航上,当前元素背景色变深,字体颜色变淡。
如果有二级菜单,显示二级菜单
为了实现上述两个特效,我们可以利用伪类选择器(盘旋)来捕捉光标悬浮的操作,并且使用伪类选择器(盘旋)来选择到当前菜单对应的二级菜单
利用如下CSS可以快速实现该特效。
,,,,,,,,/*选中特效*/,,,,,,,ul.menu 祝辞,李:hover { ,,,,,,,,,,,背景颜色:,# 666; null null null null null null null null null null null null null null null null null null null null null null null null null null null null null nullCSS3二级导航菜单怎么弄