风格样式 - 九核技术交流网，专注互联网！

2008-09-16300+Jquery CSS MooTools和JS的导航菜单资源
如果你是网站前端开发人员，那么对你来说，也许做一个漂亮导航菜单会很得心应手。但今天暴风彬彬要为大家总结各种导航菜单的资源，以便让大家的网站前端开发的工作更方便更快速，只要选择现成的例子就可以应用于自己的网站了。暴风彬彬收集的这些资源，从非常简单的HTML和CSS导航菜单，到非常复杂和高级的JQuery、JavaScript和MooTools技术，这都可以让你轻松实现褪色、滑动、拖动等效果。1.Fancy menu - 非常酷的导航菜单:qSccsvS2mF3vWH1pO1i4QiHLznLkGS3n7Lwk98ebqSccsvS2mF3vWH1pO1i4QiHLznLkGS3n7Lwk98ebqSccsvS2mF3vWH1pO1i4QiHLznLkGS3n7Lwk98eb2. 专为Mac爱好者开发的CSS dock菜单，使用jQuery框架。qSccsvS2mF3vWH1pO1i4QiHLznLkGS3n7Lwk98ebqSccsvS2mF3vWH1pO1i4QiHLznLkGS3n7Lwk98eb下载 dock 菜单qSccsvS2mF3vWH1pO1i4QiHLznLkG .... [阅读全文]
来源：彬Go作者：

2008-09-10巧用Firefox三大利器插件教你调试Div/ CSS网页
Firefox是什么就不用说了，地球上的站长都知道，他的浏览器市场占有率仅次于IE，尤其被各大小站长所喜爱。除了大家都熟知的标签显示，定制外观等许多功能外，被站长们喜欢的还有以下两个重要原因，一是Firefox是完全符合W3C标准的，而IE却自成体系，搞自己的一套，导致很多网页只能在IE 下浏览，可怜的站长们为了保证所有用户的正常浏览，不得不在开发时，在IE、Firefox中频繁切换，以求兼容；另一个原因是Firefox提供了大量的各种免费功能插件给用户，用户可以方便获得众多附加功能。pCXrIrg2KvUBdBzMGPXtmswACCDdNKb4FsuTAAmdFirefox的插件实在是太多了，今天，我们只讲一下在进行网站的DIV/CSS设计与调试中所使用到的几个插件。pCXrIrg2KvUBdBzMGPXtmswACCDdNKb4FsuTAAmd1、 IE Tab 插件pCXrIrg2KvUBdBzMGPXtmswACCDdNKb4FsuTAAmd首先就是IETab，这个插件的功能很简单，就是一个在Firefox 的框架下，在IE内核与Firefox内核之间切换的工具，安装完毕以后 .... [阅读全文]
来源：CHINAZ用户投稿作者：

2008-09-09两张CSS盒模型图示搞清楚border、margin和padding
关于CSS盒模型的教程可能经常看到，不过还有一些新手朋友没有搞清楚，通过下面的两张图片，大家可以很清楚的看到border、margin、padding的关系。96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh 96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh 96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh边框属性(border)用来设定一个元素的边线；96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离；96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh内边距属性(padding)是用来设置元素内容到元素边界的距离。96wSkJ2wrrPRo21L0D5y8HLKdkCO3VOdd4mlmTbh .... [阅读全文]
来源：互联网作者：

2008-09-09CSS文件可维护、可读性提高指南四则
在大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。zHD10W03zH4GjqM2xawA0O4B6EjyNI8SHHns2WF8一、CSS样式文件分解zHD10W03zH4GjqM2xawA0O4B6EjyNI8SHHns2WF8对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。zHD10W03zH4GjqM2xawA0O4B6EjyNI8SHHns2WF8而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要 .... [阅读全文]
来源：互联网作者：

