html左右布局划分,HTML – 主页划分布局(CSS)

我想为我的网站创建这个主页,它只接受html / css的附加组件而不修饰任何其他规则.

只实现了块本身,但没有关于如何将图像放在按钮后面的线索,将所有内容集中在一起并使其响应…

有提示吗？

Homepage intended

页面链接：www.lluisballbe.smugmug.com

已经使用的代码在这里：

html,

body {

height: 100%;

width: 100%;

margin: 0;

}

body {

display: flex;

flex-direction: column;

}

h1 {

margin: 0;

}

a {

display: inline-block;

}

#business-top {

display: flex;

flex: 1;

width: 100%;

align-items: center;

justify-content: center;

text-align: center;

background:turquoise;

}

#business-button {

height: 3em;

width: 12em;

background-color: #2B2A2A;

border: .2em solid #ff7600;

border-radius: 1.8em;

margin: auto;

}

#logo-separator {

text-align: center;

}

.separator {

display: block;

position: relative;

padding: 0;

height: 0;

width: 100%;

max-height: 0;

font-size: 1px;

line-height: 0;

flex: 0;

border-top: 1px solid #ff7600;

border-bottom: 1px solid #ff7600;

}

#logo {

margin: auto;

max-width: 150px;

display: inline-block;

overflow: hidden;

margin: -75px;

position: absolute;

z-index:1;

}

#photography-bottom {

display: flex;

flex: 1;

width: 100%;

align-items: center;

justify-content: center;

background:gray;

}

#photography-button {

height: 3em;

width: 12em;

background-color: #2B2A2A;

border: .2em solid #ff7600;

border-radius: 1.8em;

margin: auto;

}

h1 {

color: #ff7600;

text-align: center;

font-size: 1.4em;

vertical-align: middle;

line-height: 2.2em

}

#business-top,

#photography-bottom {

pointer-events: none;

position: relative;

transition: 1s;

min-height: 200px;

}

#business-top a,

#photography-bottom a {

pointer-events: auto;

}

#business-top:hover,

#photography-bottom:hover {

flex: 3;

}

#business-top a:hover:before,

#photography-bottom a:hover:before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

BUSINESS

PHOTOGRAPHY

[底部图片] [4]