Question

在我的程序中，我决定为页面标题添加标题。问题是新标题不会超出导航栏。然而，它曾一度有效;没有连接格式。现在我的文本格式几乎正确（颜色仍然是错误的），它的位置再次关闭。

这是短代码：

我的更多代码：

#screen {}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #DAE6F0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
}

#header {
    margin-top: 100px;
    margin-bottom: 45px;
}

#gradient {
    height: 65px;
    margin-bottom: 60px;
    /* IE 10 */
    background-image: -ms-linear-gradient(top, #81a8cb 0%, #1947D1 100%);

    /* Firefox */
    background-image: -moz-linear-gradient(top, #81a8cb, #1947D1); 

    /* Safari  & Chrome */
    background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, #1947D1),color-stop(1, #81a8cb)); 
    box-shadow: inset 0 0 15px black;
}

h1.name{
    font-family: Lato, 'Courier Bold', sanserif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 60px;
    margin-left: 30px;
    float:left;
    color: "#335CD6";
}

HTML：

<!DOCTYPE html>
<html>

<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>

<div id = "screen">
<body>

<h1 class = "name"> Prog-Assist </h1>

<div id = "header">
    <div id = "gradient">

..................... more code
    </div>
</div> <!-- end header --> 

</div> <!-- end screen-->
</body>
</html>

Answer 1

只需删除

float:left;

现在在你的小提琴中工作得很好

Answer 2

http://jsfiddle.net/edqq8trg/3/

从H1中删除左边的浮动。

h1.name{

    font-family: Lato, 'Courier Bold', sanserif;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 60px;
    margin-left: 30px;

    color: "#335CD6";
    margin-top: 0;
}

在导航栏上方移动<h1>标题</h1>

2 个答案: