欢迎您 本站地址:
复制网址
手机查看
切换背景
源代码:
html编辑器
颜色值转换
点击运行
小库网 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 导航栏样式 */ .navbar { background-color: #333; padding: 10px; display: flex; justify-content: space-between; } /* Logo 样式 */ .logo { color: #fff; font-size: 20px; text-decoration: none; } /* 菜单样式 */ .menu { list-style-type: none; margin: 0; padding: 0; display: flex; } .menu li { margin-left: 10px; } .menu li a { color: #fff; text-decoration: none; } /* 媒体查询:在小屏幕上进行布局调整 */ @media screen and (max-width: 600px) { .navbar { flex-direction: column; align-items: center; } .menu { margin-top: 10px; } .menu li { margin-left: 0; } } </style> <nav class="navbar"> <a href="#" class="logo">Logo</a> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
运行结果:
小库提示
扫描下方二维码,访问手机版。
打赏
关闭