我想用最简单的方法帮助编写这种使用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>
谢谢!
答案 0 :(得分: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);
}