-1

http://i.stack.imgur.com/pKdrK.png

正如您从这张图片中看到的那样，我尝试创建一个顶部带有 div 的标题，它是页面的主标题。我到处看了看，我不知道如何在标题顶部获得标题，这可能很简单，但我不确定。

ps 标题是几乎看不到的小红点。

CSS 

#title {
   font-family:Bebas;
   font-size:20px;
   font-weight:bold;
   border:5px groove #ff0022;
   color:#00D0FF;
   background-color:#ff0022;
   position:relative;
   margin-left:10px;
   margin-top:10px;
}
#banner {
       border:1px solid #4A4A4A;
       width:1903;
       height:110;
       background-color:#4A4A4A;
       margin-left:0px;
       position:absolute;
       top:-10px;
       border-radius:15px;
}
a:visited {

          text-decoration:none;
}

HTML 

<head>
<link type="text/css" rel="stylesheet" href="todd.css"/>
<title>Todd's Website</title>

</head>

<body>
     <a href="file:///C:/Users/Todd/Desktop/todd.html">
        <h1>
            <div id="title">Todd's Awesome Website!
                <div id="banner">




                </div>
            </div>
        </h1>
     </a> 
</body>



</html>

JSFiddle

4

3 回答 3

1

你应该把你的 div 放在你的 h1 标签之外，并且在 h1 标签上有标题 id。此外，您应该将 a 标签放在 h1 标签内：

<div>
  <div id="banner">
    <h1 id="title">
      <a href="file:///C:/Users/Todd/Desktop/todd.html">
        Todd's Awesome Website!
      </a>
    </h1>
  </div>
</div>

希望这可以达到您正在寻找的结果。

于 2013-11-06T22:38:54.293 回答
1

为什么不简单地将标题放在横幅内？您可以将所有样式直接应用到 H1

于 2013-11-06T22:48:05.843 回答
0

如果您不想在横幅内移动标题，可以使用z-index: 10;. 那应该让它显示出来。

于 2013-11-06T22:52:50.857 回答