这是一个关于如何使用HTML和CSS创建响应式导航栏的例子。通过调整不同屏幕尺寸下的样式，实现从桌面到移动端的适配。在桌面视图中，电话号码和导航链接在顶部水平排列，而品牌标识在左侧。当屏幕尺寸减小时，电话号码和部分导航链接会隐藏，品牌标识居中，导航链接堆叠显示。
总效果：
html:
响应式CSS：
/* 网站头部 */
header {
width: 100%;
}
header .top {
line-height: 3rem;
padding: 0 1.5rem;
color: #fff;
background: #555;
border-bottom: 1px #ecc000 solid;
}
header .top .tel {
float: left;
}
header .top ul {
text-align: right;
}
header .top ul li {
最低0.47元/天 解锁文章
3016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
