Html 拉伸背景上的Divs布局_Html_Css

Html 拉伸背景上的Divs布局

html css

Html 拉伸背景上的Divs布局,html,css,Html,Css,我想得到一些关于用div层编写这种布局样式的最简单方法的帮助以下是我的大致目标：基本上我需要把背景分成4个不同的部分，中间有内容。顶部的粉红色和灰色背景将在背景顶部有一个主横幅图像。我还需要能够将内容放置在灰色区域，它将是某种javascript（不要担心框，它们只是作为占位符）在第一个灰色区域的正下方是指向右侧的链接，可能还有一个搜索栏。所以我想对链接和javascript内容使用相同的div 我最有可能使用表来表示链接的小框，但我不确定该放在哪个div区域白色区域将包含带有一个侧栏的

我想得到一些关于用div层编写这种布局样式的最简单方法的帮助

以下是我的大致目标：

基本上我需要把背景分成4个不同的部分，中间有内容。顶部的粉红色和灰色背景将在背景顶部有一个主横幅图像。我还需要能够将内容放置在灰色区域，它将是某种javascript（不要担心框，它们只是作为占位符）

在第一个灰色区域的正下方是指向右侧的链接，可能还有一个搜索栏。所以我想对链接和javascript内容使用相同的div

我最有可能使用表来表示链接的小框，但我不确定该放在哪个div区域

白色区域将包含带有一个侧栏的主要内容。请忽略较大的白色空框…我想我会将它们移到侧边栏。此区域需要根据内容量进行拉伸

底部灰色区域将用于更多文本/链接，因此该区域也需要根据内容量垂直拉伸

我仍然在玩弄布局，所以我正在寻找一个基本的div框架，我可以开始使用它。我从来没有做过有拉伸背景和内容的div布局，所以我不知道从哪里开始

到目前为止，我只有这些：

body {  background-color: #ffffff;
margin: 0px; 
padding: 0px;
text-align: justify;
cursor: default;    }

#pinkbackground {
width: 100%;
height: 75px;
background:#ffbaba; }

#whitebackground {
width: 100%;
height: 100%;
background:#ffffff; }


#greybackground {
width: 100%;
height: 200px;
background:#e2e2e2; }


#greybackground2 {
width: 100%;
height: 100%;
background:#e2e2e2; }

<html>
<head>
<title>Test</title>

<link rel="stylesheet" type="text/css" href="style.css">
</style>

</head>
<body>

<div id="pinkbackground">         
</div>

<div id="greybackground">
     <div id="content">
     </div>       
</div>

<div id="whitebackground">
     <div id="content">
     </div>       
</div>

<div id="greybackground2">
     <div id="content">
     </div>       
</div>

</body>
</html>

body{背景色：#ffffff；
边际：0px；
填充：0px；
文本对齐：对齐；
游标：默认值；}
#针状背景{
宽度：100%；
高度：75px；
背景：#ffbaba；}
#白背景{
宽度：100%；
身高：100%；
背景：#ffffff；}
#灰色背景{
宽度：100%；
高度：200px；
背景：#e2e2；}
#灰色背景2{
宽度：100%；
身高：100%；
背景：#e2e2；}
试验

谢谢

这是一个供您使用的骨架，如果您愿意，我可以让它更具视觉吸引力，让我知道

截图：

代码的活动实例-->

//HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">    
</head>
<body>
    <nav>
        <div>
            <div id="logo">LOGO</div>
        </div>
        <div><input id="srchbar" type="search" placeholder="Search for anything..."></div>
        <div>
            <a href="">Sign Up</a>
            <a href="">Sign In</a>
        </div>
    </nav>
    <section id="content">
        <aside id="sidebar"></aside>
        <section id="main"></section>
    </section>
    <footer></footer>
</body>
</html>

展示你已经尝试过的东西…@Jennifer给我5分钟，我会给你一个模型。@JordanDavis:真的吗？？：p（15分钟后问这个）@jennifer:请给我们展示一下你的尝试和问题所在……这将帮助我们，以更好的方式帮助你@NoobEditor我已经包括了到目前为止我所拥有的代码。其实没有什么问题……只是我不知道从那里开始，或者重叠内容的最佳方式是什么。你大概迟到了20分钟，伙计！：D@JordanDavis感谢您的快速响应！我也许可以用这个。这不完全是我想要的，但我很感激能得到的任何帮助：）@Jennifer是的，没问题，我错过了什么，你想让我补充一下吗？我现在正在更新它，以使它具有更好的视觉效果。@JordanDavis白色框不需要在顶部：）很抱歉，如果我把你弄糊涂了，我是在粗略地试图确定我想要的最终结果是什么样的时候将它们放在图像中的。这些将在稍后被图像/链接替换。此外，我想在底部有一个文本区的页脚。我也不知道为什么左中和右中的文本框会横跨整个页面。内容区将只在中心…比如说1000像素左右。我想我需要大约3个单独的div作为内容。一个用于顶部，一个用于主体，一个用于页脚。抱歉这么难：）@Jennifer哦，好吧，我把它们拿出来。。。我非常擅长界面设计，我会给你展示一个非常酷的布局，看看你是否喜欢。

body{
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    margin: 0 !important;
    height: 100vh;
    width: 100vw;

}

nav{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 60px;

    z-index: 999;
    position: fixed;
    background: #E448A9;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
nav>div{
    width: 50vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content: center;
}
nav>div:nth-of-type(3){
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

nav>div>a{
    display: -webkit-flex;
    display: flex;

    -webkit-align-self: center;
    align-self: center;

    text-decoration: none;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;

    margin: 0 .5em;
    padding: 0.6em 1.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-transition: background-color 100ms;
    -webkit-transition: background-color 100ms;
    transition: background-color 100ms;
}
nav>div>a:hover{
     background: rgba(255,255,255,0.15);
}
nav>div>a:active{
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
nav>div>a:nth-of-type(2){
    background: rgba(255, 255, 255, 0.15);  
}
nav>div>a:nth-of-type(2):hover{
    background: rgba(255, 255, 255, 0.37);  
}

#srchbar{
    height: 30px;
    width: 400px;
    border: none;
    color: #7C7C7C;
    border-radius: 5px;
    outline: none;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
}
#content{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    height: 400vh;
}
#sidebar{
    display: -webkit-flex;
    display: flex;

    width: 10%;
    height: 100%;

    background: #ccc;
}
#main{
    display: -webkit-flex;
    display: flex;

    width: 90%;
    height: 100%;
}
footer{
    display: -webkit-flex;
    display: flex;

    width: 100%;
    min-height: 200px;
    bottom: 0;

    background: #5c5c5c;

    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6); 
}