2008-09-09为什么尽量不要使用CSS Expression
CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。LZ0IPH4G5swfiT7jloFUgdjISA9rpjX6HFfTPy0f在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。LZ0IPH4G5swfiT7jloFUgdjISA9rpjX6HFfTPy0fCSS Expression在其它浏览器中不起作用，因此在跨浏览器的编码中单独针对IE设置时会比较有用。LZ0IPH4G5swfiT7jloFUgdjISA9rpjX6HFfTPy0f从IE5开始支持CSS Expression。我们看下面的代码：LZ0IPH4G5swfiT7jloFUgdjISA9rpjX6HFfTPy0f background-color: expression( (new Date()).getHours()%2 ? &qu .... [阅读全文]
来源：互联网作者：

2008-09-09关于IE6、IE7和FF最简单的CSS hack技巧
关于CSS HACK的文章在52CSS.com中提及的也很多。CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。 y7PtD0HKJYNrRWZrwupjR0i6PltZO3jpUTDlSBgdFF浏览器y7PtD0HKJYNrRWZrwupjR0i6PltZO3jpUTDlSBgd .test{ height:20px; background-color:orange; } y7PtD0HKJYNrRWZrwupjR0i6PltZO3jpUTDlSBgdIE7浏览器y7PtD0HKJYNrRWZrwupjR0i6PltZO3jpUTDlSBgd *+html .test{/*IE7*/ height:20px; .... [阅读全文]
来源：互联网作者：

2008-09-09老生常谈CSS网页布局的意义与副作用
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。cO7ZywdlbX0OIkgReu0PMt2wxQzTP4gqSHG9H3X5如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。 cO7ZywdlbX0OIkgReu0PMt2wxQzTP4gqSHG9H3X5CSS网页布局的意义体现在如下方面： cO7ZywdlbX0OIkgReu0PMt2wxQzTP4gqSHG9H3X5一、使页面载入得更快cO7ZywdlbX0OIkgReu0PMt2wxQzTP4gqSHG9H3X5由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 cO7ZywdlbX0OIkgRe .... [阅读全文]
来源：52CSS作者：

2008-09-01CSSBBS新手教程《一看就会》第二课
天终于抽了点时间来下第二课教程。没有学第一课的同学请点击这里先学习第一课！本教程每课都会有实例，也就是围绕例子来说明一些问题。大家学习的过程中多在运行代码框中修改代码，运行看看效果。CSS其实学起来很容易，但是如果真的应用到工作中就不那么轻松，因为细节的许多问题需要想的到才行，并且排版大型门户网站的时候，频道，页面非常多。所以命名一定要规范，有时候我写了很多class名字，很多都忘记定义的是干什么用的，太乱了。这个需要在实践，反复运用才能自如。今天我们来学习定义UL列表。比如一些网站首页栏目中的新闻列表或目录等。首先看一个下面的例子，看看效果。RhKpI4m6YzFPAteY8Y4Xd5WFDAJKLpP7a7FqoyZN RhKpI4m6YzFPAteY8Y4Xd5WFDAJKLpP7a7FqoyZN接下来，我们分析代码CSS代码RhKpI4m6YzFPAteY8Y4Xd5WFDAJKLpP7a7FqoyZN a{ color:#000000; text-decoration:none}a:hover{ color:#FF0 .... [阅读全文]
来源：CHINAZ用户投稿作者：

2008-09-01IE下中英文字体不能对齐原因及解决
如果不是因为总监审查严格，一定要求这个细节解决掉，也许我也不会去深究根源性的解决办法，再此感谢MTIME负责而严格的同事。 yZI0digOUdsLHs3bYmu0xodfgExFg4TuKk2fUTb3首先描述一下问题： yZI0digOUdsLHs3bYmu0xodfgExFg4TuKk2fUTb3yZI0digOUdsLHs3bYmu0xodfgExFg4TuKk2fUTb3如果所示，在IE下当一行文字同时有英文跟中文的时候，链接下划线就会发生折行，也就表示这个时候中英文是没有对齐的！（FIREFOX不受此问题影响） yZI0digOUdsLHs3bYmu0xodfgExFg4TuKk2fUTb3但是经过测试，默认的直接在页面里设置链接的时候是不会出现这个情况的！yZI0digOUdsLHs3bYmu0xodfgExFg4TuKk2fUTb3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ .... [阅读全文]
来源：作者：

2008-09-01DIV CSS实例：橙蓝互换的CSS翻页效果
下面的图片是本案例中的链接背景图片：0cvpwTlRQploBQ0LC0OVRtYXC74F5iLnpkuYfZ6j 0cvpwTlRQploBQ0LC0OVRtYXC74F5iLnpkuYfZ6j下面是XHTML编码：0cvpwTlRQploBQ0LC0OVRtYXC74F5iLnpkuYfZ6j <div id="pagebar"> <a href="#"><<</a> <span class="page_now">1</span> <a href="#">2</a> <a href=" .... [阅读全文]
来源：风格样式作者：

2008-09-01ASP、PHP与javascript根据时段切换CSS皮肤的代码
一个网站能切换不同的CSS风格大家应该都了解，像众所周知的腾讯在今年改版时也增加了切换皮肤的功能。根据时间自动调整站点风格是不错的想法，这种根据时间自动调整站点风格也不是什么新鲜事，记得好久以前也见过类似的文章或方法，只不过当时没有特别注意。下面说一下它们的实现方法，目前网上有这样两种实现方法：h7kooHRG4sx3uRZdLi5LzwQZ2I5GM0iXSGcEan3h一、采用服务端的代码 h7kooHRG4sx3uRZdLi5LzwQZ2I5GM0iXSGcEan3hASP版本：zwQZ2I5GM0iXSGcEan3h h7kooHRG4sx3uRZdLi5LzwQZ2I5GM0iXSGcEan3h h7kooHRG4sx3uRZdLi5LzwQZ2I5GM0iXSGcEan3h <link rel="stylesheet" type="text/css" href=" &l .... [阅读全文]
来源：互联网作者：

2008-08-28DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页　眉：header内　容：content容　器：container页　脚：footer版　权：copyright　导　航：menu主导航：mainMenu子导航：subMenu标　志：logo标　语：banner标　题：title侧边栏：sidebar图　标：Icon注　释：note搜　索：search按　钮：btn登　录：login链　接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为&ldqu .... [阅读全文]
来源：52CSS作者：

2008-08-28CSS样式和JavaScript脚本是否放置于外部文件的探讨
CSS样式和JavaScript脚本是应该放在外部文件中呢，还是把它们放在页面本身之内呢？如何处理是关于一些性能规则的思维，本文就这些问题，作一些探讨。xEHbyMTazCiVsNiHwG29n5lJdIpxbvIZ8oW3tg43在实际应用中使用外部文件可以提高页面速度，因为CSS样式和JavaScript脚本文件都能在客户端产生缓存。内置在HTML文档中的CSS样式和JavaScript脚本则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的CSS样式和JavaScript脚本被客户端缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。xEHbyMTazCiVsNiHwG29n5lJdIpxbvIZ8oW3tg43关键问题是，外部CSS样式和JavaScript脚本文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。xEHbyMT .... [阅读全文]
来源：52CSS作者：

2008-08-26用YSlow评分插件分析我们页面
YSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。L6UXF18hmIKRsx1uQHNysJWkNJ681X22bxis7NhD仔细研究了下YSlow跌评分规则。L6UXF18hmIKRsx1uQHNysJWkNJ681X22bxis7NhD主要有12条：L6UXF18hmIKRsx1uQHNysJWkNJ681X22bxis7NhD1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求（其中15个JS请求，3个CSS请求，47个CSS background images请求），多的可怕。思考了下，为什么把这个三种请求过多列为对页面加载的重要不利因素呢，而过多的IMG请求并没有列为不利因素呢？L6UXF18hmIKRsx1uQHNysJWkNJ681X22bxis7NhD发现原来这些请求都是可以避免的。L6UXF18hmIKRsx1uQHNysJWkNJ681X22bxis7NhD15个JS和3个CSS完全可以通过特殊的办法进行合并（这个技术部已经帮我们解 .... [阅读全文]
来源：阿里UED作者：

2008-08-25Javascript 是一个错误吗？
对Web标准的修订做得越多，Web开发的正确方向越值得怀疑。InfoWorld的NeilMcAllister对Web开发的现状与未来做了很好的思考。oKR7EEqOuhz7G6Xz2fFttMw13H2UJaFKk8cde2W2最近，ECMAScript4标准被弃用(请参阅：Javascript2前途尘埃落定)，统一为ECMAScript3.1，如果任ECMAScript4发展，Javascript将带来巨大变化，Adobe的EdRowe告诉作者，大部分人对Javascript一类语言存在障碍，这是为什么Adobe当初加入ECMAScript4阵营的原因，Adobe以及ECMAScript4希望带来一些适于大规模程序的概念。oKR7EEqOuhz7G6Xz2fFttMw13H2UJaFKk8cde2W2然而，尽管大规模程序的开发对Adobe可能是好的，可以肯定它未必对任何人都可行，传统程序语言就是一个例子。oKR7EEqOuhz7G6Xz2fFttMw13H2UJaFKk8cde2W2对任何Java程序开发正规军来说，强类型，包装，以及命名空间尽管对维护大型程序来说可能很容易，但对We .... [阅读全文]
来源：CHINAZ用户投稿作者：

2008-08-24CSSBBS新手教程《一看就会》第一课
作者的话今天抽了点时间开始写一个新手教程，此教程是针对初学者写的，写作方式也很随意，我也没有计划写多少课，有空到时候就来写写。把自己的一些经验都写出来，供大家参考。本人也不是非常专业，如果有错误的地方还请多多纠正。首先我先说明一下，CSS的功能其实就是定义HMTL标签显示效果的。（如果不知道HTML是什么，请点击这里学习HMTL教程！）没有其他什么更深奥的功能，而我写CSS的原则就是只要能实现某个想要的效果就OK了。仅此而已，所以其中可能有不标准的地方。暂且不谈这个，我们现在的重点就是实现最佳效果！能够让学CSS的朋友，或多或少的有所收获即是本人的最高兴的事情！本文由CSSBBS原创，版权所有！如需转载请注明出自：CSSBBS! 谢谢废话少说，现在开始讲课……CSS新手第一课：CSS是什么？不知道大家是怎样来到CSSBBS的，来这里的也应该知道CSS是什么了。上面已经说了，CSS就是对HMTL标签的控制！让网页显示出你想要的布局和风格！长远的说就是实现W3C网页的标准化，个人理解就是让网页更健康。这个健康不是内容的健康，而是代码的合理运用！如果还不清楚CSS .... [阅读全文]
来源：CHINAZ用户投稿作者：

2008-08-23几个经典的css技巧
使用 line-height 垂直居中xvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnOline-height:24px;6ax8ixN5tcEJEczbCZnOxvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnO使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。xvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnO清除容器浮动xvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnO#main { overflow:hidden;}6ax8ixN5tcEJEczbCZnOxvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnO期前也提到过这样的问题，更多信息可以看这里。xvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnO不让链接折行xvhFPXhy2aHl2OMFtl146ax8ixN5tcEJEczbCZnOa .... [阅读全文]
来源：作者：

2008-08-22从CHINAZ看FAVICON.ICO跨浏览器设计
FAVICON.ICO知识基础w7pprGCdRYwGM53RhF02Q1oZuMy5FYXUls3BB6EwFavorites Icon其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。可以出现在浏览器标题选项卡、URL前、收藏夹中，大小为16*16，目前IE6好像不支持自定义Favicon，IE7仅支持ICO格式，FF/Opera支持GIF/PNG/ICO/JPG等格式。w7pprGCdRYwGM53RhF02Q1oZuMy5FYXUls3BB6Ew网站如何应用Favicon图标w7pprGCdRYwGM53RhF02Q1oZuMy5FYXUls3BB6Ew方法一：将制作的Favorites Icon命名为Favicon.ico，放置网站根目录即可，浏览器会自动索引方法二：使用<link rel="icon" href="图标路径" type="MIME类型" />如 <link rel="icon" href="/cike/favicon.ico& .... [阅读全文]
来源：cike.org作者：

2008-08-21CSS颜色值的三种形式：名称 RGB和十六进制
对颜色的控制，CSS编码必不可少。在这方面52CSS.com涉及的不是很多。但这是基础知识，新手朋友需要作一些了解，老手们就可以省略不看了。5iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF从理论上说，CSS可以处理的颜色数量大概是：16,777,216。够用了吧。如何表现这些颜色呢，主要是通过三种形式：5iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF Example Source Code 5iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF1、名称如：blue5iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF2、RGB 如：255,0,05iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF3、十六进制如：#ff66005iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwF如果我们要设置红色，可以是下面的形式：5iyx6rOkvbKYrRQkOLXXeIWYWOAUdi4mUU6YzFwFExamp .... [阅读全文]
来源：互联网作者：

2008-08-21Div+CSS网页布局对SEO的影响漫谈
CSSdiv网页布局对SEO的影响漫谈y45aGHFGyCXC5bpUwhO5qtiUHtV2QwSvapBj8TLZSEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIVCSS网页布局对SEO有着积极而富有意义的影响。看以下几个方面：y45aGHFGyCXC5bpUwhO5qtiUHtV2QwSvapBj8TLZ一、精简网页代码y45aGHFGyCXC5bpUwhO5qtiUHtV2QwSvapBj8TLZ使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。y45aGHFGyCXC5bpUwhO5qtiUHtV2QwSvapBj8TLZ代码精简所带来的直接好处有两点：一是提高Spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处；二是由于能高效的爬行，就会受到Spider欢迎，这样对收录数量有很大好处。y45aGHFGyCXC5bpUwhO5qtiUHtV2QwSvapBj8TLZ二、解决表格的嵌套问题y45a .... [阅读全文]
来源：互联网作者：

共有262条记录,14页,当前第 1 页 1 2 3 4 5 6 7 8 9 10 >>

9core.com - 九核技术交流网