网页制作

浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题

写在前面的唠叨说到解决兼容性问题,不得不提一下css hack,曾几何时我以会使用几个hack沾沾自喜,后来发现自己真是个vip级别的蠢蛋,会用几个hack只是中级阶段,真正厉害的人要以没有hack同样可以实现复杂页面的兼容性,这才叫厉害。所以后来,苦心研究如何无hack实现各个... 查看详情
收藏 0 赞 0 分享

css 图片变黑白效果 使用CSS将图片转换成黑白的

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。  CSS3 greys... 查看详情
收藏 0 赞 0 分享

css实现跨浏览器的盒阴影效果告别图片实现类似效果

一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。 然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果... 查看详情
收藏 0 赞 0 分享

css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)

一、前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是sh... 查看详情
收藏 0 赞 0 分享

css3背景图片透明叠加属性cross-fade简介及用法实例

据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是CSS3 Cross-fade – C... 查看详情
收藏 0 赞 0 分享

FireFox下文本框/域百分比自适应数值padding显示bug解决方案

一、问题描述我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。如下效果图:在窄屏下,上面的文本框宽度也要跟着外部宽度变小。难点对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。因此,我们基本上都有类似下面的设置:复制代码代码如下:input { pad... 查看详情
收藏 0 赞 0 分享

css3 box-sizing属性使用参考指南

基础知识 语法: box-sizing : content-box | border-box | inherit 相关属性 : 无 取值: content-box:此值维持css2.1盒模型的组成模式,border|padding|content {element width=b... 查看详情
收藏 0 赞 0 分享

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

一、诉说前言 before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要... 查看详情
收藏 0 赞 0 分享

overflow:hidden line-height clearfix:after使用方法介绍

1.overflow:hidden的作用是隐藏溢出比如: 复制代码代码如下: <div style="width:300px;overflow:hidden" id=1><div id=2></div><div> 当ID=2的这个D... 查看详情
收藏 0 赞 0 分享

css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: 1.vertical-align的语法 vertical-align属性的具体定义列表如下: 语法: vertical-align : baseline | sub | supe... 查看详情
收藏 0 赞 0 分享

div css图文混排列表设计中的基础问题总结

最近业务需要,想设计一个比较通用的图文混排的列表。结果设计的过程中遇到了不少问题,虽然都是一些css设计中比较基础的问题,但是自己认为有必要总结下,希望可以帮到一些css设计的初学者,同时也想扩大下自己博客的知识量o(^_^)o。 1.最终设计的结果  HTML(部分,... 查看详情
收藏 0 赞 0 分享

css 背景透明 元素(标签)背景透明的css设计

今天要设计一个定位在图片上的标签,标签的背景要有一定的透明度,使用到了opacity的属性,过去没太注意这个属性的兼容性问题,结果采坑了。。。 1.完成后的效果 完成前后的效果应该是这样的:  背景透明前      &n... 查看详情
收藏 0 赞 0 分享

css3强大的动画效果animate使用说明及浏览器兼容介绍

好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新。这个星期总算是告一段落,补上几篇技术性的文章。好吧,第一篇是关于css3动画的使用。 昨天突然看到jing.fm(这个音乐网站非常不错,很多效果我都很喜欢,如果你... 查看详情
收藏 0 赞 0 分享

ie下的css层叠z-index各种问题详细整理

到新地方有些日子了,差不多适应了这边的工作节奏与流程。接到的第一个开发任务是几个比较简单的页面,需要做的工作就是先把设计图变成页面,然后使用PHP创建几个请求的接口传递数据,标准且简洁的web开发思路。可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(... 查看详情
收藏 0 赞 0 分享

关于Chrome浏览器字体显示的太小不一的bug处理

作为WEB开发者我们得知道,看似简单的网页制作,如果要做得更好、更专业,真的是不简单。 我今天在A号机器上用chrome打开一个网页,再用B号机器上用chrome打开相同的网页,结果出现字体显示的太小不一样。原因是在简体中文版一直存在最小字体 12px 的限制。12px 有什么好... 查看详情
收藏 0 赞 0 分享

IE6 float:left margin-left出现两倍像素

在IE6下(标准模式/怪异模式) 一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px),那么会自动的加一倍变成30px。 例: 复制代码代码如下: <!DOCTYPE HTML> <html> <head&... 查看详情
收藏 0 赞 0 分享

css固定宽度并且让最后一行文字换行

今天群里有人问了个问题:在固定宽度的块级元素中,里面的内容最后一词组在宽度不够的情况下没有换行,如何让它换到下一行?这里我整理了下群里的方法,分享给大家。 首先给出问题,截图如下: html 代码: 复制代码代码如下: <!DOCTYPE HTML> <html... 查看详情
收藏 0 赞 0 分享

文件上传input file简便美化方案(css)

文件上传input在各个浏览器里表现形式都不一样:ie6 ie7,8,9ffchrome这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下:ie6无法美化,只能应用部分效果,如下:选择文件后(以ff为例,不用浏览器显示的路径不同):html代码:复制代码... 查看详情
收藏 0 赞 0 分享

ie7下z-index失效问题解决方法(详细分析)

解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"... 查看详情
收藏 0 赞 0 分享

CSS样式分离之再分离达到精简与重用

一、关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞。 无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用。 CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式: .example{color:red;... 查看详情
收藏 0 赞 0 分享