1. html 结构

"en">

  "UTF-8">
  "X-UA-Compatible" content="IE=edge">
  "viewport" content="width=device-width, initial-scale=1.0">
  
  "stylesheet" href="./css/style.css">
  "stylesheet" href="./css/menu.css">


  
class="menu-wrap">
    "checkbox" class="toggler">
    
class="hamburger">

    
class="menu">
      

        

          
"#">Home
          
"#">About
          
"#">Serices
          
"#">Contact
        
      
    
  
  
"showcase">
    
class="container showcase-container">
      
欢迎来到铄洋在线
      
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eveniet modi nihil non, ea suscipit neque dolorem officia similique amet quidem dolores optio veritatis excepturi veniam, unde expedita asperiores tempora.
      "#" class="btn">阅读更多
    
  

2. css 样式

:root {
  --primary--color: rgba(13, 110, 139, 0.75);
  --secondary-color: rgba(229, 148, 0, 0.9);
  --onerlay-color: rgba(24, 39, 51, 0.85);
  --menu-speed: 1s;
}
/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}
.container {
  max-width: 960;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 3rem;
}
#showcase {
  background-color: var(--primary--color);
  color: #fff;
  height: 100vh;
  position: relative;
}
#showcase:before {
  content: '';
  background: url('../img/1.jpg') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#showcase .showcase-container {
  display: flex;
  /* 竖向排序 */
  flex-direction: column;
  /* 上下居中 */
  justify-content: center;
  /* 上下居中 */
  align-items: center;
  text-align: center;
  height: 100%;
}

#showcase .showcase-container h1 {
  font-size: 4rem;
}
#showcase .showcase-container p {
  font-size: 1.3rem;
}
.btn {
  display: inline-block;
  border: none;
  text-decoration: none;
  color: #fff;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: opacity 1s ease-in-out;
}
.btn:hover{
  opacity: 0.7;
}