标签归档：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 | 标签为 , | 留下评论

【顶】Web开发入门不得不看

发表于 2012/01/15 由 前端开发-武方博  519 views

引 如今，各种互联网的Web应用程序层出不穷，那么如何快速入门，成长为一个优秀的Web开发工作者呢？ 这个问题不容易回答，几乎所有的培训机构都不能清晰地解答。 所以对于Web开发刚刚入门的菜鸟们，我觉得只有通过去做，去实验，学会Web开发，可能是学着学着，实验着实验着就会了。 没有人告诉你如何去做。我学习的时候，我的导师只是给了我一堆视频，一堆文档。我们从明确一个目标开始：“哦，这个阶段，我要独立完成一个简单的Web应用程序，例如新闻发布系统”。 或许学会如何开发Web应用程序只是在完成这个Web应用程序过程中产生的副产品而已。你可以管它叫项目驱动，也可以认为这只是学习任何语言的一个非常有效的方法。       一、分析与设计 无论做一个传统的桌面应用程序，还是做一个Web应用程序，前期的分析与设计是不可避免的。 分析：需求分析，你必须了解你要做的是什么，你的客户到底想要的是什么，在做新闻发布系统的时候，我就......查看更多>>

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

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

发表于 2011/05/09 由 前端开发-武方博  1,927 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 条评论

jQuery tab选项卡插件(可多次使用)

发表于 2011/04/29 由 前端开发-武方博  3,417 views

这个选项卡插件估计是最简单的了，我使用过好多次了，不过用于对jquery理解还不是很深刻，不知道性能上有没有问题，总之代码很简介，可用性也比较强，支持一个页面多次调用，html标签可以随便的更改，只需要把class加上就行了！是不是很简单啊，哈哈！这里还有一个纯js封装的tab选项卡     演示地址：http://www.wufangbo.com/demo/jquery/10/index.html 下载地址：http://www.wufangbo.com/demo/jquery/10/10.rar   html代码 <div class="tab"> <ul class="tab-hd"><li>选项4</li><li>选项5</li><li>选项6</li></ul> <ul class="tab-bd"><li>内容4</li><li>内容5</li><li>内容6</li></ul> </div>   <div class="tab"> <ul class="tab-hd"><li>选......查看更多>>

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

jQuery仿淘宝店铺浮动层上下滚动固定效果插件

发表于 2011/04/28 由 前端开发-武方博  3,251 views

博客里面已经有过一个类似的效果了jQuery实现页面滚动时层智能浮动定位 但是今天看见css88愚人码头的博主也分享了一个类似的效果【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框 其实不光是新浪微博里面有这个效果，包括淘宝店铺里面也有这个效果，淘宝店铺搜索前端开发实例  注意那个排序的工具条哦 就是当用户滚动浏览器的滚动条的时候，把某一个固定的浮动层移动到浏览器的顶部，然后实现修改position属性，position;fixed效果，哈哈 但是看到css88里面也这次支持了IE6啦，不过测试了一下 发现ie6里面还是有瑕疵的，滚动的时候ie6会发生抖动。所以想着给修复下，折腾了好久，累死我了 竟然没有搞定 555！测试了下淘宝的店铺里面在ie6里面也是抖动的，看来我是真的没有办法了！悲催啊。   演示地址：http://www.wufangbo.com/demo/jquery/09/index.html 下载地址：http://www.wufangbo.com/demo/jquery/09/09.rar 下面的这段代码......查看更多>>

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

css3 box-shadow投影发光效果

发表于 2011/04/26 由 前端开发-武方博  2,314 views

  CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。 1. box-shadow属性的浏览器兼容性 先来看一个这个属性的浏览器兼容性: Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。 firefox通过私有属性-moz-box-shadow支持。 Safari和Chrome通过私有属性-webkit-box-shadow支持。 所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。 2. box-shadow属性的语法 box-shadow有六个可设值: img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。 阴影大小、扩展、颜色和Photoshop里面的都同理。 3. 实例解析 让我们通过几个实例来看一个b......查看更多>>

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

css3 box-shadow发光效果

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

  如果用过twitter，你可能已经留意到当输入框获得焦点后，它的边框会有蓝色发光的效果，并且这里运用了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。 CSS代码如下： input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; outline:none; } 这里通过运用transition属性来展现input框的变化。 同时，这里需要用outline属性来使safari和chrome的默认高亮无效。 这里在使用box-shadow属性时，为了使其不像是阴影效果而达到发光的效果，因而采用了明亮的蓝色。 同时也可以用RGBA，这样就可以控制颜色的透明度了。 代码如下： input:focus { border:#35a5e5 1px solid; box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(8......查看更多>>

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

国外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, 前端开发 | 标签为 , , , , , , , , , , , , , , , | 留下评论

使用CSS框架的优点和缺点

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

CSS框架是一个软件，它为你的HTML开发提供了许多选项以供使用，可能使得你开发网站或web程序更快速更简单。CSS框架通过包括预定义代码库来达到这个目的。一个例子是基于网格的框架，它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。 但是使用CSS框架好不好呢？最终来说有时候有的东西节约你的时间的代价是引发了更多地问题，导致节约的时间没有意义了。好吧，就像我们生活中的任何东西一样，使用CSS框架既有优点也有缺点。   现在有很多CSS框架，可以做好不同的事情，所以你可以找到特定的一款以帮助你更快地完成你的web开发目标。可以参考以下资源： 15 lightweight and minimal CSS frameworks 20 new frameworks for web and mobile app developers 但是你应该在你的web开发中使用这些CSS框架吗？以下是使用CSS框架的优点和缺点： 使用CSS框架的优点 1、加速你的开发 CSS框架帮你做好了基础工作因此你可以更快地......查看更多>>

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

jQuery实现页面滚动时层智能浮动定位

发表于 2011/04/22 由 前端开发-武方博  3,695 views

一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动，如下： 随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了，如下图所示： 类似的效果在新浪微博上也有： 当页面滚动，新动态提示开始要淡出浏览器窗口的时候，其浮动于浏览器窗口的最上沿显示，如下图所示： 此效果实现原理其实很简单，本文就将展示其实现。 二、实现原理 默认状态就是默认状态，什么事情也不用做，定位是absolute也好，static也好，都ok。关键是当浏览器滚动的时候，对象（要浮动的层）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属......查看更多>>

发表在 jquery, 前端开发, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论
第 1 页，共 2 页12