问题总结:

1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left;

2. 隐藏的div这里不需要专门设置宽高、居中,是靠内容和padding撑起来的尺寸。外层div居中,内层跟着居中。

<style>
*{margin:0;padding:0;} // 后来添加的
body{
font-size: 12px;
}
#outer{
margin: 10px auto;
width: 180px;
}
/* #login input, #display{
float: left;
} */
#display{
background-color: yellow;
border: 1px solid orangered;
margin-top:5px;
padding: 5px;
display: none; /* width: 180px;
height: 30px;
margin: 5px auto; */
}
</style>

CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分的更多相关文章

  1. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  2. angularjs鼠标移入移出实现显示隐藏

    <tr ng-repeat="item in items track by $index"> <td data-title="操作" alig ...

  3. setTimeout应用例子-移入移出div显示和隐藏

    效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></ ...

  4. 鼠标移入 移出div div会消失的处理

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

  5. div展现与收起效果(鼠标移入移出)

    效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  8. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  9. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

随机推荐

  1. IDEA 官方教程

    https://www.jetbrains.com/help/idea/discover-intellij-idea.html#UserInterface

  2. vue.js 第一课:实例化vue

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

  3. 洛谷 P2355 团体操队形

    P2355 团体操队形 题目背景 X中学要团体操比赛了哦.队形该怎样排呢? 题目描述 有n(n<=100000)个团体操队员编号分别为1~n,参加运动会开幕式的团体操表演.其基本队形(分连续队形 ...

  4. [ES6] The Iterator Protocol

    The iterator protocol is used to define a standard way that an object produces a sequence of values. ...

  5. DataTable填充实体类返回泛型集合

    昨天找坤哥看到我的一段代码.例如以下: 略微解释下,这段代码时D层查询结束后,将datatable查询到的结果赋值给实体对象的属性,然后返回实体的过程.坤哥看了之后问我.假设实体有500多个属性.难道 ...

  6. [C/C++标准库]_[0基础]_[使用fstream合并文本文件]

    场景: 1. 就是合并文本文件,而且从第2个文件起不要合并第一行. 2. 多加了一个功能,就是支持2个以上的文件合并. 3. 问题: http://ask.csdn.net/questions/192 ...

  7. C++反射机制:可变参数模板实现C++反射(使用C++11的新特性--可变模版参数,只根据类的名字(字符串)创建类的实例。在Nebula高性能网络框架中大量应用)

    1. 概要   本文描述一个通过C++可变参数模板实现C++反射机制的方法.该方法非常实用,在Nebula高性能网络框架中大量应用,实现了非常强大的动态加载动态创建功能.Nebula框架在码云的仓库地 ...

  8. startActivity-两种start 方式

    对于activity的启动有两种方式 1.startActivity-这种方式比较简单,我们就不做讲解了 2.startActivityForResult-这种启动方式可以实现父子activity双向 ...

  9. 误操作 rpm -e --nodeps zlib

    误删缘由:目的是要升级ssh版本,结果好像是冥冥之中有股力量在作祟迫使我粘了一条致死的命令rpm -e --nodeps  zlib就执行了,奇怪的是执行之后根本就全然不知.最后在敲rpm命令时居然报 ...

  10. 41.Node.js使用cnpm

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html npm是Node.js中维护第三方库.模块的工具,但是国外的速度很悲剧,这里有一个中国的源cn ...