wangxiaohui6687的专栏

原创 9条书写css规则

做前端开发经常会css打交道.一个良好的习惯会带来很好的效果,也会预防一些可能的 未知的错误下面带来9条书写css规则：一、IE边框若显若无，须注意，定是高度设置已忘记； 二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中； 三、三像素文本慢移不必慌，高度设置帮你忙； 四、兼容各个浏览须注意，默认设置行高可能是隐患； 五、独立清除浮动

原创 利用高斯模糊可以将背景大变样

1、选择一张图片2、利用滤镜——模糊——高斯模糊3、执行【图层—新建调整层—色彩平衡】命令，在弹出的【新建图层】对话框中点击【确定】按钮，弹出【色彩平衡】对话框。4、最后效果如下

原创 用画笔画出光感效果

1、画出一个选区2、选择画笔工具，设置如下3、然后用画笔沿着选区的边缘画出效果

原创 ps质感按钮制作（二）

（制作小窍门：按钮的背景色和整个页面的背景色一样，然后利用投影和内投影的特效就可以使按钮产生突出来）（http://blog.163.com/isjimi@126/blog/static/169194042201123014114274/）一个国外的教程，一直英文不好，就看着图自己做了，步骤也自己改动了，效果还可以，喜欢的看看吧~1.新建图层，背景色#141d28.

原创 ps制作质感按钮制作

1.制作按钮本体。先画一个圆角矩形，并加上渐变滤镜 这里颜色的选择是重点，选择好颜色后就已经有一种柔和的光照效果了2.制作投影。首先画一个扁扁的椭圆形，填充偏黑的蓝色（因为按钮是蓝色的） 之后对椭圆进行高斯模糊 置于按钮本体的下层，调整大小和位置，这样投影就做好了 3.制作高光。先画一条1像素的白色直线，位置如图 然后给白线添加一层蒙版，点击图中

原创 input type=“file” 样式的方法

为什么要美化file控件？试想一下，别的孩子都穿戴整齐漂亮，其中两个孩子怎么都不鸟你，太不和谐了。    原始的file控件是这样的：    别以为这个是由一个text和一个button组合成的，它是一个控件，html代码为：复制代码代码如下: 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样：

转载 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1：li边距“无故”增加任何事情都是有原因的，li边距也不例外。先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许

原创 select框的高度设置

select框的高度不能直接设width等于多少，而是要用字体的大小来撑框的高度。

原创 IE6中line-height属性失效的解决办法

