程序员的知识教程库

网站首页 > 教程分享 正文

十天学会html+css第七天 二级弹出导航菜单 #程序员

henian88 2024-08-15 04:57:42 教程分享 31 ℃ 0 评论

今天的目标是这部分二级弹出导航,思路是:鼠标经过时导航出现,移开后导航隐藏。

·在横向导航后面添加一个大盒子,写上基本样式、宽高背景颜色,看下效果。

·现在写上绝对定位,让它脱离外层盒子的限制。同时是相对顶部的盒子定位,需要写上相对定位代码:border-bottom-left-radiu,左边距离0,上面距离140像素,看下效果。

·接下来给盒子里添加内容,跟横向导航差不多,呦爱哦列表基本格式,再加上一张图片、两行文字,内容快速添加,看下效果。

·从外到内依次写css样式,给优爱哦添加宽度,左右自动居中,默认的黑点去掉,看下效果。

·见左浮动,从纵向排列变成横向,给a标签写css样式之前先写上这句代码,默认下划线去掉,颜色设置为黑色,字体大小12像素,文字水平居中,看下效果。

·然后给a标签加上外边距,让它们增加一点距离。

·最后一行文字单独设置颜色,并把大盒子的背景颜色去掉,看下效果。

·最后让二级导航的金子先隐藏,给横向导航增加一个hover类,让二级导航显示即可。

到此,今天的学习完成。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表