导航hmtl+css

简介: 导航hmtl+css

导航hmtl+css

平时很常见这样的导航样式, 有什么较好的实现方式呢

        ul {
            display: flex;
            background-color: #ccc;
            /* 垂直居中 */
            height: 40px;
            line-height: 40px;
        }
        ul>li {
            list-style: none;
        }
        /* 选择第一个之后的所有元素 */
        ul>li+li::before {
            content: '|';
            padding: 0 10px;
        }
    <ul>
        <li>首页</li>
        <li>文档</li>
        <li>链接</li>
        <li>工具</li>
        <li>我的</li>
        <li>登录</li>
        <li>注册</li>
    </ul>
相关文章
|
4月前
|
前端开发
导航新风尚:CSS梯形设计,让网站菜单不再单调!
导航新风尚:CSS梯形设计,让网站菜单不再单调!
|
4月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
4月前
|
前端开发
一键复制:期末大作业常用的CSS动画导航效果!
一键复制:期末大作业常用的CSS动画导航效果!
|
4月前
|
前端开发
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
官网导航更智能:CSS动画下划线,让每一次点击都充满期待!
|
5月前
|
前端开发
css 巧用 ::after 和 ::before 实现竖排分类导航
css 巧用 ::after 和 ::before 实现竖排分类导航
53 1
|
5月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
307 0
|
6月前
|
前端开发
CSS动画效果(官网智能导航)
CSS动画效果(官网智能导航)
|
7月前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
48 1
|
前端开发
HTML+CSS实现导航条
HTML+CSS实现导航条