-
hover 在ie6以下版本的兼容问题查看全部
-
box-shadow:0 1px 0 #111,0 2px 0 #666多个阴影可以叠加，这样产生的会有分隔线 线性渐变：linear-gradient(颜色1,颜色2) 边框圆角：border-radius:边框半径; 盒子阴影：box-shadow:水平位移 垂直位移 羽化范围 羽化颜色 文本阴影：text-shadow 同上 同时设置多种颜色盒子阴影，多组值之间使用“,”分隔 清除浮动 xxx:before,xxx:after{content:"";display:table} xxx:after{clear:both;} 背景渐变：background-image:linear-gradient(#444,#111); transition要配合hover使用 transition:all .2s ease ease-out ease-in ease-in-out... opacity:0;margin:20px 0 0 0; opacity:1;margin:0; box-shadow:0px 0px 3px red; 盒子阴影 ： 水平阴影 竖直阴影 阴影半径 颜色 overflow清除浮动的原因 是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context) floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，所以才会用到clear来控制浮动 overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果。 如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素， 但它的位置不能被占了，那该怎么实现呢？接下来我们来看css的另外一个属性Visibility属性。 visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间。查看全部
-
<style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ line-height:40px; text-align:center; position:relative; text-align:center;float: left;} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute; display:none; } ul li:hover ul{ display:block; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">JavScript</a></li> <li><a href="#">JQuery</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body>查看全部
-
<style type="text/css"> *{ margin: 0px; padding: 0px; } #nav{ background-color: #eee;width: 600px;height: 40px;margin: 0 auto; } ul{ list-style: none; } ul li{ float: left; line-height: 40px; text-align: center; /*position: relative;*/ } a{ text-decoration: none;color: #000; display: block; padding: 0 10px; } a:hover{ color: #fff; background-color: #666; } ul li ul li{ float: none; background-color: #eee; margin-top: 2px; } ul li ul{ position: absolute; /*left: 0px; top: 40px;*/ display: none; } ul li ul li a:hover { background-color: #06F;} ul li:hover ul{ display:block; } </style> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课堂大厅</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body>查看全部
-
css菜单的下拉隐藏重点在二：第一为首先对下拉菜单的一个隐藏‘display:none;’。第二为鼠标经过时下拉菜单的出现“ul li：hover ul(display:block;)”查看全部
-
兼容性查看全部
-
getElementsByTagname();查看全部
-
js和Jquery方法实现：查看全部
-
动画实现查看全部
-
display:none隐藏 display:block显示查看全部
-
Javascript、jQuery方法实现下拉菜单显示和隐藏查看全部
-
位置：css背景颜色／宽度／高度/margin居中／ 内容ul/li ul{list-style:none;} ul li{float:left;width:50px;line-height垂直居中;text-align:center;水平居中}； *{margin:0; padding:0;} a{text-decoration:none; color: ;display:block行内元素变块状元素;padding:0 10px;} a: hover{color: : background-color: ;} 二级菜单： 具体li项目后加ul/li 耳机菜单取消浮动，加背景颜色，上边距 二级菜单ul li {position:relative ul li ul{position:absolute;left:0;top:40;display:none耳机菜单消失」 ul li: hover ul{display:block;}查看全部
-
abc查看全部
-
CSS实现下拉菜单： 状态选择器 和 层级选择器结合： ul li ul{position:absolute;left:0;top:0;display:none;} ul li:hover ul{display:block;}查看全部
-
float浮动属性，值left向左浮动,值为right向右浮动查看全部
举报
0/150
提交
取消