Flexbox响应式菜单
发布时间:2020-12-15 03:50:41 所属栏目:百科 来源:网络整理
导读:这两天在研究flexbox,来看一个Flexbox实现的响应式菜单。 大家可以到codepen在线把玩,或下载收藏本效果,记得用不同的窗口宽度来测试响应式布局哦。 好的,html文件很简单,就是一个普通的菜单 ul class="navigation" lia href="#"Home/a/li lia href="#"A
这两天在研究flexbox,来看一个Flexbox实现的响应式菜单。 大家可以到codepen在线把玩,或下载收藏本效果,记得用不同的窗口宽度来测试响应式布局哦。 好的,html文件很简单,就是一个普通的菜单 <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul>css文件 .navigation { list-style: none; margin: 0; background: deepskyblue; border-bottom: 2px solid hotpink; box-shadow: 0 0 5px rgba(0,1); 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 { color: #333; text-decoration: none; display: block; padding: 15px; color: white; font-weight: bold; } .navigation a:hover { background: darken(deepskyblue,2%); } @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,0.3); border-bottom: 1px solid rgba(0,0.1); } .navigation li:last-of-type a { border-bottom: none; } }好的,完工。
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |