文章标题关闭所有内容预览 | 展开所有内容预览
-
CSS：表单中的name与id的异同
[内容预览]
522 | 2010-09-25 04:51:03
表单的name与id其实是同一个意思，都是为了标记对象名称。 它们所不同的是：name是Netscape的、id是Microsoft的。 表单元素(forminputtextareaselect)与框架元素(iframeframe)用name。 这些元素都与表单(框架元素作用于form的target)提交有关...
[阅读全文]
-
CSS研究教程:类名的长命名和短命名
[内容预览]
572 | 2010-09-05 00:49:47
说实话，看到这个题目时我觉得这有什么好讨论的，肯定会是场一边倒的讨论。因为个人比较倾向于短命名，简单优雅，可能是出于程序员的洁癖，容不得任何冗余的东西。（和我一个想法的人应该不在少数吧！）先看下长命名和短命名的定义：会上大家先是给双方各列了一堆优缺点，结果不相上下。然后从性能和可维护性上进行了详细的争论。性能分为下载性...
[阅读全文]
-
合理利用HTML标记优化网页布局
[内容预览]
390 | 2010-07-19 01:53:24
我们一直在讲CSS网页布局代码的优化，在webjx.com以往的文章中，也一直强调语义和文档的结构。随着国外对WEB标准的推广，有些新手认为，web2.0就是把以前的table布局都改为DIV+CSS布局就是web2.0。其实不然，我们要合理利用这些标签。有一点值得引起注意，那就是在web开发人员圈子里通常被称为“...
[阅读全文]
-
[组图] CSS实例教程:非浮动区域设置宽度
[内容预览]
638 | 2010-06-21 00:43:02
前一段时间我在做GreenGaint这个主题的时候，发现了一个在布局中出现的关于浮动的问题。让我来说明一下，如下图所示： 我们假设有一个容器A，在这个容器内有两个容器B和C，B设置了高度和宽度，并且向左浮动，C没有浮动，它将围绕在B区域的周围，这是典型的浮动效果，没有问题。 但是当C容器设置了宽度之后，并且...
[阅读全文]
-
css的效率和浏览器渲染的速度
[内容预览]
626 | 2010-06-18 00:36:55
浏览器如何读取你的CSS选择器有一个很重要的原则，那就是它们从右到左读取。这意味这像ul>lia[title="home"]这样的选择器，a[title="home"]将是最先被读取的。我承认我并不经常想这个问题......我们写的css的效率是怎么样的呢，浏览器渲染的速度又如何呢？这是应该是浏览器开发者应该关心的(页...
[阅读全文]
-
关于CSS HACK 解决兼容的写法
[内容预览]
899 | 2010-06-18 00:36:48
人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSSHACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而...
[阅读全文]
-
CSS基础教程:关于群组化选择器
[内容预览]
741 | 2010-06-18 00:36:04
常常我们的CSS样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~例如：当有好几个选择器刚好都...
[阅读全文]
-
[组图] CSS属性Vertical Align使用方法
[内容预览]
547 | 2010-06-18 00:34:47
CSS有一个属性叫VerticalAlign。当你第一次学习它的时候会有些困惑，因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样： img{ vertical-align:middle; } 注意在这个应用案例中，它被应用到了img元素上。图片通常是行内元素，意味着它通常是和文字在一起的。但是到底...
[阅读全文]
-
10个常见的IE bug和解决方法
[内容预览]
487 | 2010-05-28 00:41:06
我列举了10个常见的IEbug和解决方法。我相信这将能够帮助你减少调试IE布局不一致时花掉的时间。在处理IE方面每个人都有他们自己的故事。作为一个开发者我不得不面对大量的IE的古里古怪的问题并且有的时候你只是想用头撞墙。但是随着时间的推移，我们慢慢吃一堑长一智（有些时候那不是我们的错，是IE的错！）并且开始接受和理解I...
[阅读全文]
-
DIV+CSS布局做到最精简代码的建议
[内容预览]
542 | 2010-05-25 01:55:58
我们来说下div+css布局的时候怎样做到最精简的代码，以达到极限提升网站速度的目的。1、css样式尽量合并成一个外部文件，采用link方式导入到网页中来，可以减少不少内嵌在网页中的css代码。2、多用全局样式，比如网页中只有一个h1标签，那么直接在css文件中定义h1的样式，如h1{......}，而不要给h1标签加...
[阅读全文]
-
CSS实例:GG Adsense广告投影效果
[内容预览]
601 | 2010-05-25 01:55:15
一直觉得帕兰的GoogleAdsense广告修饰得很漂亮。使用背景图片可以很方便地实现这个投影效果，不过使用CSS就足以实现。以创建一个300×250尺寸的广告投影为例：这三个div容器中，其中第一个子容器用于投影效果，第二个用于GoogleAdsense代码。附加样式如下：.google{position:relat...
[阅读全文]
-
网页设计师如何使用GOOGLE在线字体
[内容预览]
490 | 2010-05-25 01:54:37
为了让网页设计更加灵活，Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与MonotypeWebFonts、FontShop等字体商不同，Google这次开放的字体与它其他很多服务一样，完全免费目前网页上使用的字体都是常见的几种，如’LucidaGrande’，Verdana，Ar...
[阅读全文]
-
[图文] CSS教程:纯CSS实现的圆角化图片
[内容预览]
624 | 2010-04-26 02:02:23
在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？答案是肯定的，下面看看它的终极功夫。还是先看最终效果图吧：图一看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，我特意应用了一...
[阅读全文]
-
float闭合（清除浮动）和CSS HACK
[内容预览]
542 | 2010-04-26 01:58:56
一、float闭合（清除浮动） 将以下代码加入GlobalCSS中,给需要闭合的div加上class="clearfix"即可,屡试不爽..clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix...
[阅读全文]
-
实例:用CSS样式描述表格Table边框
[内容预览]
561 | 2010-04-26 01:58:21
表格边框的处理是CSS网页布局中经常会遇到的内容，也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。HTMLTableTABLE{background:blue;border-collapse:...
[阅读全文]
-
CSS教程:通配属性批量替换的方法
[内容预览]
498 | 2010-04-26 01:58:03
例如我想美化输入框的效果：避免给这样的通配属性：input{background:#222;border:1pxsolid#4a4a49;color:#ccc;padding:1px3px;}否则所有的输入框、按钮、单选框、复选框都会跟着变化。给通配属性容易，再删通配属性，恢复input的默认值就麻烦了。如果你不幸，也...
[阅读全文]
-
[图文] CSS教程:expression在Chrome的问题
[内容预览]
463 | 2010-04-26 01:57:58
先看一段HTML代码，在下边这段代码中，这张图片的宽度未知，我想写在CSS中写一行限制最大宽度为50px：Firefox或IE较高的版本可以直接写max-width。在IE的低版本浏览器中，我们可能会写如下的代码：#testimg{width:expression(this.width>50?'50px':true);...
[阅读全文]
-
CSS教程:CSS属性behavior的语法
[内容预览]
507 | 2010-04-26 01:57:16
在进行CSS网页布局的时候，我们经遇到刷新要保留表单里内容的时候，习惯的做法使用cookie，但是那样做实在是很麻烦，css中的behavior就为我们很好的解决了这个问题。今天就向大家介绍CSS属性behavior的语法 behavior的语法： behavior:url(url) url(#objID) ur...
[阅读全文]
-
清理无用的CSS比较有用的几个工具
[内容预览]
534 | 2010-04-26 01:56:56
在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。Dust-Mese...
[阅读全文]
-
兼容浏览器的网页细线表格设计
[内容预览]
461 | 2010-04-26 01:56:48
细线表格如果单纯设置边框，很难保证浏览器兼容。常见的做法是利用CSS2的"border-collapse:collapse;"属性合并表格边框；并对table元素设置左边框和上边框，对th和td元素设置右边框和下边框。Markup:<table><tr>&...
[阅读全文]
-
CSS教程:CSS3新功能和新特性
[内容预览]
529 | 2010-04-26 01:56:34
很多已经存在的新功能和特性正在被提出至CSS3。我们将在此尝试展示其中的一些内容——前提是他们已经被Firefox、Konqueror、Safari/Webkit实现了。下面依次介绍。边框border-color属性boder-image属性border-radius属性box-shadow属性背景background...
[阅读全文]
-
YUICompress:高效压缩CSS和JS代码
[内容预览]
484 | 2010-04-26 01:56:16
如果你还在使用CSSTidy、JSbeautifier之类的在线代码压缩工具，那么告诉你，你已经过时了。前端代码的压缩，主要在于对JS和CSS代码的压缩，抛开图片压缩的问题不谈，JS和CSS代码的压缩已经有先人做了很多工作。YUICompressor正是出自Yahoo工程师之手，高效，便捷，压缩率高。使用纯Java编写...
[阅读全文]
-
CSS基础语法：群组化选择符
[内容预览]
468 | 2010-04-26 01:56:10
常常我们的CSS样式中会有好几个地方需要使用到相同的设定时，一个一个分开写会是一件满累人的工作，重覆性太高且显得冗长，更不好管理....在CSS语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8行相同的语法，合在一起后就只要短短的一小行，怎么看都让人心旷神怡啊~例如：当有好几个选择器刚好都...
[阅读全文]
-
CSS教程:background-position说明
[内容预览]
535 | 2010-04-26 01:56:03
background-position的说明：设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁属性(padding)设置影响。默认值为：0%0%。此时背景图片将被定位于对象不包括补丁(padding)的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将...
[阅读全文]
-
[组图] 解析CSS3制作网页下拉菜单代码
[内容预览]
494 | 2010-04-26 01:55:48
当我在为WordPress编写Notepad主题时，顺道学习了一些新的CSS3特性，现在此分享。查看演示可以看到一款类似Mac风格的多级下拉菜单，使用border-radius，box-shadow和text-shadow创建。在Firefox，Safari和Chrome浏览器中能够完美地渲染。即便是诸如IE7+等...
[阅读全文]
-
CSS:tbody标签与thead和tfoot标签
[内容预览]
462 | 2010-04-26 01:55:42
CSS网页布局中，tbody标签与thead和tfoot标签如何使用呢？ thead标签用于HTML表格的表头 表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头. tfoot标签表示HTML表脚 表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的...
[阅读全文]
-
用CSS的float和clear进行三栏布局
[内容预览]
465 | 2010-04-26 01:55:38
三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生...
[阅读全文]
-
CSS教程:彻底了解haslayout
[内容预览]
456 | 2010-04-26 01:55:16
要想更好的理解css，尤其是IE下对css的渲染，haslayout是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于haslayout。 什么是haslayout？ haslayout是WindowsInternetExplorer渲染引擎的一个内部组成部分。在InternetExplorer中...
[阅读全文]
-
Table建站，XHTML和DIV建站的不同
[内容预览]
547 | 2010-04-26 01:55:03
最近有客户问到“table建站、DIV建站以及XHTML建站的区别”，其实这也是国内网站建设逐步走向成熟的标志。网站建设，简单的来说，就是“这个人长的怎么样”和“这个人内心怎么样”。一部分是外观所展示出来的“视觉效果”、另一部分是藏在里面的“代码元素”。我们先来举一个简单的例子，用这3种不同的代码风格，实现同一个页面效...
[阅读全文]
-
用CSS实现网页图片的预加载
[内容预览]
483 | 2010-04-26 01:55:01
有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。为什么使用预载你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载...
[阅读全文]
