#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部分的更多相关文章

  1. 手写网页扫雷之HTML部分

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 手写网页扫雷之js部分(vue)

    var vm = new Vue({ el:"#ui", data(){ return{ num:0, saoleiStyle:{ width: "0px", ...

  3. 纯手写分页控件CSS+JS+SQL

    Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性 ...

  4. CSS中的五大字体家族(cursive 手写字体族更吸引我)

    这是CSS中的五大字体家族. serifserif 中文翻译为“衬线字体族”.serif 具有末端加粗.扩张或尖细末端,或以实际的衬线结尾的一类字体.可以看出 serif 总是在文字末端做文章,这样做 ...

  5. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  6. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

  7. 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  8. 偏前端-纯css,手写轮播-(焦点切换 和 自动轮播 只可选择一种,两者不可共存)

    现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...

  9. css手写一个表头固定

    Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...

随机推荐

  1. Centos7访问Win7/Win10系统中的共享文件

    服务器挂在U盘: 1.先将U盘格式化为Fat格式或其他服务器能识别的格式. 2.使用fdisk -l,找到自己的U盘(根据盘大小) 3.新建一个文件夹(mkdir /mnt/usb)用于挂在数据 4. ...

  2. Selenium RemoteWebDriver 利用CDP修改User-Agent

    地球人都知道,如果使用selenium时要修改user-agent可以在启动浏览器时添加配置项,如chromeOptions.addArguments("user-agent=xxx&quo ...

  3. Shift - And字符串快速处理 hdu5972+cf

    基础知识介绍 KMP就是不断往前找1的位置,而ShiftAnd经过三步处理已经完成这个迭代的过程了 如果匹配两个字符集有限的字符串的话,那么Shift-And比kmp要快,找区间内某字符串出现的数目也 ...

  4. List的扩容机制,你真的明白吗?

    一:背景 1. 讲故事 在前一篇大内存排查中,我们看到了Dictionary正在做扩容操作,当时这个字典的count=251w,你把字典玩的66飞起,其实都是底层为你负重前行,比如其中的扩容机制,当你 ...

  5. Java——反射三种方式的效率对比

    转载自:https://blog.csdn.net/aitcax/article/details/52694423 1 使用field(效率最高)             long start = S ...

  6. JAVA定义变量和基础的数据类型和关键字

      标识符语法 1)java中定义标识符格式以字母,数字,下划线,$符合组成,不能以数字开头,且不能为  java中的关键字.         2)标识符意义要明确,不要乱起         3)标识 ...

  7. Consul+upsync+Nginx实现动态负载均衡

    上一篇文章 <C# HttpClient 使用 Consul 发现服务> 解决了内部服务之间的调用问题, 对外提供网关服务还没有解决, 最后我选择了 nginx-upsync-module ...

  8. 使用cxfreeze打包成exe文件

    旧版本下载链接地址python3.4以下的:https://www.lfd.uci.edu/~gohlke/pythonlibs/#cx_freeze 最新版本python3.5以上直接使用  pip ...

  9. require.js与IDEA的配合

    本文主要讲述在html中使用requirejs时,如何让IDEA更加智能识别javascript的方法. 测试时的目录结构,一种典型的 thinkphp 的结构,同时,在 a.thml 中通过 req ...

  10. Jenkins在Pod中实现Docker in Docker并用kubectl进行部署

    Jenkins在Pod中实现Docker in Docker并用kubectl进行部署 准备工作 安装Jenkins Jenkins的kubernetes-plugin使用方法 说明 Jenkins的 ...