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. python练习册 每天一个小程序 第0012题

    # -*-coding:utf-8-*- def test(content): text = content flag = 0 with open('filtered_words.txt') as f ...

  2. Mycat+MySql 主从复制-读写分离 看这一篇就够了

    ​ 通过mycat和mysql的主从复制配合搭建数据库的读写分离,可以实现mysql的高可用性,下面我们来搭建mysql的读写分离. 1.一主一从 1.在node01上修改/etc/my.cnf的文件 ...

  3. String--int互转

    A:int -->String 1.String s1 = "" + 100; 2.String s2 = String.valueof(100); 3.(int -- In ...

  4. java-开发规约

    public class TenTen { /** * 代码中的命名不能用下划线或美元符号开始和结束:例如 _name name_ $name name$ */ /** * 类名必须使用UpperCa ...

  5. kafka消费组创建和删除原理

    0.10.0.0版本的kafka的消费者和消费组已经不在zk上注册节点了,那么消费组是以什么形式存在的呢? 1 入口 看下kafka自带的脚本kafka-consumer-groups.sh,可见脚本 ...

  6. Spring框架中的单例bean是线程安全的吗?

    不,Spring框架中的单例bean不是线程安全的.

  7. Spring常用的注入方式有哪些？

    Spring通过DI(依赖注入)实现IOC(控制反转),常用的注入方式主要有三种:构造方法注入,setter注入,基于注解的注入. 参考链接:Spring常用的三种注入方式

  8. java-关于getResourceAsStream

    1111class.getClassLoader().getResourceAsStream InputStream ips = testResource.class.getClassLoader() ...

  9. Python - 分支循环、可迭代对象与迭代器

  10. css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS

    适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码,稍作修改可以生成下图.css代码如下: @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ ...