#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. COCO数据集提取特定多个类并在YOLO-V3上训练

    先占个地方,有空再写 ` import os Dir = './coco_class_6/Annotations/val2014' ImageDir = './coco_class_6/images/ ...

  2. 架构设计 | 接口幂等性原则,防重复提交Token管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.幂等性概念 1.幂等简介 编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.就是说,一次和多次请求某一个资源会产 ...

  3. 201771010128 王玉兰《面象对象程序设计(Java)》第六周学习总结

    第一部分:基础知识总结: 1.继承 A:用已有类来构建新类的一种机制,当定义了一个新类继承一个类时,这个新类就继承了这个类的方法和域以适应新的情况: B:特点:具有层次结构.子类继承父类的方法和域: ...

  4. 【转载】win10应用商店独立安装包(一键安装) 2020最新版官方正式版

    win10应用商店独立安装包(一键安装) 2020最新版官方正式版 Win10 LTSB 2016 / LTSC 2019系统,没有应用商店 需要下载应用商店安装包 蓝盘:https://www.la ...

  5. Mysql批量导入多个sql文件

    DB_edusuntk文件夹下有2000多个个sql备份文件,如何批量导入?首先新建一个main.sql,然后在main.sql文件里面这么写: source C:/sql/1.sql; source ...

  6. JavaScript中foreach、map、filter、find、every、some的用法

    foreach:只是循环数组中的每一项,没有返回值 如:  var arr = [2,3,3,4,5,6]; arr.foreach(function(item,index,array){ dosom ...

  7. 浅谈spring依赖注入

    了解依赖注入 前言 先了解下控制反转--转自知乎的国哥 如果一个类A 的功能实现需要借助于类B,那么就称类B是类A的依赖,如果在类A的内部去实例化类B,那么两者之间会出现较高的耦合,一旦类B出现了问题 ...

  8. 【Leetcode】560. 和为K的子数组&974. 和可被 K 整除的子数组(前缀和+哈希表)

    public class Solution { public int subarraySum(int[] nums, int k) { int count = 0, pre = 0; HashMap ...

  9. Jmeter(四) - 从入门到精通 - 创建网络测试计划(详解教程)

    1.简介 在本节中,您将学习如何创建基本的 测试计划来测试网站.您将创建五个用户,这些用户将请求发送到JMeter网站上的两个页面.另外,您将告诉用户两次运行测试.因此,请求总数为(5个用户)x(2个 ...

  10. 此flash player与您的地区不相容——更换新版本edge后出现的问题

    最新切换到了edge浏览器,使用flash时提示:"此flash player与您的地区不相容",而chrome是没有问题的.网上找到解决方案,发现一个可以有效解决的方式,如下: ...