<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏小实例</title> <style> *{ /*通用选择器设置外边距*/ margin:0; } .header{ background-color:pink; height:50px; } .header ul{ height:100%; /*默认和父元素是一样的高度*/ } .header li{ height:100%; list-style:none; /*作用是去掉li标签前的小圆点*/ display:inline-block; /*作用是将在多行的层级元素设置为块级元素，保持在一行*/ } .header li a{ color:white; text-decoration:none; /*去掉下划线*/ display:inline-block; padding:15px; height:20px; line-height:20px; } </style> </head> <body> <div> <header class="header"> <nav> <ul> <li> <a href="">课程</a> </li> <li> <a href="">刷题</a> </li> <li> <a href="">个人中心</a> </li> </ul> </nav> </header> </div> </body> </html>
Css查漏补缺03-导航栏小例子
猜你喜欢
转载自www.cnblogs.com/cuijunfeng/p/13179747.html
今日推荐
周排行