上节课的时候我们完成的页面是这个样子!
.header-container {
width: 1200px;
margin: 0 auto;
left: 50%;
top: 50%;
}
header {
height: 100vh;
background-color: orange;
position: relative;
}
.header-container {
width: 1200px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
我们把这些问题重新加一个class来操控
.header-container-inner {
width: 50%;
}
header {
height: 100vh;
position: relative;
background-image: url(hero.jpg);
}
header {
height: 100vh;
position: relative;
background-image: url(hero.jpg);
background-size: cover;
}
header {
height: 100vh;
position: relative;
background-image: url(hero.jpg);
background-size: cover;
color: #fff;
}
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url(hero.jpg);
这样看起来就非常好
nav {
font-size: 20px;
font-weight: 700;
display: flex;
justify-content: space-between;
padding-top: 32px; #这里不能使用margin,margin不生效
}
这样我们就大致实现了一个这样的效果
页面更新:2024-04-25
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号