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. [SPDK/NVMe存储技术分析]014 - (NVMe over PCIe)Host端的命令处理流程

    NVMe over PCIe最新的NVMe协议是1.3. 在7.2.1讲了Command Processing流程.有图有真相. This section describes command subm ...

  2. T12焊台控制器制作教程 | T12烙铁 | PID增量式算法恒温控制 | 运算放大器-热电偶电压采集 | OLED屏幕显示-SPI通信 | 旋转编码器EC11用户操作

    前言 购买T12烙铁的相关配件已经1年多了,期间也尝试了一些开源的T12控制器,但都没有成功,要么是配套资料少,要么是英文的,其中51和arduino的居多,STM32的较少.求人不如求己,索性自己开 ...

  3. [使用多仓库解决] idea maven 下载源码出现：Cannot download sources Sources not found for: xxx

    根本原因 依赖托管仓库的库存不足.有的仓库,就是没有团队上传这个依赖.所以多加几个镜像源,总有一个仓库能找到. 解决方案 修改 maven 默认配置文件 "C:\Users\<user ...

  4. Bean实例化方式

    https://blog.csdn.net/diaosinixiheixiu/article/details/78919395 https://www.cnblogs.com/deng-cc/p/89 ...

  5. JSP有哪些动作？分别是什么？

    外JSP共有以下7种基本动作 jsp:include:在页面被请求的时候引入一个文件. jsp:useBean:寻找或者实例化一个JavaBean. jsp:setProperty:设置JavaBea ...

  6. 什么是 FutureTask?使用 ExecutorService 启动任务?

    在 Java 并发程序中 FutureTask 表示一个可以取消的异步运算.它有启动和取消 运算.查询运算是否完成和取回运算结果等方法.只有当运算完成的时候结果才 能取回,如果运算尚未完成 get 方 ...

  7. 什么情况下一个 broker 会从 isr中踢出去？

    leader会维护一个与其基本保持同步的Replica列表,该列表称为ISR(in-sync Replica),每个Partition都会有一个ISR,而且是由leader动态维护 ,如果一个foll ...

  8. MariaDB InnoDB基本介绍

    InnoDB锁定模式 事务获取锁,以防止并发事务修改甚至读取某些行或行范围.这样做是为了确保并发写入操作不会冲突. 共享锁(S)和排他锁(X) 两种标准的行级锁是共享锁(S)和排他锁(X) 获取共享锁 ...

  9. Java 中如何格式化一个日期？如格式化为 ddMMyyyy 的形式？

    Java 中,可以使用 SimpleDateFormat 类或者 joda-time 库来格式日期. DateFormat 类允许你使用多种流行的格式来格式化日期.参见答案中的示例代 码,代码中演示了 ...

  10. 什么是arduino及.arduino分类

    关于什么是arduino没有什么可说的,想要接触arduino多多少少的都会对arduino有一定的理解,我认为,arduino应该算是一个连接硬件与软件的平台,通过他,你可以将你的想法以代码的形式呈 ...