网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
html5
>> 正文
CSS 响应式导航栏实例
阅读：5557 输入：2018-09-09 10:43:10
<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>
上一篇：
CSS 响应式边栏导航实例
下一篇：
pythone用tkinte实现cs编程
相关阅读
CSS3电脑端、移动端自适应及媒体查询
css3的@media属性实现页面响应式布局示例代码
响应式布局入门只看此一例
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens