84 lines
1.8 KiB
CSS
84 lines
1.8 KiB
CSS
/* 引入网络字体（Poppins） */
|
||
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
|
||
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: "Poppins";
|
||
}
|
||
body{
|
||
/* 默认最小高度：2屏 */
|
||
min-height: 200vh;
|
||
background-color: #000;
|
||
}
|
||
header{
|
||
/* 固定定位 */
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
/* 弹性布局 */
|
||
display: flex;
|
||
/* 将元素靠边对齐 */
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 40px 100px;
|
||
z-index: 1;
|
||
/* 动画过渡 */
|
||
transition: 0.6s;
|
||
}
|
||
header .logo{
|
||
font-size: 32px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
/* 转大写 */
|
||
text-transform: uppercase;
|
||
/* 字间距 */
|
||
letter-spacing: 2px;
|
||
transition: 0.6s;
|
||
}
|
||
header ul{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
header ul li{
|
||
list-style: none;
|
||
}
|
||
header ul li a{
|
||
margin: 0 15px;
|
||
text-decoration: none;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
letter-spacing: 2px;
|
||
transition: 0.6s;
|
||
}
|
||
.banner1{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: url("../images/car1.jpg") no-repeat;
|
||
/* 保持原有尺寸比例，裁切长边 */
|
||
background-size: cover;
|
||
/* 图片定位正中间 */
|
||
background-position: center center;
|
||
}
|
||
.banner2{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: url("../images/car2.jpg") no-repeat;
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
/* 鼠标滚动后，改变导航栏样式 */
|
||
header.sticky{
|
||
padding: 6px 100px;
|
||
background-color: #fff;
|
||
}
|
||
header.sticky .logo,
|
||
header.sticky ul li a{
|
||
color: #000;
|
||
} |