CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分
问题总结:
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样式部分的更多相关文章
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- angularjs鼠标移入移出实现显示隐藏
<tr ng-repeat="item in items track by $index"> <td data-title="操作" alig ...
- setTimeout应用例子-移入移出div显示和隐藏
效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></ ...
- 鼠标移入 移出div div会消失的处理
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- div展现与收起效果(鼠标移入移出)
效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
随机推荐
- Spring MVC源码——Servlet WebApplicationContext
上一篇笔记(Spring MVC源码——Root WebApplicationContext)中记录了下 Root WebApplicationContext 的初始化代码.这一篇来看 Servlet ...
- sendfile复习
之前有一篇文章: http://www.cnblogs.com/charlesblc/p/6341605.html 今天又看到其他的一篇: http://www.cnblogs.com/fengyv/ ...
- 【剑指Offer学习】【面试题27:二叉搜索树与双向链表】
题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建不论什么新的结点.仅仅能调整树中结点指针的指向. 比方输入图4.12 中左边的二叉搜索树,则输出转换之后的排序现向链表. ...
- CentOS 开启 IPV6
编辑网卡地址:#vi /etc/sysconfig/network-scripts/ifcfg-eth0IPV6INIT=yesIPV6FORWARDING=yesIPV6ADDR=2607:9000 ...
- Web跨域问题基础
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只 ...
- ubuntu下eclipse java ee首次打开提示找不到jdk的问题
最近想搭建一个本地服务器,方便写一些网络请求相关的demo,遂下载了eclipse ee版 ( IDEA证书好贵,暂时不想买-=-),下载---解压 一切正常,但是当在terminal下打开ecli ...
- 【DRF视图】
目录 开始使用内置视图 请结合[DRF序列化]此文献中的数据文件及序列化文件来阅读如下代码. DRF视图为我们提供了非常简便的方法--内置了增删改查等一系列的操作. 我们只需在url中指定对应的方法, ...
- STM32上使用JSON
一.STM32工程中添加JSON 最近在一网2串项目,串口和网口之间可能需要定义一下简单的通信协议,而通信协议上则需要去定义一下通信的数据格式,上次听剑锋说要用Json来定义,目前查了下资料具体如何去 ...
- Repractise基础篇:Web应用开发七日谈
Repractise基础篇:Web应用开发七日谈 本来想的仅仅是画一个例如以下的七日图来说说Web开发的.随后又想了想这似乎是一个非常棒的Web开发相关的知识介绍.应用开发是一个非常有意思的循环,多数 ...
- java创建节点和单向链表
package datastructure; public class Node { private Object data; private Node next; public Node() { t ...