HTML&CSS设计小米导航栏

最新推荐文章于 2024-08-14 14:09:44 发布

原创

最新推荐文章于 2024-08-14 14:09:44 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

小米导航栏：

准备工作： 把需要实现的设计图放到ps中，量取需要的宽度高度间距值；
话不多说：直接上代码：

<div class="box">    // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号
        <a href="#">小米商城</a>
        <span>|</span>
        <a href="#">MIUI</a>
        <span>|</span>
        <a href="#">IoT</a>
        <span>|</span>
        <a href="#">云服务</a>
        <span>|</span>
        <a href="#">金融</a>
        <span>|</span>
        <a href="#">有品</a>
        <span>|</span>
        <a href="#">小爱开放平台</a>
        <span>|</span>
        <a href="#">企业团购</a>
        <span>|</span>
        <a href="#">资质证照</a>
        <span>|</span>
        <a href="#">协议规则</a>
        <span>|</span>
        <a href="#">下载app</a>
        <span>|<