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. 内网渗透----Windows下信息收集

    一.基础信息收集 使用systeminfo命令查看操作系统版本.架构.补丁情况 Windows-Exploit-Suggester-master -u 参数升级并将数据库下载至本地: -i 参数指定系 ...

  2. S120通讯报文应用类型及区别，PZD格式及意义 | 标准报文1/2/3/4/5/6/7/9/20/81/82/83，西门子报文

    一.报文功能图 1.1标准报文 适用于驱动器 SINAMICS S120 S150 参数手册 章节3.9 PROFIdrive 图3-36 功能图2415标准报文和过程数据1 SINAMICS S12 ...

  3. CF1485X Codeforces Round #701

    D Multiples and Power Differences (构造) 题目大意:给一个n*m的矩阵a,a[i][j]在1到16之间.现在要构造矩阵b,需要满足如下条件: 1.b[i][j]在1 ...

  4. Java 将CSV转为Excel

    CSV(Comma Separated Values)文件是一种纯文本文件,包含用逗号分隔的数据,常用于将数据从一个应用程序导入或导出到另一个应用程序.通过将CSV文件转为EXCEL,可执行更多关于数 ...

  5. MySQL中的约束,添加约束,删除约束,以及其他修饰

    一.NOT NULL(非空约束)添加非空约束 1)建表时直接添加 CREATE TABLE t_user(user_id INT(10) NOT NULL); 2)通过ALTER 语句 ALTER T ...

  6. Kafka 的高可靠性是怎么实现的？

    可以参见我这篇文章:Kafka 是如何保证数据可靠性和一致性

  7. scanf()函数的原理

    最近使用scanf发现了自己对scanf函数还是不太了解,主要出现在无意中出现的一个错误: scanf正确的写法是,scanf中以什么格式输入变量,则变量的类型就应该是什么格式,如下面scanf输入到 ...

  8. 自制jq分页插件

    由于第一次写jq插件,中间有借鉴别人的代码. (function(){ var ms = { fillHtml: function(obj, option) { obj.empty(); var to ...

  9. JavaScript の 内容属性（HTML属性attribute）和 DOM 属性（property）

    [博文]内容属性(HTML属性)和 DOM 属性 标签: 博文 JavaScript 粗略解读(与jQuery做对比) 内容属性(HTML属性) : attribute DOM 属性(Element属 ...

  10. python大佬养成计划----flask_bootstrap装饰网页

    flask_bootstrap Bootstrap 是 Twitter 开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代 Web 浏览器. Boo ...