Home > php教程 > php手册 > CSS3 flexbox弹性布局实现自适应导航

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

WBOY
Release: 2016-06-07 11:36:11
Original
1876 people have browsed it

#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元

source:php.cn
Statement of this Website
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template