CSS基础 实战案例 模拟小米官方导航栏

效果图

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;
        }

效果图