随笔分类 - CSS
摘要：用手机上网时，有些网站会无法正常显示，因为这些网页是设计在电脑上看的，如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯，就无法设计出手机上方便阅读的网页。说的简单，但是要把既有网页砍掉重练、再移植到手机上是一项大工程，笔者归纳四个方面给网页开发人员参考。
阅读全文
摘要：随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或...
阅读全文
摘要：CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图
阅读全文
摘要：问题：当子元素中使用了float时，如果其父元素不指定高度，其高度将为0解决：清除（闭合）浮动元素，使其父div高度自适应方法一：额外标签+clear:both（W3C推荐方法，兼容性较好）在父div的最后插入一个无语义的额外标签，使其style为clear:both。如：或：方法二：使用after...
阅读全文
摘要：今天有时间，所以特意做了一个测试。复制代码代码如下:test-2呵呵，我标题没错吧。果然IE6,IE7的margin:10px; 失效了。解决办法复制代码代码如下:.test-1{border-color:#000;width:100%; height:auto !important;height:1%; zoom:1;}使用：width:100%;或者 height:auto !important;height:1%; 或者zoom:1; 都可以解决上面的问题。（3选1，不要全部写进去。）根据自己的具体情况来选择一种即可！问题根源 当然知道了解决办法还不够，我们必须知道什么情况会引发上面的.
阅读全文
摘要：首先， 找到DW 安装目录。Adobe Dreamweaver CS5.5\configuration\DocumentTypes中的，MMDocumentTypes.xml 这个文件，然后用记事本打开，查找CSS 把 CSS 后边加上，less然后到。C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver CS5.5\zh_CN\Configuration\DocumentTypes一样是这个文件，修改同样的地方。然后把C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver C
阅读全文
摘要：W3C标准中对CSS3的transition这是样描述的:CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...
阅读全文
摘要：原文：http://blog.wangbuying.cn/archives/194
a标签里 嵌套span区块化不起作用
解决办法：
span需要定义属性：display:block
阅读全文
摘要：语法： word-wrap : normal | break-word 参数： normal : 允许内容顶开指定的容器边界break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生 说明： 设置或检索当当前行超过指定容器的边界时是否断开转行。对应的脚本特性为wordWrap。 示例： div { word-wrap: break-word; }兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是以下是引用片段： word-wrap:break-word;overflow:hidden; 而不是以下是引用片段： word-wrap:b...
阅读全文
摘要：li设置了左浮动，li的父元素设置了宽度，但是li 的最后一组文字，因为宽度不够了，显示为了两行了加上white-space:nowrap;后，IE7/8 ，FF 下面，最后一组文字宽度不够就自动换行了，li { overflow-y:hidden; height:27px; line-height:27px; white-space:nowrap; float:left; }只需要加上 在li加上{white-space:nowrap;} 可能因为你没有限制高度的原因
阅读全文
摘要：我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8设计单独的定义。IE浏览器则因此被公认为Web程序员的毒药，虽然在微软官网上并没有提供相关的解决方案，但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的。本文总结了9个IE浏览器上最常见的Bug，以及它们的解决方案。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。普通的用户可能不会在意网站
阅读全文
摘要：大家都知道 ul 默认值中，IE 给了 ul 一个 margin 值，而 FF 给了一个 padding 值。如果我们给 ul 加上一个背景或者框架，它就会露出原形，也就是在 IE 中项目符号是在 ul 外面，所以 ul 的宽度是不把项目符号算在里面的（如下图1）；而 FF 是把项目符号算在 ul 里面的（下图2）。这样对 CSS 解释的差异就导致了在不同浏览器中会产生不同的效果。在实际应用中，我们会先把样式重置-css reset（如上图3）。把 margin:0;padding:0; 后会发现项目符号不见了。添加 list-style-position:inside; 后项目符号又回来了（
阅读全文
摘要：原文：http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/为什么会这样？先看下CSS2.1规范中对overflow的一点解释：This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s con
阅读全文
摘要：原文: clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。 这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行
阅读全文
只有注册用户登录后才能阅读该文。
摘要：一、absolute正业之元素隐藏元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的，如果您只是使用display:none与display:block/inline来实现DOM元素的显隐控制，那你就out了。就元素的显示与隐藏实现，使用display在有些时候算是比较糟糕的方法了。控制元素显隐的方法很多，但是本文不是讲元素显隐控制的，所以，只讲与absolute相关的一些方法。absolute属性相关的隐藏方法，我知道的有三种，分别如下：.hidden{ position:absolute; top:-9999em;}.hidden{ position:absolut...
阅读全文
摘要：首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.text-shadow是什么?text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等
阅读全文
摘要：语法：box-shadow：<length> <length> <length> <length> || <color>取值：<length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色说明：设置块阴影box-shadow这个属性应用的非常普遍，可以使你的元素立刻变得漂亮起来，只是记得不要把值设得太离谱。box-shadow的四个参数：x-offset x轴偏
阅读全文
