本例采用VScode开发前端页面,主要使用bootstrap技术
技术点:
1. 背景图拉伸使用background-size: cover;
页面效果如下:
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="onepage">
<div class="onepage-bg" id="onepagebg">
<div class="container">
<div class="row">
<div class="title-text">
<div class="col-md-12 headfrontsize">
<h1 class="headh1content">
daily life<br>
</h1>
<p style="margin-top: 20px;line-height:23px;">只要你坚持,这都是小菜一碟</p>
<p class="btn-app-store">
<a class="btn btn-success btn-lg" href="#">立即学习</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.app.css
h1.h3,p,a.button{
font-family: Arial, Helvetica, sans-serif;
}
.onepage{
height: 750px;
}
.onepage-bg{
height: 800px;
width:100%;
position: absolute;
background-position: center,center;
background-size: cover;
}
#onepagebg{
background-image:url("image/1.jpg");
}
.headh1content{
margin-top:150px;
line-height:75px;
}
.title-text{
margin-left:50px;
}
.headfrontsize h1{
front-size:50px;
color:#ffffff;
}
.headfrontsize p{
color:#ffffff;
}