首页> 关键字 >css
  • 从实际使用分析CSS引用方式的异同闲来无事,翻看各个门户网站的代码。发现在引用CSS的方式上存在很大的区别,主要表现为使用 import、link以及在当前页面插入。就我个人而言,一般只用到link方式,所以看到超级大站用其他两种方式不免想要探个究竟,多么可贵的学习精神……淘宝网用的是import方式,代码如下:<..【阅读全文】
  • 收集的CSS浏览器兼容问题大全(转载)CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。 缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加..【阅读全文】
  • CSS中强大的EM,css的em属性学习全攻略使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分..【阅读全文】
  • 怎样用css实现图片垂直居中(兼容IE6/IE7)优劣对比:1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome优点:不添加任何多余标签,兼容主流浏览器缺点:需要计算处理font-size2.利用line-height实现居中兼容IE7+/FF/Chrome优点:不需要任何hack,兼容IE7+主流浏览器缺点:此方法不兼容IE6,当然也可以用方法1..【阅读全文】
  • css基础:一张图片做导航<html xmlns="/upload/201303/2013326112236t91.png) no-repeat 0 0;}#mini_nav li {width:65px; height:38px; float:left;}#mini_nav li a {display:block; width:65px; height:38px; padding-top:40px; overflow:hidden;}#mini_nav li a:hover {background:url(nav.png)..【阅读全文】
  • css】浅谈inline-block 属性如今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline; *zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来 inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-b..【阅读全文】
  • HTML+CSS布局小节好久没有更新了,学习也一直停顿着。今天看到同学的一句博客“你的高度决定你的视线,长得不高不是你的错,但是站的不高就是你的错了。”废话少说,开始学习:这几天一直在研究HTML+CSS布局。并没有把所有的布局都弄明白,只学了一点常用的css控制属性;先上图看看吧。..【阅读全文】
  • CSS读书笔记(一)这是开通blog后的第一篇随笔,争取养成勤于记录的好习惯,进入正文,精通CSS 高级Web标准解决方案(第二版)自认为是一本非常不错的css教程,借同事的已经读过几遍,每一遍都会有新的收获。1.子选择器、相邻同胞选择器 IE7以及更高版本的IE,FF,Chrome等浏览器都支持这两个选择器..【阅读全文】
  • CSS读书笔记(二)浏览器常见bug以及修复。1.双外边距浮动bug 最常见的bug是IE 6和更低版本中的双边距浮动bug,这个bug使任何浮动元素上的外边距加倍。 修复:display:inline2. 3像素文本偏移bug IE5和IE6上的bug,当文本与一个浮动元素相邻时,这个bug就会表现出来。例如将一个元素向左浮动,..【阅读全文】
  • CSS:不规则图片 瀑布流原理在项目中遇到了不规则图片墙的布局问题 分析原理如下:1.img display: block; 解决3px img标签bug2.img 设置height 和width 不然会出现 下面的图片如果先加载上面的图片再加载时 会推动图片向下移动3.父div position: relative; 让图片价格可以相对绝对定位4.子span position: abs..【阅读全文】
  • 纯CSS制作带三角(border篇).arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; _border-left: 5px solid white; _border-right: 5px solid white; border-bottom: 5px solid black; overflow:hidden;}.arrow-down { width: 0; height: 0; border-..【阅读全文】
  • CSS滤镜兼容浏览器的实例 CSS代码.test{ background:#000; color:white; width:200px; position:absolute; left:10px; top:10px; filter: Alpha(opacity=10); -moz-opacity:.1; opacity:0.1; } 这里关键的是CSS代码filter: Alpha(opacity=10); -moz-opacity:.1; ..【阅读全文】
  • css实现不规则图形闲着没事,逛了下googlepaly网站 看着他们的tabs选项卡样式竟然用的不是图片,而是css实现的斜边,没事简单说了一下自己理解的其中的原理1,理解border的原理查看样式style部分border-bottom:24px solid #F00; border-right:24px solid transparent; border-top:24px solid #F00; ..【阅读全文】
  • CSS属性值记号法CSS属性值记号法是一种描述如何定义样式规则的方法,即描述CSS语法的一种方法。例如,定义某元素边框的样式规则可用如下记号法(语法)描述。border: [ <border-width> || <border-style> || <border-color> ] | inherit在CSS规范中,对属性值记号法进行了详细..【阅读全文】
  • 获得css中的计算样式要获得css元素中的计算样式(即经过层叠之后,最终的样式),支持W3C的浏览器可以使用document.defaultView.getComputedSyle方法。该方法接受两个参数,第一个参数为要获得样式的元素,第二个参数为一个伪元素字符串(例如:":after",如果没有,就置为null)。该方法返回一个S..【阅读全文】
  • IE大叔的杀马特审美之—CSS盒子模型干前端,跑不了和IE大叔打交道.....有句话叫存在即合理,IE大叔在前端界是灰常的NB啊,既然咱改变不了世界,就只能改变自己。先上定义:为了给浏览器上各个元素排版定位,浏览器会根据渲染模式为元素生产4个矩形框,分别从外到内为margin、border、 padding、content,它们..【阅读全文】
  • CSS教程:css中的定位包含块包含块是用来定位的参照物,建立参照物的规则如下:1 如果一个元素进行了绝对定位,浏览器窗口本身而它又不在任何一个设定了relative或者fixed或者absolute定位的标签里面,那么这个元素的包含块就是浏览器窗口本身。2 如果一个元素进行了绝对定位,而它在另一个设定了relati..【阅读全文】
  • CSS技巧:css的层叠顺序<html> <head> <title>Z-Index</title> <style type = "text/css"> .one { background: green; position: absolute; padding: 10px; width: 500px; height: 300px; border: 2px solid black; z-index: 7; /*z-index设置为7*/ top: 40px; ..【阅读全文】
  • css盒模型中子元素垂直方向上总高度与父元素height的关系<html> <head> <title>MarginBottom</title> </head> <body> <div style = "background: gray; width: 100px;height: 100px;border: 2px solid green;"> <div style = "background: red;margin:20px 0 200px;"&..【阅读全文】
  • CSS教程:css中的white-space属性<html> <head> <title>WhiteSpace</title> <style type = "text/css"> span { white-space: normal; background: silver; } </style> </head> <body> <span> Some text。 Some text。 Some text。 </span>..【阅读全文】
共 1205 条记录┊当前页次:1/61┊20条/页
首页上一页12345下一页尾页