进阶实战 css 点击按钮的样式
1. html结构
<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>
2. css 样式
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
/* 控制光标的类型 */
cursor: pointer;
width: 60px;
height: 60px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary--color);
display: flex;
justify-content: center;
align-content: center;
}
/* hamburger line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
} /* hamburger liner -- top & bottom */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after{
content: '';
position: absolute;
z-index: 1;
background: #fff;
width: 100%;
height: 2px;
top: 20px;
} .menu-wrap .hamburger > div:after {
top: 10px;
}
3. 重点
伪类选择器
:before 选择器在被选元素的内容前面插入内容.
:after 选择器在被选元素的内容前面插入内容.
进阶实战 css 点击按钮的样式的更多相关文章
- 进阶版css点击按钮动画
1. html <div class="menu-wrap"> <input type="checkbox" class="togg ...
- Android基础TOP5_4:点击按钮更换样式,设置透明度
在res/drawable创建两个样式 点击前/点击后 round: <?xml version="1.0" encoding="utf-8"?> ...
- 记录--前端 页面 jquery 被点击按钮修改样式 其他默认
jquery实现页面条件筛选 此功能类似淘宝的条件筛选,主要是页面样式的更改,问了大神也磨磨唧唧了很久才搞定0.0.... 先贴代码..... 代码知识有 border-radius 设置圆角边框 s ...
- css点击按钮,依次动态展开面板动画效果
<a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...
- CSS 点击图片替换样式
1 <ul id="u1"> <li class="sea one show1">海运</li> <li class= ...
- vue踩坑之路--点击按钮改变div样式
有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
- css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
- win32 htmlayout点击按钮创建新窗口,以及按钮图片样式
最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...
- js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...
随机推荐
- python 发送POST请求
#博客地址:https://blog.csdn.net/qq_36374896 import urllib.request import urllib.parse url = "http:/ ...
- 【技术干货】华为云FusionInsight MRS的自研超级调度器Superior Scheduler
Superior Scheduler是一个专门为Hadoop YARN分布式资源管理系统设计的调度引擎,是针对企业客户融合资源池,多租户的业务诉求而设计的高性能企业级调度器. Superior Sch ...
- @Param注解和@Mapper注解
@Param 1.如果dao方法中只有一个参数,入参可以为#{0}或者#{任意单词},也可以使用@Param指定参数名称,sql中就只能#{指定名称}获取参数 public List<Regio ...
- 当一个线程进入某个对象的一个 synchronized 的实例方 法后,其它线程是否可进入此对象的其它方法?
如果其他方法没有 synchronized 的话,其他线程是可以进入的. 所以要开放一个线程安全的对象时,得保证每个方法都是线程安全的.
- Javascript 占位符替换
String.prototype.format=function(){ if(arguments.length===0){ return String(this); } let reg=/(\{\d\ ...
- 学习openldap01
Linux 下openldap的详细介绍,搭建,配置管理,备份,案例 Ldap 服务应用指南 兼容(5.X&6.X) 1.1 Ldap 目录服务介绍 1.1.1 什么是目录服务(activ ...
- Go 语言 结构体
Go 语言 结构体 引言Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型结构体是由一系列具有相同类型或不同类型的数据构成的数据集合结构体表示一项记录,比如保存图书 ...
- Python - 异常处理初步
- carsim2016 与 MATLAB2018 联合仿真send to simulink后编译不成功解决方法
之前使用CarSim8.1和Matlab17b联合仿真时遇到的问题和现在换用Carsim2017之后遇到了不一样的问题.carsim2017界面选择send to simulink 按钮之后,点击运行 ...
- 如何更愉快地使用rem —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...