CSS3 flexbox弹性布局实现自适应导航-php手册-php.cn

Home

php教程

php手册

CSS3 flexbox弹性布局实现自适应导航

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:36 AM

#Android开源源码# 【源码分享】[甩甩手]可直接复制使用：[偷乐] CSS3 flexbox弹性布局实现自适应导航

CSS代码：
.navigation{list-style:none;margin:0;background:deepskyblue;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:flex-end}
.navigation a{text-decoration:none;display:block;padding:1em;color:white}
.navigation a:hover{background:#00AEE8}
@media all and (max-width:800px){.navigation{justify-content:space-around}
}@media all and (max-width:600px){.navigation{-webkit-flex-flow:column wrap;padding:0}
.navigation a{text-align:center;padding:10px;border-top:1px solid rgba(255,255,255,0.3);border-bottom:1px solid rgba(0,0,0,0.1)}
.navigation li:last-of-type a{border-bottom:none}
}

HTML代码：

AD：真正免费，域名+虚机+企业邮箱=0元

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn