为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第17天 javascript(导航菜单样式)

【九月打卡】第17天 javascript(导航菜单样式)

2022.09.21 18:05 45浏览

1.课程名称 :导航菜单样式


课程章节:javascript(导航菜单样式)


2.课程内容:

        首先把菜单文字写进去

https://img1.sycdn.imooc.com/632ad68800010beb15710696.jpg

开始写css

 首先把默认的超链接下划线去掉

a:link,a:visited{

    text-decoration: none;

}


https://img3.sycdn.imooc.com/632ad7e40001b00413150566.jpg


效果

https://img1.sycdn.imooc.com/632ad8370001217111920658.jpg

    

    继续完善 mune-item

    height:64px  高度

    line-height:66px 行高

    font-size:16px 字体大小

    padding: 0 24px  上0 右 24

    position 相对定位

https://img3.sycdn.imooc.com/632ade5800018d5b12690414.jpg

效果

    https://img3.sycdn.imooc.com/632ade6f00019b7513290587.jpg

    

    设置超链接字体为白色

    .mune-item a:link ,mune-item a:visited{

    color:white;

}


https://img1.sycdn.imooc.com/632adfad0001170513060551.jpg

 

https://img1.sycdn.imooc.com/632adfe40001d13c04240529.jpg


继续添加下划线 超链接文字下的下划线

  .mune-item a {

    display :block

    border-bottom: 1px solid rgba(255,255,255,0.2)       //下边框

    padding: 0.8

    height:63px 下滑线高度

}


https://img4.sycdn.imooc.com/632ae0d9000188b911210502.jpg

 效果

https://img4.sycdn.imooc.com/632ae0fc0001422514400643.jpg   

然后完善 箭头

导入箭头图片

https://img3.sycdn.imooc.com/632ae126000198e610510540.jpg

写入css样式

    https://img2.sycdn.imooc.com/632ae1370001e59b09030357.jpg


绝对定位

右 32px   字体大小24px  高0  引用箭头图标  不倾斜 字体不加粗


效果:

https://img4.sycdn.imooc.com/632ae19a0001978315470688.jpg


本节完!O(∩_∩)O


三 本节重点 需要重复多练这些样式!!!



  



点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
4
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消