为了账号安全,请及时绑定邮箱和手机立即绑定

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

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


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


2.课程内容:

        首先把菜单文字写进去

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

开始写css

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

a:link,a:visited{

    text-decoration: none;

}


https://img1.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://img1.sycdn.imooc.com//632ade5800018d5b12690414.jpg

效果

    https://img1.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://img1.sycdn.imooc.com//632ae0d9000188b911210502.jpg

 效果

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

然后完善 箭头

导入箭头图片

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

写入css样式

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


绝对定位

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


效果:

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


本节完!O(∩_∩)O


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



  



点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消