CSS基础 实战案例 模拟小米官方导航栏
作者:互联网
效果图
![](https://www.icode9.com/i/l/?n=20&i=blog/2618803/202112/2618803-20211229183412795-645036789.png)
html结构
<ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> </ul>
CSS语句
*{ margin: 0; padding: 0; } li { float: left; /*此作用浮动排列和设置宽高,给li标签设置宽高的方法,还包含:display:inline-block*/ width: 127px; height: 50px; list-style: none; /* background-color: pink; */ text-align: center; line-height: 50px; } a{ text-decoration: none; color: #333; } li:hover a{ color: #ff9400; }
效果图
标签:实战,color,text,50px,宽高,li,height,小米,CSS 来源: https://www.cnblogs.com/jq-growup/p/15746130.html