Android防重复点击 SpringApplication 以太坊 dedecms k8s memory uiview jquery解析json matlab复数求模 android调试工具 mysql函数 python日期转时间戳 python学习入门 python简易教程 python的文件操作 java编程入门 java日期类 javalist数组 心理学与生活下载 swing布局 按钮制作 din字体下载 神剪辑教程 心理学与生活pdf 3d看图软件 坐标标注插件 火萤壁纸下载 小程序游戏源码 虚拟声卡驱动 磁芯大战 键盘指法练习游戏 ps光照效果 远程桌面管理工具 趣学python编程 戴尔键盘灯怎么开 俄罗斯方块java 骰子技巧 pr特效插件 战网更新不动 paths
当前位置: 首页 > 学习教程  > 编程语言

CSS3设置圆角导航栏、CSS3选择前面两个元素-n+2

2021/1/13 19:36:56 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

父元素设置圆角,设置overflow: hidden;子元素超过就切除 /* nav */nav {overflow: hidden;border-radius: 8px;margin: 0 4px 3px; }.nav-common {display: flex;height: 88px;background-color: pink; }.nav-common:nth-child(2) {margin: 3px 0; }.nav-items {/*…

 

 

 

父元素设置圆角,设置overflow: hidden;子元素超过就切除

/* nav */

nav {
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
}

.nav-common:nth-child(2) {
    margin: 3px 0;
}

.nav-items {
    /* 不冲突的 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* -n+2就是选择前面两个元素 */



.nav-items:nth-child(-n+2) {

    border-right: 1px solid #fff;

}

 

<!-- 主导航栏 -->
    <nav>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">海外酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>

    </nav>

 


本文链接: http://www.dtmao.cc/news_show_600129.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?