Fatal编程技术网
  • html/
  • Html 使用多个样式表时浮动标题

Html 使用多个样式表时浮动标题

html css twitter-bootstrap

Html 使用多个样式表时浮动标题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一两个关于浮动标题的问题 目前，我正在处理两个CSS文件，bootstrap.min.CSS和main.CSS，后者是一个自定义文件，包含以下内容 * { margin: 0; padding: 0; } #heading { padding: 0; margin: 0; border: 0; background-color: #acc7dc; height: 10%; width: 100%; z-index:

我有一两个关于浮动标题的问题

目前，我正在处理两个CSS文件，
bootstrap.min.CSS
和
main.CSS
，后者是一个自定义文件，包含以下内容

* {
    margin: 0;
    padding: 0;
}

#heading {
    padding: 0;
    margin: 0;
    border: 0; 
    background-color: #acc7dc; 
    height: 10%;
    width: 100%;
    z-index: 10;
    position: fixed; 
    font-family: 'Merriweather', serif;
    text-align: center;
}
据我所知，应该从屏幕顶部的标题栏开始。但是，有时在测试HTML时，屏幕顶部和标题之间会出现空白

HTML的结构如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/main.css" >
        <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
        <title>Trial</title>
    </head>
    <body>
        <div id="heading">
            <header>
                <h1>Trial</h1>
            </header>
        </div>
    </body>
</html>


试验
试验
我不会在其他任何地方改变这种行为。你知道问题出在哪里吗？

因为你使用的是引导，你可以使用
.navbar固定顶类，这应该可以弥补这个差距。如果要将自己的自定义样式应用于标题，则只需同时应用类和id样式：


<div class='navbar-fixed-top' id="heading">
    <header>
        <h1>Trial</h1>
    </header>
</div>




试验

设置
顶部：0px！重要的对于标题可能没有帮助，但可能值得一试。