手写网页扫雷之css部分
#ui{
text-align: center;
}
#saolei{
width: 500px;
height: 500px;
border: 1px solid #456345;
margin: 0 auto;
transition: all 0.5s;
}
#saolei .box{
width: 50px;
height: 50px;
border: 1px solid #665544;
box-sizing: border-box;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
#saolei .box.active{
background: rgb(194, 194, 194);
}
#saolei .box.surround{
background: rgb(155, 66, 228);
}
#saolei .box .menu{
display: none;
list-style: none;
font-size: 12px;
padding:;
margin:;
position: absolute;
width: 50px;
}
#saolei .box .menu li{
border: 1px solid #858585;
margin-top: 1px;
background-color: orange;
cursor: pointer;
}
#saolei .box .menu li:hover{
background-color: yellow;
}
.icon{
height: 30px;
width: 30px;
background-image: url(../img/flag.jpg);
background-position: center center;
background-size: cover;
}
手写网页扫雷之css部分的更多相关文章
- 手写网页扫雷之HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 手写网页扫雷之js部分(vue)
var vm = new Vue({ el:"#ui", data(){ return{ num:0, saoleiStyle:{ width: "0px", ...
- 纯手写分页控件CSS+JS+SQL
Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性 ...
- CSS中的五大字体家族(cursive 手写字体族更吸引我)
这是CSS中的五大字体家族. serifserif 中文翻译为“衬线字体族”.serif 具有末端加粗.扩张或尖细末端,或以实际的衬线结尾的一类字体.可以看出 serif 总是在文字末端做文章,这样做 ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- 辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- 偏前端-纯css,手写轮播-(焦点切换 和 自动轮播 只可选择一种,两者不可共存)
现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...
- css手写一个表头固定
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
随机推荐
- Argo 项目加入 CNCF 孵化器 | 云原生生态周报 Vol. 45
作者 | 陈洁.高相林.陈有坤.敖小剑 业界要闻 Argo 项目加入 CNCF 孵化器 Argo 项目是一组 Kubernetes 原生工具,用于运行和管理 Kubernetes 上的作业和应用程序. ...
- ShoneSharp语言(S#)的设计和使用介绍系列(8)— 最炫“公式”风
ShoneSharp语言(S#)的设计和使用介绍 系列(8)— 最炫“公式”风 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ShoneSha ...
- 解决WordPress网站被利用xmlrpc.php文件攻击问题
原因在于使用的WORDPRESS程序默认xmlrpc.php开启,而被用来DDOS攻击导致占用资源过高. 如何解决这个问题呢? 是屏蔽 XML-RPC (pingback) 的功能. add_filt ...
- 线程的 run() 和 start() ; 太骚了 ~~
线程的 run() 和 start() ; 太骚了 ~~ 线程的 run() 和 start() ; 太骚了 ~~注:本文转载于:CodeCow · 程序牛 的个人博客:http://www.code ...
- web自动化之文件上传操作
#!/usr/bin/python3 # -*- coding: utf-8 -*- #Author: xiaojian #Time: 2018/11/16 20:49 import win32gui ...
- webpack-dev-server 使用 react-router 启用 browserhistory 采坑记
问题的产生 今天下午请假,忙完手头事之后,在家实在无聊,想着从0开始搭建一个 react 的项目.webpack 基本配置之前研究过,没什么大问题.谁想,在 react-router 的配置时出现了个 ...
- [Flutter] 音频播放插件 audioplayers 的一个路径坑
pubsepc.yaml 文件 flutter: assets: video/video-01.mp4 video/video-02.mp4 audio/bg.mp3 以上关于视频的文件的配置,都能正 ...
- 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...
- [PHP学习教程 - 文件]001.高速读写大数据“二进制”文件,不必申请大内存(Byte Block)
引言:读写大“二进制”文件,不必申请很大内存(fopen.fread.fwrite.fclose)!做到开源节流,提高速度! 每天告诉自己一次,『我真的很不错』.... 加速读写大文件,在实际工作过程 ...
- MVC设计模式-查询与删除
MVC是Model-View-Controller的简称,即模型-视图-控制器.MVC是一种设计模式,它把应用程序分成三个核心模块: 模型:模型是应用程序的主体部分,模型表示业务数据和业务逻辑. 一个 ...