在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性失效。只有全文字时，line-height属性才有效。ie7已经解决了这个bug,之前版本的ie会将有图片行的行高减小为原来的一半。可以通过设置图片样式表.box img { vertical-align: middle; margin:

转载 IE6下png背景不透明问题

IE6以下浏览器这里不考虑。前言：IE6不支持png背景透明或半透明。其解决方法有IE滤镜，纯粹的JavaScript，以及jQuery等，正所谓事非经过不知难，让png图片在IE6下背景透明显示只是第一步，如果对这些png图片做进一步的操作，往往会出现各类莫名的问题。而本篇文章讲详尽阐述png背景透明会出现哪些问题，一些自己的经验之谈和一些相关的拓展。内容较多，有一定的深度和广度，希望对大家

原创 IE css滤镜与IE6下png背景透明（定位不起作用）

IE css 滤镜使background-image背景透明background背景图片为含有透明背景或半透明的png图片时的透明处理。* html为针对IE6的一个不错的hack，应用css png透明滤镜是的png背景是透明了，但同时也带来了另外的问题，那就是无法通过background-position进行定位失效，因为background:none，也就是说其实图片显示已经不是

原创 制作蓝色飘逸光影壁纸的PS教程

效果图画面构成并不复杂。不过制作起来就比较费时。因为光束都是由一些非常细小的曲线构成，每一条曲线都需要用钢笔工具勾出来，还需要把握好曲线的弧度，要做到自然优美。制作的时候需要保持耐心。最终效果  一、新建一个壁纸大小的画布如：1024 * 768像素。选择渐变工具颜色设置如图1，由上至下拉出图2所示的线性渐变。   二、新建一个图层，用钢笔工具勾出图3所示的选区填充颜色

原创 PS制作纹理背景

1、先找出纹理图案（最好是纹理比较密集的）2、ctrl+shift+u 去色3、再调整图层模式为“叠加”

原创 Photoshop制作精致的透明玻璃按钮

最终效果新建一个400 * 250像素的文档，背景填充蓝色：#106D98。1、新建一个图层，命名为“玻璃边框”，选择矩形工具，半径设置为25，然后拉出下图所示的选区并填充白色。填色后不要取消选区。

原创 颜色与英文单词对照

颜色与英文单词对照redgreenbluemagentayellowchocolateblackaquamarinelimefuchsiabrassazurebrownbronzedeeppinkalicebluegraycoppercoralfeldspar

原创 blend----dategride属性

原创 div+css 关于文字居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-a

原创 label和input对齐的方法

表单元素与提示文字无法对齐的问题(input,checkbox文字对齐）文章的最终方法是：1. 将文字第一字体设置为Tahoma；2. 为input元素设置vertical-align:middle;3. 为label元素设置vertical-align:middle;        这样表单元素和提示文字就达到完美的对齐了。但是等等这里说的对齐只是相对的对齐，原因是中文字体是

原创 好看的登录界面

http://www.ku51.com/p-745-1

原创 select 样式修改

如何让select的样式也漂亮起来.select * {  margin: 0;  padding: 0;}.select {  border:1px solid #cccccc;  float: left;  display: inline;background:red;  }.select div {  border:1px solid

原创 css属性之--moz-border-radius 圆角属性-不过很遗憾不兼容ie

大家也知道，CSS3将可能在明年就正式的加入到了我们的设计中，而这篇教程也是来自国外。这里只是稍微的翻译下，希望大家能够从中领悟。圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。 css3 圆角在CSS中，我们应该给他定义一个宽度和高度，当然还有背景。#box {        width:590px;        height:100px;

原创 border-radius属性哪个浏览器支持

http://bbs.blueidea.com/thread-2928397-1-1.html   （测试哪个浏览器兼容boder-radius）

原创 简洁大气网站欣赏

http://www.websbook.com/website/cleanlily/index.html

原创 Silverlight——利用Image.OpacityMask做透明遮罩

文本画刷ImageBrush  用文本画刷，可以填充一些图形，文字的背景，例如下面代码，利用ImageBrush填充字体的背景。                                                                         点击“new”会出现一串代码：只需要把路径改一下就好了！

原创 Silverlight强大的DataGrid组件_基础知识

http://silverlightchina.net/html/tips/2010/0102/530.html说明：DataGrid组件是Silverlight数据组件中最为常用并且是功能最为强大的数据组件。因此，对开发者而言，深入了解其特性是十分有必要的。本文先介绍该组件的基本特性，接着通过几个简单实例来说明该组件的基本数据操作过程。 组件所在命名空间：System

原创 350多个flash导航菜单在线下载

http://www.flashline.cn/sucai/20110908/caidan.html

原创 玻璃质感小图标

准备工具：photoshop 5.0+(就是5.0以上版本的意思)  备注：和以往我写的教程不同，这个技法在能够使用PHOTOSHOP 5.0+的机器上都可以运用，不必需要你的机器受到你的虐待。  教程使用软件为PHOTOSHOP 7.0，该方法同样也可以应用在FIREWORKS或其他的设计软件中（但必须拥有图层属性设置的软件），其实掌握方法后在FLASH中也可以实现这种小图标的制作，所谓

原创 国外30款设计精美的网站登录页面模板

登录页面可以说是与用户关系最为密切的页面之一，所以此页面的用户体验需格外重视，一个美观易用的登录页面不仅能给用户留下深刻的印象，也有可能吸引临时访客注册，这里就有30款设计精美的网站登录页面模板，它们均可免费下载使用，希望能帮助设计者在使网站更具吸引力的同时，节省大量宝贵的时间。Login panels, subscribe formsClean admin login form

原创 visibility:hidden和display:none的区别和使用

如果想让某一段代码在前台不显示，最简单的方法是用css的display:none即可，这样下边的内容就自动上移或右侧的左移来填补这个空隙。但特殊情况下我们只需要隐藏这个元素，但它的位置不能被占了，那该怎么实现呢。突然发现css还有一个visibility属性，用 visibility:hidden;可以很方便实现隐藏元素在前台的显示，但它的位置不会被后边的元素抢占。display:none