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 ...
随机推荐
- 【Codeforces Round #424 (Div. 2) A】Unimodal Array
[Link]:http://codeforces.com/contest/831/problem/A [Description] 让你判断一个数列是不是这样一个数列: 一开始是严格上升 然后开始全都是 ...
- 最小生成树-并查集-Kruskal-zoj-2048-special judge
Highways description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a ...
- elasticsearch index 之 engine
elasticsearch对于索引中的数据操作如读写get等接口都封装在engine中,同时engine还封装了索引的读写控制,如流量.错误处理等.engine是离lucene最近的一部分. engi ...
- 关于router-link的传参以及参数的传递
1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}& ...
- HTML5入门:HTML5的文档声明和基本代码
HTML5的文档声明: HTML5的文档声明,不同于HTML4.0和XHTML,它精简了许多代码,只保留<!DOCTYPE html>开头,必须位于HTML5文档的第一行,它可以用来告诉浏 ...
- CentOS下编译安装Apache
与Apache 2.2.x相比,Apache 2.4.x提供了很多性能方面的提升,包括支持更大流量.更好地支持云计算.利用更少的内存处理更多的并发等.除此之外,还包括性能提升.内存利用.异步 I/O的 ...
- Windows共享上网的详细设置
作者:朱金灿 来源:http://blog.csdn.net/clever101 在Windows环境下在A和B在同一个局域网上,A机子可以上网,B机子可以通过A机子可以通过设置的网络共享来上网.其中 ...
- Kinect 开发 —— 深度信息(二)
转自(并致谢):http://www.cnblogs.com/yangecnu/archive/2012/04/05/KinectSDK_Depth_Image_Processing_Part2.ht ...
- HDU 1716 排列2
排列2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- uname 命令
uname -p 显示系统的芯片类型.如,PowerPC uname -r 显示操作系统的版本号 uname -s 显示系统名称.例如,AIX uname -n 显示节点名称 uname -a 显示系 ...