主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
CSS 响应式导航栏实例
2018-09-09
网页编程网
网页编程网
<html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} }</style></head> <body> <ul class="topnav"> <li><a class="active" href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li class="right"><a href="#about">关于</a></li> </ul> <div style="padding:0 16px;"> <h2>响应式导航栏实例</h2> <p>在屏幕宽度小于 600px 会重置导航栏。</p> <h4>重置浏览器窗口大小，查看效果。</h4> </div> </body></html>
阅读原文
阅读
5558
123
显示电脑版