今天的目标是这部分二级弹出导航,思路是:鼠标经过时导航出现,移开后导航隐藏。
·在横向导航后面添加一个大盒子,写上基本样式、宽高背景颜色,看下效果。
·现在写上绝对定位,让它脱离外层盒子的限制。同时是相对顶部的盒子定位,需要写上相对定位代码:border-bottom-left-radiu,左边距离0,上面距离140像素,看下效果。
·接下来给盒子里添加内容,跟横向导航差不多,呦爱哦列表基本格式,再加上一张图片、两行文字,内容快速添加,看下效果。
·从外到内依次写css样式,给优爱哦添加宽度,左右自动居中,默认的黑点去掉,看下效果。
·见左浮动,从纵向排列变成横向,给a标签写css样式之前先写上这句代码,默认下划线去掉,颜色设置为黑色,字体大小12像素,文字水平居中,看下效果。
·然后给a标签加上外边距,让它们增加一点距离。
·最后一行文字单独设置颜色,并把大盒子的背景颜色去掉,看下效果。
·最后让二级导航的金子先隐藏,给横向导航增加一个hover类,让二级导航显示即可。
到此,今天的学习完成。
本文暂时没有评论,来添加一个吧(●'◡'●)