本例采用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; }
