我想在我的母版页中放置一个 jumbotron 作为标题答案

【问题标题】：I want to place a jumbotron as a header in my masterpage我想在我的母版页中放置一个 jumbotron 作为标题
【发布时间】：2016-05-17 08:46:21
【问题描述】：

所以我在visual studio上开发一个网站，css和master page都设置好了，显示链接和内容如下：

所以我想要一个 jumbotron 作为标题/标题出现在链接上方并与页面的其余部分对齐。

我的CSS：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, textarea, p, block, ul, li {
padding: 0;
margin: 0;
}
/*body*/
body
{
background-color: rb(237, 237,2367);
font-family: Century Gothic;
Font-size: 14px; 
}

.clear
{
clear: both;
}

/*page*/
.wrapper
{
width:950px;
margin:auto;
}

/*Homepage*/
.content
{
width:100%;
background-colour: rgb(254,254,254);
border: 1px solid rgb(224,224,224);
border-radius:5px 5px 5px 5px;
float: left;
margin-top: 8px;
margin-bottom: 8px;
min-height:400px;

}

/*Menu*/
.menu {
background-color: rgb(10, 110, 178);
width: 100%;
margin: 0px 0px 10px;
padding: 0px;
height: 40px;
color: rgb(243, 243, 243);
border-radius: 5px 5px 5px 5px;
}

.navigation_first_item {
border-left: 0px;
border-radius: 5px 0 05px;
}
.navitem_s{
float: left;
border-right:1px solid rgb(10, 85, 125);
border-left: 1px solid rb(7, 153, 200);
height:40px;
background-color:rgb(14,79,114);
}
.menu ul{

}
.menu ul li{
float:left;
display:block;
list-style:none;
border-right:1px solid rgb(10, 85,125);
border-left:1px solid rgb(67, 153, 200);
}
.menu ul li.navigation_first_item:hover
{
border-radius:5px 0px 0px 5px:;
}

.menu ul li a
{
font-size: 13px;
font-weight:bold;
line-height:40px;
padding:8px 20px;
color:rgb(225,225,225);
}

.menu ul li:hover{
background-color:rgb(14,89,130);
border-right:1px solid rgb(14,89,130)
}
.clear
{
clear:both;
}

/*footer*/
.footer{
height:50px;
background-color: rgb(10, 110, 178);
color:rgb(255,255,255);
border-radius:5px 5px 5px 5px;
}
.footer h2
{
padding:15px;
position:center;
}

我的主页：

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb"     Inherits="Masterpages_MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
    <asp:ContentPlaceHolder ID="title" runat="server">   </asp:ContentPlaceHolder>
</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>
 <link href="../Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">

  <div class ="menu">
    <ul>
       <li class="navigation_first_item"><a  href="Information.aspx">Information</a></li>
       <li><a href="Register.aspx">Register</a></li>
       <li><a href="Login.aspx">Login</a></li>

        <li></li>

    </ul>
   </div>
    <div class="clear"></div>
    <div class="content">

    <asp:ContentPlaceHolder id="contentbody" runat="server">

    </asp:ContentPlaceHolder>
</div>
<div class="clear"></div>
<div class="footer">
Surgery Cloud
</div>
</div>

</form>
</body>
</html>

因此，从网站上的上一个问题中，我注意到可以将图片放在 jumbotron 内（这只是一个示例）：

  .jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}

当我把

<div class="jumbotron"></div>

在头部内容部分，图片不会出现在链接上方我想要的位置。

【问题讨论】：

你能给我们看一个没有 C#/ASP.NET 代码的 sn-p 吗？
您好，paveen，谢谢您的回复，您希望我删除哪一部分，如果我发布的内容似乎没有条理，请见谅
嗨，没关系。你知道如何按照你的要求用纯 HTML 和 CSS 做 jumbotron 吗？
我不太确定，我想我已经使用 css 将链接定位在页面顶部，但是我不确定如何在此上方放置任何内容
您能否将您所做的工作显示为单独的链接作为对我评论的回复？ jsbin.com 会是最好的。

标签： html css asp.net master-pages

【解决方案1】：

您是否尝试将图片网址放在引号中？

background-image: url("../img/jumbotronbackground.jpg");

【讨论】：