问题总结:

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. hdoj-1016-Prime Ring Problem【深搜】

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...

  2. C++语言笔记系列之十三——派生类构造函数的调用

    1.派生类构造函数的调用 (1)一个基类的全部数据成员均被派生类继承.创建一个派生类对象时.系统在为派生类对象分配单元时一定要为其基类数据成员分配子空间. (2)一个派生类对象在创建时不仅要调用派生类 ...

  3. 慢慢人生路,学点Jakarta基础-深入剖析Java的接口和抽象类

    在java面向对象编程的,抽象类和接口始终存在有疑问的地方,因为两者太多相似有太多不同,在刚开始学习的时候经常弄的不对,使用情景搞混,今天来总结之前学习Java中接口和抽象类的问题. 抽象类 了解:只 ...

  4. android学习笔记五。1、Service深入学习

    一.Service,服务是没有界面而在后台长期运行的程序,可以看做是后台的Activity. 1.在Android中按返回键退出一个应用并不会(内存充足时)直接销毁一个进程,所以其中的子线程也可以在后 ...

  5. logname---显示用户名称

    logname命令用来显示用户名称.

  6. IntelliJ IDEA基于maven构建的web项目找不到jar包

    基于maven构建的springMVC项目,下载好jar包import后,运行提示ClassNotFoundException: java.lang.ClassNotFoundException: o ...

  7. [TypeScript] Make Properties and Index Signatures Readonly in TypeScript

    TypeScript 2.0 introduced the readonly modifier which can be added to a property or index signature ...

  8. Android——解决port占用问题导致的模拟器无法识别

    遇到一个问题:昨天模拟器工作还正常,今天eclipse就识别不了了.后来发现是360手机助手占用了5555port造成的,我就纳闷了,平时这个也不是自己主动启动.今天就启动了.废话不多说,就几个步骤就 ...

  9. ios UITextView 提示文本

    定义两个UITextView,一个用于输入文本,一个用于显示提示信息,当输入文本为空时显示提示信息,否则不显示提示信息. //6.3.1文字内容提示 _contentTextViewTip = [[U ...

  10. code blocks主题颜色配置

    添加配置文件 注意:在添加这些自定义配置文件之前一定要先将之前的文件配置备份! 在添加时一定要确保Code::Blocks**没有**在运行!下载下面的文件,并将其添加到C:\Users\<你的 ...