Question

我想用最简单的方法帮助编写这种使用div图层的布局样式。

以下是我的目标：https://40.media.tumblr.com/7b6495c85236f1defae135f8384bf56a/tumblr_nsi2j0PQiG1rt59iio1_1280.jpg

基本上我需要将背景分成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>

谢谢！

Answer 1

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

截图：

代码的实时实例 - ＆gt; https://jsfiddle.net/j8jgovjz/1/

// 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>

// CSS

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); 
}

在弹力背景上划分布局

1 个答案: