CSS+div怎么做图片中的导航条

2020-09-26 社会 126阅读

css+div做图片中的导航条的方法:

思路:对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排,从而让li并排布局。然后需要对ul li里的a标签设置display:block的,但a父级li不设置具体宽度,所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。

1、CSS代码:

ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}

ul#nav li{display:inline; height:60px}

ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
 color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}

ul#nav li a:hover{background:#0095BB}

2、HTML代码

 

  • " target="_blank">http://www.xxx.com/">首页
  •  

  • HTML" target="_blank">http://www.xxx.com/html/">HTML教程
  •  

  • CSS" target="_blank">http://www.xxx.com/rumen/">CSS基础
  •  

  • CSS" target="_blank">http://www.xxx.com/css-tool/">CSS开发工具
  •  

  • CSS" target="_blank">http://www.xxx.com/css-texiao/">CSS特效
  •  

  • CSS" target="_blank">http://www.xxx.com/wenji/">CSS问题
  • 3、效果截图

    声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com