css 进阶实战项目
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 进阶实战项目的更多相关文章
- 【SpringBoot】单元测试进阶实战、自定义异常处理、t部署war项目到tomcat9和启动原理讲解
========================4.Springboot2.0单元测试进阶实战和自定义异常处理 ============================== 1.@SpringBoot ...
- react实战项目-很适合进阶
前言 前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的v ...
- Java自学基础、进阶、项目实战网站推荐
推荐一个自学的好平台,有Java基础,前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Spring 教程 Mybatis 教程 Sprin ...
- React+Redux开发实战项目【美团App】,没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- webpack进阶构建项目(一)
webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+websocket+express+mongodb实战项目(实时聊天)
继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
随机推荐
- spinlock 设计的初衷,当只有单核时是否还需要锁
自旋锁,的设计初衷是什么,是为了解决什么问题.如果只有一个cpu,并且是单核,那是否还需要用到自旋锁.
- 网关中间件-Nginx(二)
网关中间件-Nginx(一) 第一部分我们主要介绍如下几点: 1.nginx的基本概念 2.nginx结合业务场景实现负载均衡 3.常见问题的举例 这一部分主要介绍Nginx中限流,缓存,动静分离,以 ...
- 【Java分享客栈】Java程序员为争一口气熬夜硬刚CSS实现掘金首页
前言 如果我做不了最厉害的Java工程师,那我就做Java工程师中最厉害的前端工程师. 前段时间,我默默给自己又喂了这碗心灵鸡汤-- 我不是很厉害的Java工程师,哪怕我已经工作八年,我依然觉得自己和 ...
- winform 学习之qq邮箱正则验证及常用正则
这段时间一直再做winform相关的项目,记录了一些东西 qq邮箱正则表达式: 第一种:字母和数字组合邮箱判断 string str = "justin1107@qq.com"; ...
- AVRmega16 LED 例程
AVRmega16 LED 例程 ...
- 老徐和阿珍的故事:CAP是什么?超级爱放P吗?
人物背景: 老徐,男,本名徐福贵,从事Java相关研发工作多年,职场老油条,摸鱼小能手,虽然岁数不大但长的比较着急,人称老徐.据说之前炒某币败光了所有家产,甚至现在还有欠债. 阿珍,女,本名陈家珍,刚 ...
- select 中的timeout
1. select 相关man 资料 /* According to POSIX.1-2001 */ #include <sys/select.h> /* According to ear ...
- mysql索引失效原理(联合索引失效问题)
单值索引B+树图单值索引在B+树的结构里,一个节点只存一个键值对 联合索引开局一张图,由数据库的a字段和b字段组成一个联合索引. 从本质上来说,联合索引也是一个B+树,和单值索引不同的是,联合索引的键 ...
- 为什么 char 数组比 Java 中的 String 更适合存储密码?
另一个基于 String 的棘手 Java 问题,相信我只有很少的 Java 程序员可以正确回答这个问题.这是一个真正艰难的核心Java面试问题,并且需要对 String 的扎实知识才能回答这个问题. ...
- Redis6.0配置文件翻译(Google手动翻译)
原文链接(一般情况下你打不开这个网页):https://raw.githubusercontent.com/redis/redis/6.0/redis.conf Redis配置文件 请注意,为了读取配 ...