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. PWA全称Progressive Web App，即渐进式WEB应用?

    一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能解决了哪些问题 ...

  2. Java使用多线程异步执行批量更新操作

    import com.google.common.collect.Lists; import org.apache.commons.collections.CollectionUtils; impor ...

  3. Math.round(11.5)等於多少? Math.round(-11.5)等於多少?

    Math类中提供了三个与取整有关的方法:ceil.floor.round,这些方法的作用与它们的英文名称的含义相对应,例如,ceil的英文意义是天花板,该方法就表示向上取整,所以,Math.ceil( ...

  4. Oracle入门基础（九）一一创建表和管理表

    练习:查询每一年入职人数及总人数 SQL> select count(*) Total, 2 sum(decode(to_char(hiredate,'yyyy'),'1980',1,0)) & ...

  5. ZAB 和 Paxos 算法的联系与区别？

    相同点: 1.两者都存在一个类似于 Leader 进程的角色,由其负责协调多个 Follower 进程的运行 2.Leader 进程都会等待超过半数的 Follower 做出正确的反馈后,才会将一个提 ...

  6. Linux编译安装软件常见问题及排查

    1.配置cmake参数时提示: The C compiler identification is unknown. The CXX compiler identification is unknown ...

  7. 学习 Haproxy （五）

    1 Linux Haproxy 负载均衡 v1.8 ★★★ 类似于ningx的反向代理1.1 Haproxy 概述 Haproxy是一个开源的高性能的反向代理或者说是负载均衡服务软件之一,它支持双机热 ...

  8. springboot项目中的日志输出

    #修改默认输出级别,trace < debug < info < warn < errorlogging.level.com.lagou=trace#控制台输出logging. ...

  9. CountDownLatch和CyclicBarrier：如何让多线程步调一致？

    案例:对账系统的业务是这样的,用户通过在线商城下单,会生成电子订单,保存在订单库:之后物流会生成派送单给用户发货,派送单保存在派送单库.为了防止漏派送或者重复派送,对账系统每天还会校验是否存在异常订单 ...

  10. C++ - main()和_tmain(int argc, _TCHAR* argv[]) 的详细区别

    一些程序中会发现主函数不是int main(),而是int _tmain(),而且头文件也不是<iostream>而是<stdafx.h>. 首先,这个_tmain()是为了支 ...