1. html 结构

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">

  <link rel="stylesheet" href="./css/menu.css">

</head>

<body>

  <div class="menu-wrap">

    <input type="checkbox" class="toggler">

    <div class="hamburger"><div></div></div>

    <div class="menu">

      <div>

        <ul>

          <li><a href="#">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Serices</a></li>

          <li><a href="#">Contact</a></li>

        </ul>

      </div>

    </div>

  </div>

  <header id="showcase">

    <div class="container showcase-container">

      <h1>欢迎来到铄洋在线</h1>

      <p>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.</p>

      <a href="#" class="btn">阅读更多</a>

    </div>

  </header>

</body>

</html>

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;

}

css 进阶实战项目的更多相关文章

  1. 【SpringBoot】单元测试进阶实战、自定义异常处理、t部署war项目到tomcat9和启动原理讲解

    ========================4.Springboot2.0单元测试进阶实战和自定义异常处理 ============================== 1.@SpringBoot ...

  2. react实战项目-很适合进阶

    前言 前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的v ...

  3. Java自学基础、进阶、项目实战网站推荐

    推荐一个自学的好平台,有Java基础,前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Spring 教程 Mybatis 教程 Sprin ...

  4. React+Redux开发实战项目【美团App】，没你想的那么难

    README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...

  5. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  6. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  7. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  8. vue+websocket+express+mongodb实战项目（实时聊天）

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  9. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

随机推荐

  1. 使用gdb

    1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...

  2. 重定向（Redirect）和请求转发（Forward）

    一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...

  3. 你应该知道的Redis事务

    前两篇 Redis 文章都大几千字,今天我们换个小清新点的 如果你也了解过关系型数据库事务的话,相信这篇文章对你来说是很容易理解的了.具体什么是事务我就不说不多了,直接讲 Redis 事务相关的部分. ...

  4. Kafka学习（一）

    作者:普适极客链接:https://www.zhihu.com/question/53331259/answer/1321992772来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  5. XML常用解析API有哪几种?

    XML常用解析API有JAXP.JDOM.Dom4j等. JAXP是Java API for XML Processing的英文字头缩写,中文含义是:用于XML文档处理的使用Java语言编写的编程接口 ...

  6. 推荐几个免费的在线学习IT技能视频网站：

    1.慕课网:http://www.imooc.com/course/list 2.极客学院:http://www.jikexueyuan.com/ 3.百度传课:http://www.chuanke. ...

  7. mac下启动/停止/重启mysql服务

    /usr/local/Cellar/mysql\@5.7/5.7.27_1/bin/mysql.server restart/start/stop

  8. 解释内存中的栈(stack)、堆(heap)和方法区(method area) 的用法？

    通常我们定义一个基本数据类型的变量,一个对象的引用,还有就是函数调用的 现场保存都使用 JVM 中的栈空间:而通过 new 关键字和构造器创建的对象则放在 堆空间,堆是垃圾收集器管理的主要区域,由于现 ...

  9. 面试问题之C++语言：面向对象的五个原则

    五大原则: 1.单一职责原则SRP(Single Responsibility Principle):是指一个类的功能要单一,不能包罗万象.如同一个人一样,分配的工作不能太多,否则一天到晚虽然忙忙碌碌 ...

  10. 学习Apache（五）

     apache目前主要有两种模式:prefork模式和worker模式: 1)prefork模式(默认模式) prefork是Unix平台上的默认(缺省)MPM,使用多个子进程,每个子进程只有一个线程 ...