随笔分类 - 前端技术收藏-CSS
摘要:转自:http://www.zhangxinxu.com/wordpress/?p=1937一、响应布局?貌似没听过哈技术的发展往往导致新事物的产生。关于web页面布局,我们应该听过固定布局(fixed layout)、流体布局(fluid layout),那响应布局(responsive layout)是哪个鸟蛋呢?在说响应布局之前,我们先类比下固定布局和流体布局。先随便找两个网站截个图,例如豆瓣网和google analytics:豆瓣网就是固定布局,无论如何change浏览器的宽度,页面主体区域的宽度是固定不变了,里面的内容布局也是打死不动的;Google的产品页面基本上都是流体布局(有
阅读全文
摘要:转自:http://www.qianduan.net/understand-the-css3-gradient.html为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高72
阅读全文
摘要:转自:http://sofish.de/1400http://www.cnblogs.com/chentao1006/archive/2010/11/20/1882718.html问题浏览器DEMO解决方法Hacking Rules:property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;1input[button | submit] 不能用 margin:0 auto; 居中IE8bug|fixed为input添加width2body{overflow:hidden;}没有去掉
阅读全文
摘要:转自:http://www.qianduan.net/css-shadow-xiangjie.htmlCSS阴影详解设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合:1234h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}h2#title1{background-pos
阅读全文
摘要:今天在做表格控件时,突然学习了这个属性:table-layout,很先进,很强悍!-------------------------------------------------------------------------------------------转自:http://www.w3school.com.cn/css/pr_tab_table-layout.asp定义和用法tableLayout 属性用来显示表格单元格、行、列的算法规则。固定表格布局:固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单
阅读全文
摘要:参看:http://blog.csdn.net/liu2835993/archive/2009/12/10/4977555.aspx经常在项目中遇到换行问题,属性word-break只有在ie6、ie7下可用,故忽略。注意: 此文只谈怎么让元素不换行,直接隐藏(在实际项目中一般不会出现,用户体验太差)------------------------------------------------------------------------------------1. 块状元素中(以div示例) 如果需要单行显示,不换行,直接设置overflow:hidden, white-space...
阅读全文
摘要:有时候,你会发现,在缩小窗口或者拖选内容,又或者拉动滚动条的时候,奇怪的情况发生了:恭喜你,你终于碰到了所谓的haslayout问题何为Haslayout: “Layout”是一个 IE/Win 的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等,这有点类似于一个窗体的概念。 微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 layout , 也就是 hasLayout。 hasLayout 其实既不是一个属...
阅读全文
摘要:在css的使用上,有时需要针对不同的浏览器做兼容,如下方法可以识别当前主流浏览器:备注: 以color为例IE6:_colorIE6和IE7:*colorIE7: *+html class 这个只能针对class样式,不能对某个属性IE8: color: #fff\0 其中#fff为举例区别IE和FF: color\0: #fff看看示例:----------------------------------------------css代码:.title{color:#00ffff; color\0:#00f; color:#0af\0; *color:#f00; _color:#ff0;..
阅读全文
摘要:涉及到图片和文本,需要分如下几个部分:1. 单行文本2. 多行文本3. 单张图片4. 文本和图片混排(这种情况少见,应该单独处理)经搜集,方法如下:1. 表格实现1. 简单设置height 和 line-height (仅单行文本可用)2. table-cell 和position的配合(单行文本、单张图片、多行文本可行)3. table-cell和writing-mode配合(单张图片可用)4. table-cell和多余标签inline-block配合(单行文本、单张图片可行)-------------------------------具体代码如下:<!DOCTYPE HTML P
阅读全文
摘要:平时在解决ie6下layout问题的时候,一般是显示的设置zoom: 1不过这次不管用,尝试修改position: relative; 这下解决了,不过定位属性的修改,希望不要有遗留问题。
阅读全文
摘要:最近再次重温hasLayout,有如下几点需要注意:1. hasLayout属性是IE专有属性,用于css的解析引擎2. IE下一些复杂的css设置解析起来会出现bug,很有可能是因为hasLayout没有被自动触发3. 通过设置zoom:1 或者 position:relative 可以触发hasLayout4. 在ie6+7下,设置display:inline-block 同样可以触发hasLayout(ie6+7并不支持inline-block,这种实现仅是一种hack技术).........................................................
阅读全文
摘要:参考:http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.htmlhttp://www.cnblogs.com/zhangyufeng523/archive/2011/05/09/2041224.html清除浮动方法有好几种,1. 用空div,设置css为clear:both2. 用空br,设置css为clear:both3. 用空br,用原生clear属性以上三种都需要添加额外元素,对dom操作容易产生其他问题(之前做项目确实碰到过空div进行clear带来的烦恼)再来看看先进的方法:/*.clearfix{zoom:1}*/
阅读全文
摘要:最近在学习一个图片的垂直居中,最后,结果是,图片确实是垂直居中了,不过水平却不居中了。先看看代码:<div class="center"><div><a><i></i><img src="img/center/1.jpg" alt=""/></a></div></div>//cssdiv.center{height:220px; width:210px; margin:20px auto;}div.center div{disp
阅读全文