分类目录归档：css

css实例，css知识等，css资讯！

让IE6区块元素具备display:inline-block属性

发表于 2012/02/26 由 前端开发-武方博  330 views

1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6内联元素具备inline-block特性 由于inline-block会触发IE的layout，所以IE6中只要设置{display:inline-block;}即可。 让IE6区块元素具备inline-block属性，有两种方法 A、可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明中才有效，代码如下： div { width:400px; height:200px; display:inline-block; } div { display:inline; } B、直接设置为inline，再利用zoom来触发layout来实现类似效果： div { width:400px; height:200px; *display:inline; *zoom:1; } 3、其它浏览器 其它浏览器都支持这个属性，但Firefox从3.0才开始支持这个属性，对于之前的版本可以利用其私有属性{di......查看更多>>

发表在 css | 标签为 , | 留下评论

css清除浮动的几种方法整理

发表于 2012/02/24 由 前端开发-武方博  281 views

此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> </div> 未清除浮动前如图所示： 四种清除浮动方法如下： 1、使用空标签清除浮动。 我用了很久的一种方法，空标签可以是div标签，也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。 对于使用额外标签清......查看更多>>

发表在 css | 标签为 , | 留下评论

css word-wrap和word-break强制换行

发表于 2012/01/13 由 前端开发-武方博  895 views

强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。 强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地： word-wrap语法： word-wrap: normal(默认) | break-word 各个浏览器均能识别 参数： normal: 允许内容顶开指定的容器边界。 break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。 说明： word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。 范例： congratulation这个单词属于长串英文，word-w......查看更多>>

发表在 css | 标签为 , , , , | 留下评论

几个三列自适应左右定宽的css layout布局

发表于 2012/01/11 由 前端开发-武方博  504 views

1：三列自适应 左右定宽 中间自适应 <style type=”text/css”> *{ margin:0; padding:0;} body{ font:400 20px/1.5 Arial;} .wrap{ overflow:hidden;} .left,.right,.middle{ padding-bottom:999em; margin-bottom:-999em; color:#000;} .left{ float:left; background:#039; width:200px;} .right{ float:right; background:#ff0; width:200px;} .middle{background:#f00;} </style> <div> <div>left</div> <div>right</div> <div>middle<br /><br /><br /><br /><br /><br /><br /></div> </div> 2：三列自适应 左右定宽 中间先加载自适应 源自于淘宝框架  http://kissy.googlecode.com/svn/trunk/docs/index.html <style type=”text/css”> *{ margin:0; padding:0;} body{ font:400 20px/1.5 Arial; background:#000;} .wrap{width:9......查看更多>>

发表在 css | 标签为 , , | 一条评论

ie6实现min-height的新兼容写法

发表于 2011/11/08 由 前端开发-武方博  718 views

网上流传的兼容写法大部分都是这个 min-height:500px;height:auto!important;height:500px; 但是上面的这种写法在ie9里面会有问题的！   兼容ie6的最小高度写法只需要这样写就可以了！ min-height:500px;_height:500px; 查看更多>>

发表在 css | 标签为 , | 7 条评论

由黄钻等级图标处理引发的思考

发表于 2011/10/31 由 前端开发-武方博  548 views

最近在处理Qzone黄钻图标更新时，想起近期对业务图标进行优化所遇到的一些问题，把思绪收拾起来和大家一共探讨，欢迎多方声音。 在实际工作中，图标类的应用非常广泛，如同数组般的等级图标更显其特殊性。下面要共同探讨的两个方向，以什么方式实现及怎么更好在贴近项目实际更好地实现并供应用。 假设：业务的用户等级共有10个，加上大小2种视觉尺寸的图标，还有“过期未续费用户”的表现，共有38个图标需要入库供调用（如下图）。 在项目的CSS框架研发中，会有几个key作为考虑：请求数、代码量、兼容性、图片文件大小、是否可并为组件模块且方便逻辑性实现。 众多不同等级的图标在不同方式的广泛应用时，是否会产生过多的文件请求； 等级图标的代码在实现上是否会使用过多的代码，且页面上真实应用的只是少量代码，从而造成代码臃肿； (x)html+css输出的图标应用到页面中，是否和页面上其它元素兼容，否则将为达到兼容目标而增加一系列代码； 如果各图标合......查看更多>>

发表在 css | 标签为 , | 留下评论

ie6 overflow-y:auto BUG修复

发表于 2011/10/26 由 前端开发-武方博  651 views

ie6里面如果设置元素为横向滚动条隐藏，竖向滚动条显示，如果改原始内有元素设置position:relative;或者position:absolute;样式，那么ie6里面的竖向滚动条就会失效。 解决办法：设置该元素为position:relative;top:0;left:0;即可解决次BUG！ 查看更多>>

发表在 css, 前端开发bug修复 | 标签为 , | 留下评论

png24在ie6下透明终极测试

发表于 2011/06/12 由 前端开发-武方博  1,814 views

前一段时间项目中需要用到png透明，测试了好多都不可以 。 可能是项目中position用的太多了，本来可以修复png透明的时候 却出现了好多莫名其妙的BUG。 下面是两种最常用png修复方法，一种是用ie滤镜修复的！ 方法一：iepngfix.htc 演示地址：http://www.wufangbo.com/demo/css/09/01/index.html 下载地址：http://www.wufangbo.com/demo/css/09/01.rar 1：下载脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉烧包。 2：在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。 3：在css中将需要使用透明PNG的元素与.htc文件关联。 例如：*{behavior: url(iepngfix.htc) } 通过以上三步，IE6就能支持透明PNG图片了。 &nb......查看更多>>

发表在 css, 前端开发bug修复 | 标签为 , , | 4 条评论

图片鼠标经过显示边框hack一例

发表于 2011/06/12 由 前端开发-武方博  936 views

哈哈 在一个英文文章里面看见的 很有趣啊 老外比较有创意 先看下效果，看见效果的时候请各位大哥大姐们想想自己会怎么写这个的css   演示地址：http://www.wufangbo.com/demo/css/08/index.html 下载地址：http://www.wufangbo.com/demo/css/08/08.rar   哈哈 估计不会有人这样搞吧，反正我是没试过 看下CSS就会奇怪了吧 重点是图片hover的时候margin的负值！ css   .test{ width:800px; margin:0 auto; overflow:hidden;zoom:1;} .test li,.test a img,.test a{border:none;overflow:hidden;float:left;} .test a img{width:100px; height:100px;} .test a:hover {border: 3px solid #f00;} .test a:hover img {margin:-3px;}   html   <ul class="test"> <li><a href="#"><img src="01.jpg" /></a></li> <li><a href="#"><img src......查看更多>>

发表在 css | 标签为 , | 留下评论

谈CSS模块化【封装-继承-多态】

发表于 2011/05/09 由 前端开发-武方博  1,926 views

第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上，当时我还想，“哈，CSS也有模块化，我没听错吧？”事实上，我没听错，你也没看错，早就有CSS模块化这个概念了。之所以我把这个拿出来讨论，是因为一个算是比较大的项目出现了一些重构上的危机，因此引发了我们对页面重构中的CSS进行模块化的思考。 首先，什么是CSS模块化？在谈CSS模块化之前我们先看一下百度百科对模块化的解释： “模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。” 我对上面一段话的理解是，模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也 可以更换部分积木......查看更多>>

发表在 css, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , | 留下评论

纯div+css仿QQ空间投票效果

发表于 2011/05/04 由 前端开发-武方博  844 views

去年给大河报做96211的一个投票系统时候用到的代码，纯div+css仿QQ空间投票效果，请看下效果图 演示地址：http://www.wufangbo.com/demo/css/05/index.html 下载地址：http://www.wufangbo.com/demo/css/05/05.rar   html代码   <div class="pool_wrap"><div class="pool"> <div class="pool_tit"><h3>每个人都有喜欢闻的怪味，你都个人都有喜欢闻的怪味，你都个人都有喜欢闻的怪味，你都个人都有喜欢闻的怪味，你都喜欢哪些？</h3><span>(最多选9项)</span></div> <ul class="poll_view">     <li class="list_item_01"><span class="list_name">1.油漆味</span><div class="plan"><div class="plan_l" style="width:16%;"><div class="pl......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , | 留下评论

纯div+css投票票数百分比柱状效果实现

发表于 2011/05/04 由 前端开发-武方博  864 views

  css实现投票百分比统计效果，去年在一个医生评价的投票项目里面用过，先上下效果图吧！ 演示地址：http://www.wufangbo.com/demo/css/04/index.html 下载地址：http://www.wufangbo.com/demo/css/04/04.rar   html代码 <div id="graphbox">   <div class="little_box"> <div class="percent"> 25.0% (1/4)</div> <div class="graph"> <span class="color1" style="width:25.0%;">&nbsp;</span></div> <div class="itemname font1">非常满意   </div> </div>   <div class="little_box"> <div class="percent"> 25.0% (1/4)</div> <div class="graph"> <span class="color2" style="width:25.0%;&quo......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , | 留下评论

css selection改变文字反选的背景颜色

发表于 2011/05/04 由 前端开发-武方博  949 views

  最近在访问一个网站的时，我注意到，当其文字被选中时它有一个匹配他的网站的背景色，这个背景色不是是深蓝色。此刻，若是您的网站不利用任何蓝色为文字背景，看上去会不会有点不合适？   在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示： 反选后默认的样式 能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。 给出了如下的CSS代码： ::-moz-selection{ /*针对Firefox*/  background:#cc0000;  color:#fff;   }  ::selection {  background:#cc0000;  color:#fff;  }  code::-moz-selection { /*code是标签选择器，可以换成p或span等*/  background: #333333;&nb......查看更多>>

发表在 css | 标签为 , , , , , , , , , | 2 条评论

国外15个前端开发CSS框架介绍

发表于 2011/04/25 由 前端开发-武方博  1,127 views

    框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如： typography.css 基本排版规则 grid.css 基于网格的布局 layout.css 通常的布局 form.css for 表单样式 general.css 更多通用规则   下面一起来了解一下各种不同的CSS框架吧: 1.960 Grid System  960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。 2.WYMstyle CSS Framework  这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , | 留下评论

27款经典的前端开发CSS框架

发表于 2011/04/25 由 前端开发-武方博  1,102 views

  利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架，你可以选用。  1. 960gs  960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. YUI 2: Grids CSS  芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，清除布局浮动等技术非常值得学习和借鉴。  3. Blueprint  Blueprint 是一款成熟的 CSS 框架，它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , | 留下评论
第 1 页，共 2 页12