问题总结:

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. HttpComponents入门解析

    1 简介 超文本传输协议(http)是目前互联网上极其普遍的传输协议,它为构建功能丰富,绚丽多彩的网页提供了强大的支持.构建一个网站,通常无需直接操作http协议,目前流行的WEB框架已经透明的将这些 ...

  2. 使用LVS 实现负载均衡的原理。

    LVS 负载均衡 负载均衡集群是 Load Balance 集群.是一种将网络上的访问流量分布于各个节点,以降低服务器压力,更好的向客户端提供服务的一种方式.常用 的负载均衡. 开源软件有Nginx. ...

  3. 【Struts2】Struts2纯手工安装、配置以及Helloworld,以最新版struts 2.3.20 GA做样例

    很多网上的教程对Struts2的配置.安装弄得不明不白,非常多高手以为小白是什么都懂.很多细节上面的地方没有说明清楚,甚至还有在Maven上面解说的,要知道Struts2跟Maven没有半点的关系.全 ...

  4. LA 2531 The K-league 最大流

    #include <iostream> #include <cstdio> #include <fstream> #include <algorithm> ...

  5. ocdefirst安装更新数据库

    数据迁移(Migrations) 启用数据迁移在控制台中输入如下命令:Enable-Migrations 这时会在项目目录中增加一个Migrations文件夹,里面放置了两个文件:EF会通过C#代码的 ...

  6. vs2010 Visula C++ 把CString 转换为string 类型

    CString strSomeCstring ("This is a CString Object"); // Use ANSI variant CStringA to conve ...

  7. reboot---重启Linux系统

    reboot命令用来重新启动正在运行的Linux操作系统. 语法 reboot(选项) 选项 -d:重新开机时不把数据写入记录文件/var/tmp/wtmp.本参数具有“-n”参数效果: -f:强制重 ...

  8. python +uiautomator 安卓UI控件操作

    一.搭建环境 准备:win7.JDK.androidSDK(adt-bundle-windows-x86_64-20140702\sdk).Appium.安卓模拟器(真机也可以),可以到这个地址下载h ...

  9. [Anuglar & NgRx] StoreRouterConnectingModule

    Always treat Router as the source of truth When we use Ngrx, we can see that we will use a "Sto ...

  10. 数据结构基础(3)---C语言实现单链表

    #include<stdio.h> #include<malloc.h> #include<stdbool.h> /** **链表节点的定义 */ typedef ...