IE下png图片透明失效的bug解决方案
这里所说的bug不是指IE6无法显示png的问题,而是在IE7和IE8下如果你动态修改png图片的透明度,比如说你应用一个fadeIn,将图片的透明度调到25%,这时候就会出现非常诡异的bug
10个CSS技巧
1.CSS字体属性简写规则2. 同时使用两个类3. CSS border的缺省值4. CSS用于文档打印5. 图片替换技巧6. CSS box模型的另一种调整技巧7. 块元素居中对齐8. 用CSS来处理垂直对齐9. CSS在容器内定位10. 直通到屏幕底部的背景色
DIV CSS编码中容易出现的一些错误
1.检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2.检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。3.确定错误发生的位置 如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,
CSS网页布局应注重语义和HTML页面结构
通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align=”left”等等)束手无策,不知道该转换成对应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,我再
CSS3圆角--兼容所有浏览器
解决CSS3圆角兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。 译:前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它
关于XHTML中的alt属性和title属性
在XHTML标准里,图片的alt属性是必须的。alt属性 为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。Alt属性(注意是“属性”而不是“标签”)包括替换说明,对于图像和图像热点是必须的。它只能用在img、area和input元素中(包括applet元素)。对于input元素,alt属性意在用来替换提交按钮的图片。 比如:使用alt属性是为了给那些不能看到你文档
标签内设置了float:left又设置display:inline。
标签内设置了float:left又设置display:inline。 既然设置了float:left,那标签内的元素都会向左浮动了。 为什么又要设置display:inline。既然设置了float:left,那该标签已具有块状元素的特征了,又设置内联元素,不是有矛盾吗?ulli{ float:left; margin:012px12px0; display:inline;} display
IE6背景图片重复的BUG
背景图片的设置是CSS布局时常用的一种属性,应用background的url,引入背景图片,可以设置为不重复平铺,如下面的代码: background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png)no-repeat; 在大多数情况下,此设置不会有任何问题。背景图片按设置的形式呈现,不会平铺于容器,无论容器是何宽度与高度。 但在IE6下,有一种情况,如果未定义宽高,则
兼容浏览器用CSS控制字符宽度多出以省略号结束的效果
做网站时,你可能会遇到标题过长,需要转行才能显示的,但你又想它在一行里显示就行,怎么办呢?以下提供一个解决方法,希望能帮到你!兼容浏览器用CSS控制字符宽度多出以省略号结束的效果,很实用的效果,由于FF对溢出显示省略号的属性支持不好。因而在进行编码时,应用到了一个HACK和FF的私有属性,大家在学习时注意区别一下。看下面的HTML代码:<ul><li><ahref="#">使用CSS最佳习惯</
谈谈符合WEB标准的CSS网页布局比传统TABLE布局的有什么优势
一、代码臃肿 首先,Table里面唯一无法用CSS定义的属性只有Cellspacing,Cellpadding几个,其它属性都可以并且应当使用CSS,这样,剩下的,就是<table><tr><td>和<div>的对决,我相信一个动辄几十K大小的网页,即使使用了几十个Table,因此多出来的代码也可以忽略不计,那些埋怨Table代码臃肿的人其实该检查自己的编码习惯,能将Table写得十分臃
分析CSS布局中以图换字几种方法的优劣
CSS布局中的以图换字,其实是为了保证页面的可读性,这样既有利于搜索引擎,又有利于结构查看。 由于这种方式被大多数人所认同,所以方法也越来越多: 一、使用text-indent的负值,将内容移出容器; 二、使用display:none,将内容隐藏; 三、使用padding将文字挤出容器之外,并将超出的部分hidden; 四、使用font设置超小字体,达到隐藏内容的目的。 一、看起来蛮简单,但其实有几个不理想的地方,比较吃资源
CSS选择符命名时要遵循的四个原则
随意的命名,会让你陷入尴尬。 举个例子,我们需要在一段文字里将某些词标红。所以为此建了一个.red{color:red;}。结果产品经理觉得,红色太刺眼了,改成橘色比较好吧。这下头大啦,难道写成.red{color:orange;}么?要不然就是把HTML里的每个class="red"改成class="orange"? 在过去几年时间里,我经常遇到这样的尴尬。因此作为一些经验之谈,我整理出以下的几个命名原则: 原则一:CSS选择符
如何转化文件的编码:UTF-8和GB2312的问题
知道大家在做页面的时候会不会遇到样式定义不生效的问题,基本的表现就是怎么改样式都没显示或只有某些浏览器正常,这时通常需要做下面的几步: 确认所修改的样式文件是否是当前页面的样式文件(多个环境的情况) 确认文件中的路径是否正确(可能手误多写或少写) 如果上面两点都确认没问题或只是一部分样式失效,基本可以确定是文件的编码问题 大家都知道使用“UTF-8”比“GB2312”跨平台的兼容性更好,却不一定知道文件的编码跟文件编码的申明不是
用CSS控制Table单元格强制换行与强制不换行
用CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日看到此方法,在此与大家分享一下! 用CSS实现Table单元格数据自动换行或不换行的实现方法: 1、强制换行: <styletype="text/css">.AutoNewline{ word-break:break-all;/*必须*/}</style&g
div+css经验之谈:组织选择符和声明
用div+css做网站经验之谈:组织选择符和声明经常要保持CSS的整洁度和有序性。 重置样式(resetstyles) 排版样式(typographystyles) 布局样式(layoutstyles(header,content,footer,etc.)) 模块和widget样式moduleorwidgetstyles 其他(etc). 然后,在每个组里面,我按照DOM等级将选择符组织划分: 任何父级元素样式(anypa
把页脚保持在(未满屏页面的)底部的实例
DivCSS实例:让把页脚保持在(未满屏页面的)底部的实例 在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。 当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;测试了一下,还可以,在IE6、IE7、FF等都没有问题!窗口缩小时也没有问题!首先是JS脚本:functiontest(){ varinfoHeight=document.getElementById("info").scrol
让你的CSS命名更合理
让你的CSS命名更合理,更富有语义---------CSS网页布局经验:富有语义地类class和id标记命名 您应该明白为什么我会说到这个,选择合适的、有意义的元素去描述你的内容,确保您所选择的是富有语义的类class和id特征值。做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此。看一下下面的这条规则:eg.l13k{color:#369;} 如果您是刚接手这个工作,您在CSS文件中看到了上
要怎么实现不无刷新HTML页面更换CSS样式
CSS中可以控制换行的四种属性
在做网站时进行DivCSS布局中,需要对文本进行控制,我们今天系统的向大家介绍一下。CSS中控制换行的四种属性。一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,语法:white-space:normal|pre|nowrap 取值: normal:默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre:换行和其他空白字符都将受到保护。这个值需要IE6+或者!
区分文字的大小单位---px和pt
区分文字的大小单位---px和pt在做网站的网页设计CSS中,经常用到字体,而字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢? px:pixel,像素,屏幕上显示的最小单位; pt:point,点,是印刷业一个标准的长度单位,1pt=1/72英寸; 在Windows里,默认的显示设置中,把文字定义为96dpi。这说明了:1px=1/96英寸;而1pt=1/72英寸,可以得出,在本设置中1px=0.75
分析与比较 CSS中的link和import方式
有很多网页中的CSS链接与引用是这样写的:<styletype="text/css"media="screen">@importurl("http://www.52css.com/abc.css");</style>而很多网站使用的都是link<linkrel="stylesheet"rev="stylesheet"href="52css.css"type="text/css"media="all"/>
从五个方面入手,让你写出更加专业的CSS代码
每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?从以下五个方面入手,让你写出更加专业的CSS代码,也能使代码有好!一、重置 首先,很认真的告诉你,总是要重置某些分类。无论你是使用EricMeyerReset、YUIReset,或者你自己编写的重置代码,只要使用就对了。 它能很简单的移除所有元素的填充(padding)和边距(margin):html,body,div,h1,h2,h3,h4,h
好用的 overflow与text-indent:-9999px 文字隐藏及input value偏移
所以推荐使用 line-height:0; font-size:0; overflow:hidden; 能完美“隐藏”掉你background之上的字体 经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过
CSS网页布局不错的八个技巧
用CSS网页布局来做网站,说难,其实很简单。往往有很多问题困扰着新手,这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候,我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧,这些技巧显得很有用。一、若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多
CSS教程--定位position和浮动float
CSS为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对CSS2中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。另一方面,CSS1中首次提出了浮动,它以Nets
CSS不透明的详细介绍
这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释,以实现这项有用的CSS技术在您的项目中兼容所有浏览器。 关于CSS透明度,有一点需要注意的是,它虽然使用了很多年,但它一直以来都不是一个标准属性。它是一种非标准技术,应该是CSS3规范的一部分。 一、旧的Opacity设置 以下代码是Firefox和Safari旧版本所需的透明度设置: #myElement{ -khtml-opacity:.5; -mo
谈谈初始化CSS元素
为什么要初始化CSS?不同的浏览器默认的样式可能不近相同,所有开发时的第一件事可能就是如果把他们统一。 也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSSReset,以让网页的样式在各浏览器中表现
CSS网页布局中常犯的几种小错误
CSS网页布局时,即使是比较有经验的人,也都会犯这或那的小错误,以下是一些注意点,希望对你有帮助.1.检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2.检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。3.用删
优化 精简和优化CSS网页布局代码
我们一直在讲CSS网页布局代码的优化,一直强调语义和文档的结构。随着国外对WEB标准的推广,并不是把以前的table布局都改为DIV+CSS布局就是web2.0。 我们要合理利用这些标签。 有一点值得引起注意,那就是在 web 开发人员圈子里通常被称为“div-itis”的对 div 元素的滥用现象。 通过大量的嵌套 div 或 span 元素来添加样式确实很方便,但还是应尽量避免这种诱惑。在多数情况下,为文档内现有元素附加样式或
CSS网页布局所必需了解的CSS基础知识
一、可设置的CSS属性包括:字体属性、文本属性、颜色及背景属性、边框属性、容器属性(边距属性、填充属性)、分类属性、鼠标属性。二、基础属性字体属性:font-family font-style font-variant font-weight font-size文本属性:word-spacing letter-spacing text-decoration vertical-align text-transform text-a
DivCSS网页布局对网站搜索引擎优化的作用
我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭解的都知道。代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录品质有一定好处;二是由于能高效的爬行,就会受到spider喜欢,这样对收录数量有一定好处。 表格的嵌套问题 很多网站如何网上推广的文章中称,搜索引擎一般不抓取三层以上的表
图示divcss帮助初学者的十种技巧和对Web标准的理解
CSS是目前网页布局主流的形式,也是52CSS.com向大家介绍的核心内容,由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。大家可以从中了解到DivCSS初学者应该知道的十种技巧和对Web标准的理解。一、索引 本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落。
高级技巧:css sprites技术
也就是通过背景图的定位(background-position )把页面中所用到的图标、背景图之类的整合到一张整的背景图里,从而大大减少了页面请求数,提高了页面浏览的性能。 其实本民工最初这样用的时候并不知这就叫css sprites,只是看到各大主流站都是这么做于是也效仿而已。比如下面这张图,是腾讯主站背景图的一部分:定位的样式其实只用一句:background: url("your_url.gif") no-repeat x y;
CSS Sprites技术以及图片优化
SS Sprites对CSS布局的意义、优点和缺点介绍 关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。图片优化 一、对于非动画的GIF更建议使用
CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
CSS Sprites工作原理 CSS Sprites对CSS布局的意义、优点和缺点介绍 CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。 原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for Faster-Loading Web Sites,技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Request
清除浮动的方法一共有多少种
CSS的清除浮动一个凡是做页面的人都会遇到的一个东西,但是是否大家都能够清楚的知道,全方位的了解呢?于是一闲下来了马上写了这样的一篇文章,不能讲面面俱到,然而基本能将我所知道的倾囊相授了。 我们粗略的一起来看看清除浮动的方法一共有多少种(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
怎么让一个DIV随窗口的变化而变化
其实他是指DIV的高度。简写了一下,感觉不是很实用。不过在某些特殊页面中,有一定的作用。可以在IE6、IE7与FF中,自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns
条件注释来确定IE浏览器版本并调用相关CSS文件
酷兆并不提倡这样的方法,但是依然有很多CSSer会用到,这个资料保存在这里,以备大概查阅,请注意,不到不得已,请不要使用此方式。<!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="images/StyleSheet.css" /><![endif]--><!--[if IE 7]><LINK rel="styl
不用float实现div模块居中布局
最常见的div+css网页布局形式:上、中左、中右、底四个模块,宽度760px,整体页面居中。结构代码,topleftrightfoot四个模块全部独立、互不嵌套。<divid="top">head</div><divid="left"> <divid="left_module">left</div></div><divid="right"> <divid="right_module">right</div></div><divid="
谈论DivCSS网页布局的模块化开发思想
谈论DivCSS网页布局的模块化开发思想我没有看过CSS模块化的相关书籍,所以我下面说的不一定正确,但是在工作中,我会用我理解的模块化方式提高工作效率,我理解的模块化,主要分为两类。一、将常见的样式剥离出来,形成单独的样式,我叫他基础样式表或模块样式表,这个样式表主要一些常见的基本结构和形式,如CSS Reset、Blank、Font 等等。例如下面这个样式表,我认为就是一个简单的基础样式表。(只是简单,不推荐用
CSS模块化思想 更有效的管理CSS样式
关于模块CSS的划分,我比较喜欢类似wordpress中的css划分方式,一般情况下通过类似下列结构划分:layout.css /* 整站布局 */public.css /* 公用组合样式 */header.css /* 页面头部区域样式 */sidebar.css /* 侧边栏区域样式 */main.css /* 主体区域样式 */footer.css /* 底部区域样式 */index.css /* 首页区域特有样式 */form.
网页布局中 tbody标签与thead和tfoot标签使用
CSS网页布局中,tbody标签与thead和tfoot标签如何使用呢? thead 标签用于HTML表格的表头 表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头. tfoot 标签表示HTML表脚 表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的下部打印表脚. tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。 tbody 元素应该与
CSS的ID与class类的长命名和短命名的问题
说实话,看到这个题目时我觉得这有什么好讨论的,肯定会是场一边倒的讨论。因为个人比较倾向于短命名,简单优雅,可能是出于程序员的洁癖,容不得任何冗余的东西。和我一个想法的人应该不在少数吧! 先看下长命名和短命名的定义:<!-- 长命名:使用前缀体现上下文环境的CSS命名方式。 --><div class="category"> <div class="category-hd"></
一些常用CSS英文字体介绍
今天向大家介绍一些英文字体,希望在今后的字体设置中,对您的编码有所帮助。Arial Arial是一套随同多套微软应用软件所分发的无衬线体TrueType字型。虽然比例及字重(weight)和Helvetica极之相近,但Arial其实是Monotype Grotesque系列的变种。设计Arial时考虑到会在电脑上面使用,在字体及字距上都作了一些细微的调整和变动,以增加它在电脑屏幕上不同分辨率下的可读性。Helvetica Helv
门户网站与大型网站CSS架构与组织
对于大型门户,海量信息平台及多模块,多区域化网站,更需要对CSS,XHTML,的标准化,符合语意的HTML框架,复用性强的CSS代码,这些才能保障你的网站,具有很好的“地基”。 第一部:关于构建CSS框架我们要实现的目的:ExampleSourceCode[www.52css.com] 1.实现标准化,具备主流平台适应性的前端实现; 2.快速开发,在站点风格确定后,前端不应该成为整个项目里瓶颈; 3.重构的需求,尽可能的让类和区
关于模块CSS的划分
关于模块CSS的划分,我比较喜欢类似wordpress中的css划分方式,一般情况下通过类似下列结构划分: 引用片段:layout.css /* 整站布局 */ public.css /* 公用组合样式 */ header.css /* 页面头部区域样式 */ sidebar.css /* 侧边栏区域样式 */ main.css /* 主体区域样式 */ footer.css /* 底部区域样式 */ index.css /
区别div和span、relative和absolute、display和visibility
区别div和span、relative和absolute、display和visibility div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性,现在我们整理并罗列出它们的区别与使用要点,供大家参考。一、div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
CSS中文字体的英文名总汇
CSS布局中 DIV和TABLE超出宽度自动换行的分析解决
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,现在总结一下CSS如何实现换行的方法,只要在CSS中定义了如下句子,可保网页不会再被撑开了。 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有
完全用CSS实现的中英文双语导航菜单
源代码如下:引用片段:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta