问题总结:

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. Swift编程语言初探

    继WWDC2014后,新的编程语言Swift浮出水面.它具有高速.现代.安全.可交互等特征,而且其语法简单,入门门槛低,有望替代语法复杂难懂的Objective-C语言.据其作者Chris Lattn ...

  2. GO语言为结构体排序

    package main import ( "fmt" "io/ioutil" "sort" "time" ) type ...

  3. ORA-00922: 选项缺失或无效

    1.错误描写叙述 SQL> create table info_stu from select t.stu_id,t.stu_name,t.stu_age from info t; create ...

  4. Android Developer:内存分析器

    Heap Viewer,Memory Monitor和Allocation Tracker是用来可视化你的app使用内存的补充工具. 使用Memory Monitor Tool来发现是否有不好的内存回 ...

  5. BRep Shapes Based on Tessellated Geometry

    BRep Shapes Based on Tessellated Geometry eryar@163.com Key Words. BRep Shape, Tessellated Geometry, ...

  6. Android圆形图片不求人,自定义View实现(BitmapShader使用)

    在很多APP当中,圆形的图片是必不可少的元素,美观大方.本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情. 一.先上效果图 二.实现思路 在定义View 的onMea ...

  7. dreamweaver 8的替换功能

    dreamweaver 8的替换功能 下面教你用dreamweaver 8的替换功能来删除这些冗余代码. 查找范围:文件夹(然后选取你需要替换的文件夹) 搜索:源代码查找:\btppabs=" ...

  8. Docker+Jenkins持续集成

    Docker+Jenkins持续集成 使用etcd+confd实现容器服务注册与发现   前面我们已经通过jenkins+docker搭建了基本的持续集成环境,实现了服务的自动构建和部署,但是,我们遇 ...

  9. js -- fileData 实现文件断点续传

    前端实现文件的断点续传 一.一些知识准备 断点续传,既然有断,那就应该有文件分割的过程,一段一段的传. 以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割,我们可以可以使用sl ...

  10. BZOJ 1355 KMP中next数组的应用

    思路: 我们知道 next[i]是失配的i下一步要去哪儿 next[n]就是失配的n要去哪儿 n-next[n]就是答案(即最短周期)啦 //By SiriusRen #include <cst ...