手写网页扫雷之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等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
随机推荐
- js 简单有效判断日期有效性(含闰年)
原文:https://zhidao.baidu.com/question/1701946584925153620.html 要想精确验证,最容易想到的方法就是通过月份判断日期是否合法(1~28/29/ ...
- Centos7 安装完以后安全配置
1.更新系统和补丁 我们的互联网是很不安全的,每天都有新的漏洞出现和修复,所以一定要更新.更新.更新, yum -y update 上面的命令是检查更新并安装,包括内核和软件,建议刚安装完就更新一次, ...
- c# 优化代码的一些规则——字符串使用优化[四]
前言 在我们的程序中,经常使用到字符串,字符串的写法非常多,但是有一个问题就是我们写的字符串是否合适呢? 正文 内插符 介绍一个东西叫做内插字符,如下: static void Main(string ...
- 【JavaScript数据结构系列】03-队列Queue
[JavaScript数据结构系列]03-队列Queue 码路工人 CoderMonkey 转载请注明作者与出处 1. 认识队列Queue结构 队列,跟我们的日常生活非常贴近,我们前面举例了食堂排队打 ...
- JVM调优总结(八)-反思
垃圾回收的悖论 所谓“成也萧何败萧何”.Java的垃圾回收确实带来了很多好处,为开发带来了便利.但是在一些高性能.高并发的情况下,垃圾回收确成为了制约Java应用的瓶颈.目前JDK的垃圾回收算法,始终 ...
- [安卓基础] 003.建立你的第一个App
创建一个android工程项目 我们使用android提供的集成开发工具(Eclipse+ADT)来创建android工程项目.用这个集成开发工具创建项目,简单,方便,快捷,且自动帮助我们生成基础的文 ...
- 前端练手小项目——网页版qq音乐仿写
qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...
- 解决pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.问题
国内的其他镜像源清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技 ...
- Python实现批量MD5加密
#!/usr/bin/python # -*- coding: utf-8 -*- import hashlib def md5(str): hl = hashlib.md5() hl.update( ...
- Rocket - diplomacy - Node相关类
https://mp.weixin.qq.com/s/BvK3He3GWon8ywG8Jdmcsg 介绍Node相关的类. 1. BaseNode BaseNode是所有节点类的 ...