html - 如何通过CSS在页面顶部附加一个div?

标签 html css

<分区>

我正在模仿这个网页作为练习:

https://getbootstrap.com/docs/3.3/getting-started/

而且我很难将带您转到 Bootstrap 4 的蓝色 div 附加到页面顶部。我想确保 div 之间没有空格,就像提供的网站一样。

这是我目前的代码:

  body {
    background-color: white;
  }

  #top {
    background-color: #386CD5;
    text-align: center;
    color: white;
    text-decoration: bold;
    padding: 16px;
    border-radius:0px;
  }

  #special1:visited {
    color:#386CD5;
  }

  #top:hover {
    background-color: #2C62BF;
  }
<a id="special1" href="https://getbootstrap.com">
 <div id="top">
  <strong>Bootstrap 4 is here!</strong>
 </div>
</a>

谢谢。

最佳答案

我从你的问题中了解到,你不希望 div 周围有白色。您可以通过将 body 的边距设置为零来轻松解决此问题。

它看起来像这样:

  body {
    background-color: white;
  margin: 0;
  }

  #top {
    background-color: #386CD5;
    text-align: center;
    color: white;
    text-decoration: bold;
    padding: 16px;
    border-radius:0px;
  }

  #special1:visited {
    color:#386CD5;
  }

  #top:hover {
    background-color: #2C62BF;
  }
<a id="special1" href="https://getbootstrap.com">
 <div id="top">
  <strong>Bootstrap 4 is here!</strong>
 </div>
</a>

关于html - 如何通过CSS在页面顶部附加一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53525614/

上一篇:css - 如何放大保持对象的中心到位?

下一篇:html - 是否可以相对于 div(不是视口(viewport))缩放字体大小?

相关文章:

jquery - 根据 div 与父级自动更改底部

javascript - 带有 Pandoc 的完全独立的 HTML 文件

html - 如何在屏幕尺寸变化时保持小侧边栏样式?

javascript - 绑定(bind)数据列表后,将 css 样式重新应用于 View 的一部分

html - 内容不足时扩展正文以覆盖 z 索引页脚

javascript - 逐渐增加 eclipse 刻素描元素的不透明度

javascript - JQuery animate() 没有动画

android - 为什么 phonegap 应用程序在覆盖 index.html 后总是显示自己的默认页面

html - 小于最小宽度时 Div 滚动

jquery - 使用 jquery 更改悬停时的不透明度