html - 谷歌/StackExchange 导航栏

标签 html css

我想制作一个像 Google(他们的新导航栏)或 StackExchange 那样的导航栏,它位于顶部。它不必是持久的,我需要的只是链接,但我怎样才能让它像那样立即保持在顶部?更重要的是,我怎样才能让它始终填满屏幕的整个宽度(而不是具有定义的宽度)?

目前我有一个简单的内联列表,但宽度已定义。

为此,我愿意在任何程度上使用新的 HTML5 技术和 CSS。

最佳答案

你需要做这样的事情

<div id="topBar">
    This is content
</div>

CSS

body{margin:0; padding:0;}
#topBar{width:100%; text-align:center; background:#ccc; height:25px;}

http://jsfiddle.net/jasongennaro/Xpxhy/

那么,你

  1. div 放在开始的 body 标签之后。
  2. 确保主体上没有边距填充
  3. 宽度设置为100%
  4. 居中对齐文本。

关于html - 谷歌/StackExchange 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6878175/

相关文章:

html - 页面加载时图像背景闪烁/闪烁白色

javascript - jQuery 表单提交失败

JavaScript 将事件附加到动态呈现的元素

javascript - fullPage.js onLoad 回调?

css - 文本或 Google 字体未在 Chrome 中显示

css - 属性 “name”的正确替代方法是什么?

javascript - 背景 : none - how to enable with jQuery?

Javascript - 一个函数中的多个任务不起作用

html - Chrome 背景尺寸不准确?

jQuery 手机 : Cannot get Mobiscroll demo to work