background | 易学教程

css hack

阅读更多关于 css hack

简介这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。如何写CSS Hack 比如要分辨IE6和firefox两种浏览器，可以这样写： <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> 我在IE6中看到是红色的，在firefox中看到是绿色的。解释一下：上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别

CSS3 skew倾斜、rotate旋转动画

阅读更多关于 CSS3 skew倾斜、rotate旋转动画

css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂；若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件；有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分 id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"） HTML代码： <div id="warp"> <div id="box">WEB</div> </div> CSS代码（设置容器及动画元素默认样式）： #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto; } #box { height:

经典DIV+CSS案例--两列高度自适应

阅读更多关于经典DIV+CSS案例--两列高度自适应

相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑: 以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修改: Code <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > 两列高度自适应 </ title > < style type ="text/css" > <!-- * { margin : 0 ; padding : 0 ; } #top { background : #dcdcdc ;

CSS3学习基本记录

阅读更多关于 CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.png 30出的地方重复合理的重复 stretch:默认值。拉伸图像来填充区域 repeat:平铺（repeated）图像来填充区域 round:类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 border-image-source:于指定要用于绘制边框的图像的位置 border-image-slice:图像边界向内偏移 border-image-width:图像边界的宽度 border-image-outset:用于指定在边框外部绘制 border-image-area 的量 border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮 CSS3 背景 background-size:设置背景图标大小

css滚动条

阅读更多关于 css滚动条

某厂面试归来，发现自己落伍了！>>> .test-5::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test-5::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px ; background-color : skyblue ; background-image : -webkit-linear-gradient ( 45deg , rgba ( 255 , 255 , 255 , 0.2 ) 25% , transparent 25% , transparent 50% , rgba ( 255 , 255 , 255 , 0.2 ) 50% , rgba ( 255 , 255 , 255 , 0.2 ) 75% , transparent 75% , transparent ) ; } .test-5::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba ( 0 , 0 , 0 , 0.2 ) ; background : #ededed ; border-radius : 10px ; } 来源：

css背景图撑开盒子高度

阅读更多关于 css背景图撑开盒子高度

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图撑开盒子高度</title> <style> .bg-box { background-image: url(../demo.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin:0 auto; } .bg-box::after { content: ""; display: block; /*这里的padding = height / width*/ padding:20%; } </style> </head> <body> <div class="bg-box"></div> </body> </html> /*--> */ /*--> */ 来源： https://www.cnblogs.com/xiadongqing/p/8686970.html

js获取非行间样式

阅读更多关于 js获取非行间样式

相关知识： window.getComputedStyle : 　　　　 Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有css属性的值，并解析这些值可能包含的任何基本计算。　　语法：let style = window.getComputedStyle(element, [pseudoElt]); 　　　　pseudoElt ：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。　　　　返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。　　与伪元素一起使用：　　　　　　　　let h3 = document.querySelector('h3'), 　　　　　　　　result = getComputedStyle(h3, '::after').content; 　　getComputedStyle(odiv,false)这里的两个参数，第一个参数代表要获取那个元素的样式，第二个是解决FF较低版本的写法，而对于高版本的可以不用写。注：在firefox3.6上访问子框架内的样式 (iframe)必须使用 document.defaultView.getComputedStyle ,其他可使用window.getComputedStyle Element

css 常见布局实现

阅读更多关于 css 常见布局实现

水平居中垂直居中 1.图片水平垂直居中图片背景大小确定　　　margin-left值等于图片所在容器的宽度(imbBoxWidth)减去图片本身宽度(imgWidth)的值的一半　　　　　margin-top值和margin-left很类似，只是把相对应的宽度值换成高度值图片大小不固定　　　1. 对于容器 display:table-cell vertical-align:middle text-align:center　ie6.7不支持　　　 display:table-cell 属性指让标签元素以表格单元格的形式呈现，类似于 td 标签　　　2. 添加一个与容器高度相同的标签span，兼容ie6,7 　　　　在图片的容器中创建一个空元素（比如说span），设置span的“display:inline-block;height:100%;vertical-align:middle”。　　　 IE6-7中空的line-block元素宽度为“0”，在IE6-7下是没有效果的，给span加上“width:1px”，会给水平居中造成1px的误差。　　圣杯布局和双飞翼布局　　都是三栏布局，两边盒子宽度固定，中间宽度自适应。中间栏放到文档流前面，保证先行渲染。　　都是三栏全部float:left浮动。　　区别对于中间栏div的内容不被遮挡上

Jquery操作DOM

阅读更多关于 Jquery操作DOM

一：Jquery操作DOM节点 1，查找节点 2，创建节点 append() 3,删除节点 remove() 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //查找DOM节点 10 /* var li2=$("ul li:eq(1)"); 11 var li2_txt=li2.text(); 12 alert(li2_txt); */ 13 //添加DOM节点 14 /* var li1=$("<li title='我是马化腾'>马化腾</li>"); 15 var li2=$("<li title='我是李彦宏'>李彦宏</li>") 16 $("ul").append(li1);//在最后面添加 17 var li22=$("ul li:eq(1)");//在第二项之后添加 18 li2.insertAfter(li22); */ 19 //删除DOM节点 20 //

CSS属性

阅读更多关于 CSS属性

CSS 属性 CSS 属性组：动画背景边框和轮廓盒（框）颜色内容分页媒体定位可伸缩框字体生成内容网格超链接行框列表外边距 Marquee 多列内边距分页媒体定位打印 Ruby 语音表格文本 2D/3D 转换过渡用户界面 CSS3 动画属性（Animation）属性描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function 规定动画的速度曲线。 3 animation-delay 规定动画何时开始。 3 animation-iteration-count 规定动画被播放的次数。 3 animation-direction 规定动画是否在下一周期逆向地播放。 3 animation-play-state 规定动画是否正在运行或暂停。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 CSS 背景属性（Background）属性描述 CSS background 在一个声明中设置所有的背景属性。 1

订阅 background