BlogJava-Sealyu-随笔分类-CSS

CSS Hack区分浏览器 IE6 IE7 IE8 Firefox Opera Safari

seal — Wed, 08 Dec 2010 07:39:00 GMT

为了向你展示这些 CSS Hack 是否正常运作，我新建六个 P 标签，并给每一个 P 标签一个特有的 id。这将向你展示 CSS Hack 的运作情况。

我来自 Opera 7.2 - 9.5

我是神奇的 Safari

我来自 Firefox

我是你爷爷 Firefox 1 - 2

我是囧 IE 7

我是脑瘸 IE 6

　　然后我让这些 P 标签默认都不显示

body p{display: none;}

　　使用 IE CSS 条件注释区分 IE 浏览器

　　最简单的区分 IE 浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍 IE 条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个:

　　使用 CSS 解析器 Hacks 区分 IE

　　虽说 IE 条件注释十分简单好用，但是如果你想把全部的 CSS 放到一个文件里的话，那么你不得不使用别的方法。注意这里的 IE 7 Hack将只对 IE7 有效，因为 IE6 根本不知道 > 选择符。同时你也得注意 > 选择符对于其他浏览器同样是无效的。

html > body #ie7 {*display: block;}

body #ie6 {_display: block;}

　　CSS Hack 区分 Firefox

　　第一个使用了 body:empty 来区分 Firefox 1 和 2 。第二个 hack使用了全部 Firefox 浏览器的专有扩展 -moz。 -moz 只对 Firefox有效，使用这个 Hack 大可不必担心其他浏览器的影响。

body:empty #firefox12 {display: block;}

@-moz-document url-prefix() {#firefox { display: block; }}

　　CSS Hack 区分 Safari

　　Safari 的 CSS hack 与 Firefox 的 hack 看起来很像，使用的是 Safari浏览器的专有扩展 -webkit 且只对 Safari 浏览器有效。

@media screen and (-webkit-min-device-pixel-ratio:0) {#safari { display: block; }}

　　CSS Hack 区分 Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: block; }}

　　然后，全部合在一起便是

CSS Browser Hacks - 52css.com

body p {

display: none;

}

html:first-child #opera {

display: block;

}

html > body #ie7 {

*display: block;

}

body #ie6 {

_display: block;

}

body:empty #firefox12 {

display: block;

}

@-moz-document url-prefix() {

#firefox {

display: block;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

#safari {

display: block;

}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

head~body #opera {

display: block;

}

我来自 Opera 7.2 - 9.5

我是神奇的 Safari

我来自 Firefox

我是你爷爷 Firefox 1 - 2

我是囧 IE 7

我是脑瘸 IE 6

　　CSS Hack 虽好且方便兼容各浏览器，但是通不过 W3C 验证，所以还得自己权衡是否有必要去使用。

seal 2010-12-08 15:39 发表评论

Effective and Powerful CSS Tools & Generators for Designers

seal — Mon, 18 Oct 2010 06:09:00 GMT

摘要: Realizing the increasing demand of useful apps across the web, we regularly feature commercial and free software on instantShift, so decided it was time to bring a roundup of highly essential CSS to... 阅读全文

seal 2010-10-18 14:09 发表评论

Clean vCard: A Free Professional XHTML-CSS vCard Template

seal — Mon, 18 Oct 2010 06:06:00 GMT

Once Again, We’ve came up with cool freebies giveaway as promised. This is our way of saying thanks to our readers for being part of the instantShift community and helping us make it to where we are right now. We never wait for special occasions to announce good freebies. To continue our grateful attitude to our readers and community in general, we are glad to release this XHTML/CSS Template Clean vCard. It’s our latest high-quality freebies addition for instantShift readers.

“Clean vCard”, as the name implies, it’s Free Professional vCard XHTML/CSS template suitable for any personal visiting card or portfolio related site. And have all the requirements and features of a typical online portfolio. This layout was designed by iBrandStudio and developed by RapidxHTML as an exclusive gift for instantShift readers.

About a year ago we compiled a handy list of 99 High-Quality Free (X)HTML/CSS Templates and “Clean vCard” can be a great addition to that.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other free template that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Main Features of The Template

Colorful, vibrant, and attractive custom design
Modern and beautiful web typeface.
XHTML 1.0 Strict valid.
CSS 3.0 valid.
Tableless and 100% CSS-based layout.
SEO Semantics Markup
Loaded with Jquery.
Well-commented CSS and template PHP files for flexible customization.
WAI 2.0 / Section 508 compatibility
Delivered with source .PSD file.
Contact form PHP version included.
Cross-browser compatible. Tested under modern w3c compliant browsers. IE7+, Firefox 3+, Safari 3+, Opera 10+ and Chrome.

About Designer

iBrandStudio is a site dedicated to help the people for designing their brand identity. To get in touch, you can follow their twitter id @ibrandstudio or grab their RSS Feed for exclusive updates.

About Developer

RapidxHTML is a small team of designers and developers, with a wide range of skills and experience. Each of them know their strengths and weaknesses and how these fit into the big picture.

They offer professional XHTML / CSS markup services at very affordable price. Their combined expertise in eye-catching graphic layout with modern web design standards built into one of the most powerful systems in the world. You can follow them on twitter as @rapidxhtml

Agreements

“Clean vCard” is a free template release and we thus release it “as is”. We & iBrandStudio & RapidxHTML will not be offering any support to users of this template layout. If you would like some assistance with “Clean vCard” and you’d like to tap into the collective knowledge of the instantShift community.

By downloading this layout, under the terms of the GNU General Public License, it is vital that you understood the following terms and conditions :

You can use them on as many domain names as you wish.
You may use them for your clients’ projects / websites. Number of projects is not limited.
You may not claim intellectual and exclusive ownership to any of the layout.
You may not sub-license the original layout and their individual files to and with anyone else, unless a specific license within the layout states otherwise.
You may modify them. However, you may not modify and then resell, unless the modified versions are drastically different from the originals.
We reserve the right to refuse, cancel, or suspend service at our sole discretion and the right to change or modify these terms with no prior notice.
No support will be provided for any free theme/template/layout by instantShift.
Do not provide the direct download link nor upload “Clean vCard” onto other servers for your own share (Please link to this article instead). If you want to spread the words, just link to this article.

Download The Template files for Free!

The template is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the layout as you wish, but if you are planning to release your modification, please ask for permission first.

Live Demo
Large Preview (.png, 0.15 Mb)
Download "Clean vCard" Template (.zip, 0.68 MB)
Download “Clean vCard” .PSD (.zip, 1.01 MB)

seal 2010-10-18 14:06 发表评论

Design Showcase, Feature Collection

Photography, Digital Showcase and Art inspiration

88 Brilliant Examples of Forced Perspective Photography

Official Link

Photography Inspiration: 40 Magnificent Aerial Photos

Official Link

Surreal Photo Manipulation: 40 Amazing Artwork

Official Link

Russia in color, a century ago

Official Link

15 Logos With Hidden Messages

Official Link

Freebies Resources (Themes, Wallpapers, PSDs, Icons, Vectors, Fonts etc.)

100 Free High Quality WordPress Themes: 2010 Edition

Official Link

100+ Free High Quality Icon Sets for Web Designers and Developers

Official Link

Free Social Media Icon Sets – Best Of

Official Link

40+ Elegant Free CSS/(X)HTML Templates from 2010

Official Link

60 Beautiful Minimalist Desktop Wallpapers

Official Link

30 New Free High-Quality Fonts

Official Link

35 Fresh High-Quality Free Fonts for Professional Designers

Official Link

80+ Useful PSD Templates For Web Designers

Official Link

Tutorials, Tips, Tricks & Hacks Resources

28 HTML5 Features, Tips, and Techniques you Must Know

Official Link

Twitter Background Design – Great Tips and Gorgeous Examples

Official Link

10 Useful iPhone Shortcuts, Tips and Tricks

Official Link

How to Design a Phone Icon in Photoshop

Official Link

Create Gold Ornamental Text in Photoshop

Official Link

Building a Sleek AJAX Email Signup Form

Official Link

Correcting Exposure with the Shadows & Highlights Tool

Official Link

20 Methods for Upping Your Current Web Design Skills

Official Link

How To Create a Detailed Vector Sugar Skull Illustration

Official Link

16 Vital Checks Before Releasing a WordPress Theme

Official Link

CSS, xHTML, Javascript, Ajax and Design Resources

20 HTML Best Practices You Should Follow

Official Link

10 Great Tips for Writing Better And More Comprehensive CSS

Official Link

Commonly Confused Bits Of jQuery

Official Link

8 examples of stunning CSS3 text effects

Official Link

25 Incredibly Useful CSS Snippets for Developers

Official Link

Appz, Tools and Development Resources

80 Of The Most Useful Mac Tools and Utilities

Official Link

50 Awesome New jQuery Plugins

Official Link

8 CSS preprocessors to speed up development time

Official Link

45 Free Applications For Designers And Developers

Official Link

20+ New Apps and Websites for Designers

Official Link

Freelancing Resources

26 Common Freelancing Mistakes to Avoid

Official Link

How I Learned to Stop Worrying and Love My Job

Official Link

6 Online Marketing Mistakes that Will Kill Your Business

Official Link

5 Good Ways to Close a Client Deal

Official Link

Designers, “Hacks” and Professionalism: Are We Our Own Worst Enemy?

Official Link

15 Ways to Get Inspired

Official Link

Doing the Little Things to Please Clients

Official Link

Miscellaneous Resources

Why Your Blog Doesn’t Make Money

Official Link

How Limitations Improve Design

Official Link

Giving Users Some Credit

Official Link

A Design Is Only As Deep As It Is Usable

Official Link

Why SEO Doesn’t Matter Anymore and What You Should Do Instead

Official Link

Reductionism in Web Design

Official Link

5 Reasons Why No One Is Reading Your Email Newsletter

Official Link

The Future of the Internet

Official Link

60 Ways to Increase Your Influence Online

Official Link

seal 2010-09-16 09:17 发表评论

CSS Sprites

seal — Tue, 07 Sep 2010 04:24:00 GMT

CSS Sprites总结：

主要适用CSS的background-position属性，将HTML元素放到背景图片中期望的位置。
通过减少HTTP请求的次数来降低开销，提高加载速度
通过合并图片来降低图片自身的开销（颜色表/格式信息等）

seal 2010-09-07 12:24 发表评论

100+ Free High Quality Icon Sets for Web Designers and Developers

seal — Mon, 30 Aug 2010 06:39:00 GMT

摘要: Icons are the basic requirement of any web related projects and good icons are like a treasure for web designers. The demand for good icons are too much in these days and finding the best icon sets ... 阅读全文

seal 2010-08-30 14:39 发表评论

CSS Image Maps(转)

seal — Thu, 12 Aug 2010 02:47:00 GMT

原帖： http://www.frankmanno.com/ideas/css-imagemap/

Skip to Example

An alternative to image-only CSS maps has been published. If you're looking for an easier way of creating image maps involving a single image, you may be interested in reading CSS Image Maps, Redux

Below is a sample image map that's built entirely using CSS and XHTML. While I've added support for Javascript (item titles are simply displayed beneath the image), I've disabled it in this example -- I've run into a bit of a problem when JS is enabled and CSS is disabled (more details below).

The initial idea for this came from a blog posting I read over at Gina Trappini's blog, Scribbling.net. Her example was well done, but I wanted to attempt the same (or similar) using only CSS.

I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the </code> tag to display notes about a hotspot. Still, somewhat dependant on Javascript/DHTML. In the end, I decided to make use of Doug Bowman's <a href="http://www.alistapart.com/articles/slidingdoors/">Sliding Doors</a> technique combined with a definition list (<code><dl></dl></code>). The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the <code>background-position</code> CSS property to "shift" the image in any direction. By adding a <code>:hover</code> effect to your CSS (in this case to the <code><a></code> tag contained within the <code><dd></code> tag), you can shift the image to a desired position. What I did was build the image map in Photoshop. As you can see by this <a href="http://www.frankmanno.com/ideas/css-imagemap/office.jpg">image</a>, the map is made up of 3 copies of the same image, each with different markings. The top (1 of 3) simply marks the hotspots with numbers, and middle and bottom images (2 and 3 of 3) each contain the rollover effects (white transparancy). You may be wondering why the rollover effect is separated into two separate images. The reason for the separation is due to the overlap in adjacent items (ie: the monitor, the notebook and the floppy disk on the desk). Rather than having a collision between the two items, the rollover effects for neighboring items were separated onto multiple copies of the same image. Essentially, the way this works is by placing the title of the item hotspot into the definition-term tag (<code><dt></dt></code>) of your list, followed by the description in the definition-description tag (<code><dd></dd></code>). The CSS then hides the definition-term (which is really used for when CSS is disabled), as well as the definition-description (displayed upon hover of the anchor) and displays the definition description (in this case, the description of the hotspot(s) you've chosen for your imagemap), and absolutely positions and displays the description upon rolling over the hotspot (also defined in the CSS). The code also degrades gracefully. An <code></code> tag, which displays a non-mapped version of the image map, is hidden using CSS. For those who have CSS disabled, the mapped version of the image (3-piece image) does not display, since it is part of the <code>background</code> CSS property. Rather the non-mapped version will display, along with an unstyled definition list. If you've got the <a href="https://update.mozilla.org/extensions/moreinfo.php?application=firefox&id=60">Web Developer</a> extension for Firefox, go ahead and disable styles. You'll get a better idea of the degredation. A sample of the code is displayed below (view source for full CSS and XHTML): </div> <h2>CSS:</h2> <div> <pre><code> dd#monitorDef{ top: 65px; left: 114px; } dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; } dd#monitorDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; } </code> </pre> </div> <h2>HTML:</h2> <div> <pre><code> <dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#">Here's my 17" Monitor. I wish I had an LCD!</a></dd> <dt id="phone">2. Phone</dt> <dd id="phoneDef"><a href="#">Does this thing ever stop ringing?</a></dd> <dt id="case">3. PC Case</dt> <dd id="caseDef"><a href="#">This is my crazy Linux box! Gotta love that Linux...</a></dd> <dt id="notebook">4. IBM ThinkPad</dt> <dd id="notebookDef"><a href="#">Here's my Linux notebook. Some crazy coding going on.</a></dd> <dt id="floppy">5. External Floppy Drive</dt> <dd id="floppyDef"><a href="#">Floppy Drive. Ancient... I know!</a></dd> </dl> </code> </pre> </div> <div> A working example can be viewed below (the image below was taken from <a href="http://www.kryogenix.org/">The Daily Kryogenix</a>): </div> <div style="float: right; width: 500px; margin-right: 10px;"> <fieldset> <legend>Advertisement</legend> <script type="text/javascript"> </script> <script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script> </fieldset> </div> <div id="ex"> <dl id="officeMap"><dt id="monitor">1. Monitor</dt><dd id="monitorDef"><a href="http://www.frankmanno.com/ideas/css-imagemap/#">Here's my 17" Monitor. I wish I had an LCD!</a></dd><dt id="phone">2. Phone</dt><dd id="phoneDef"><a href="http://www.frankmanno.com/ideas/css-imagemap/#">Does this thing ever stop ringing?</a></dd><dt id="case">3. PC Case</dt><dd id="caseDef"><a href="http://www.frankmanno.com/ideas/css-imagemap/#">This is my crazy Linux box! Gotta love that Linux...</a></dd><dt id="notebook">4. IBM ThinkPad</dt><dd id="notebookDef"><a href="http://www.frankmanno.com/ideas/css-imagemap/#">Here's my Linux notebook. Some crazy coding going on.</a></dd><dt id="floppy">5. External Floppy Drive</dt><dd id="floppyDef"><a href="http://www.frankmanno.com/ideas/css-imagemap/#">Floppy Drive. Ancient... I know!</a></dd></dl> </div> <div> While this may not be the most "ideal" solution out there, it certainly expands upon the examples listed above. I absolutely loved Gina's idea, which is why I attempted to expand on it. Unfortunately, with the current limitations of CSS (as well as certain browsers), I wasn't able to fully replicate the exact functionality of Gina's example. Here's <a href="http://www.frankmanno.com/ideas/css-imagemap/index_js.html">an example</a> that makes use of both CSS and Javascript. One problem I ran into is when CSS is disabled, but Javascript is enabled. Something weird occurs with the definition list. If you know how to correct this, let me know. I'd love to get it working. I did manage to come across <a href="http://evan.nixsys.bz/note/">another attempt at a CSS-based image map</a>, which looks really great. Unfortunately, due to IE's limitations (specifically with only support of the <code>:hover</code> effect on the <code><a></code> tag), it's not cross-browser compatible (yet!). If you have any questions, concerns, and/or suggestions for improvement, please feel free to send me a note: <a href="mailto:frankmanno[-at-]gmail[-dot-]com">frankmanno [-at-] gmail [-dot-] com</a> or leave a comment on <a href="http://blog.frankmanno.com/">my blog</a>. The examples have been succesfully tested in Safari, Firefox (Mac/Win), IE6/Win, and Opera 7.5/Mac. For some odd reason, the Javascript version works in IE5/Mac, whereas the non-Javascript version doesn't. </div> <div id="footer"> Copyright © 2004-2010 <a href="http://www.frankmanno.com/">Frank Manno</a>. </div> <div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/sealyu/" target="_blank">seal</a> 2010-08-12 10:47 <a href="http://www.blogjava.net/sealyu/archive/2010/08/12/328621.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> <h1>CSS样式首字母黑体加大</h1> seal — Tue, 25 May 2010 15:05:00 GMT <div> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://bbs.blueidea.com/index.php"> <html xmlns="http://bbs.blueidea.com/index.php"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>test





9.0text

9.0text

9.0text




seal 2010-05-25 23:05 发表评论



CSS首字母大些 TEXT(转)
seal — Tue, 25 May 2010 15:04:00 GMT
首字母大些1



    HTML 1.0 Strict//EN"       
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    
    

    
    

    
            <title>Drop Caps
    1

    
            

    
    

    
    

    
    class="firstletter">Once
    upon a time in a blueberry bubblegum land covered in pink violets that
    swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy
    yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a
    button bush and as intelligent as a peach mystic from the Unscented
    Hills (not the Scented Hills - the mystics there were not too bright)
    and was an adored member of the raspberry family but she was an unhappy
    raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti
    River.


    
    

    
    


复制代码
首字母大些
2使用图片



    XHTML 1.0 Strict//EN"     
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    
    

    
    

    
            Drop Caps 2

    
            

    
    

    
    

    
    Once upon
    a time in a blueberry bubblegum land covered in pink violets that
    swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy
    yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a
    button bush and as intelligent as a peach mystic from the Unscented
    Hills (not the Scented Hills - the mystics there were not too bright)
    and was an adored member of the raspberry family but she was an unhappy
    raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti
    River.


    
    

    
    


复制代码
首字母大些3使用
伪元素



    

    
    

    
    

    
            Drop Caps 3 (using
    'first-letter')

    
            

    
    

    
    

    
    Once upon a time in a blueberry bubblegum land covered
    in pink violets that swayed to the rhythm of "My Baby Just Cares for
    Me" there lived a podgy yet attractive raspberry fairy called Bedooda.
    Bedooda was as tall as a button bush and as intelligent as a peach
    mystic from the Unscented Hills (not the Scented Hills - the mystics
    there were not too bright) and was an adored member of the raspberry
    family but she was an unhappy raspberry fairy. As unhappy as a lost
    sunfish from the Sweet Spaghetti River.


    
    

    
    


复制代码


seal 2010-05-25 23:04 发表评论


让 IE6, 7和 8支持CSS3 (转)
seal — Wed, 28 Apr 2010 13:42:00 GMT

我们都知道IE6，7并不支持CSS3的属性，IE8也不能很好的支持CSS3。但是有一个小脚本能够做到，它可以让IE支持
CSS3，包括：border-radius (rounded), box-shadow ( shadow), text-shadow等……
如果你需要一个支持CSS3 的box content，你需要添加一行代码：
behavior: url(ie-css3.htc);
代码：
.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also
Internet Explorer 6+ using IE-CSS3 */
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers
and IE6+ using IE-CSS3 */



  behavior: url(ie-css3.htc); /* This lets IE know to call
the script on all elements which get the 'box' class */
}
下载此脚本：http://fetchak.com/ie-css3/ie-css3.htc



点击查看详情：http://fetchak.com/ie-css3/



seal 2010-04-28 21:42 发表评论


CSS Color Names
seal — Tue, 06 Apr 2010 05:26:00 GMT
     摘要: The table below provides a list of the color names that are supported
by all major browsers.
Click on a color name (or a hex value) to view the color as the
background-color
along with different t...  阅读全文

seal 2010-04-06 13:26 发表评论


99款高质量免费(X)HTML/CSS模板（转）
seal — Fri, 19 Mar 2010 06:49:00 GMT
     摘要: 大家都清楚一个网站象征着你和你的品牌，这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注，它并不代表最基本的(X)HTML/CSS很丑、很杂乱和单调。彬Go将向大家推荐99个高质量的免费(X)HTML/CSS模板，你可以用于自己或公司企业的网站。

您还可以参考以下(X)HTML/CSS相关教程及资源:
《30个基于CSS的导航和按钮优秀设计教程》
《20...  阅读全文

seal 2010-03-19 14:49 发表评论


你需要了解的21个CSS惊人技巧(转)
seal — Fri, 19 Mar 2010 06:36:00 GMT

　级联样式表(CSS)在当代Web设计中已经成为重要的环节，如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧，相信其中必有你想不到的。还等什么，继续往下看吧！



您还可以参考以下CSS相关教程及资源:

《CSS Sprites(CSS图像拼合技术)教程、工具集合》

《学无止境的CSS(xHTML+CSS技巧教程资源大全)》

《精选30个优秀的CSS技术和实例

《使用CSS为图片添加更多趣味的5种方法》
1.CSS跨浏览器幻灯片


点击上图查看清晰原图

演示了如何仅适用CSS打造一个跨浏览器的图片画廊
2.基于CSS的图片地图


这个教程演示了如何使用纯CSS创建一个”疯狂”的图片地图。
3.纯CSS无JavaScript的LightBox


点击上图查看清晰原图
4.CSS图片替换技术制作的按钮


使用CSS将表单提交按钮替换为图片，如果禁用CSS将变回普通按钮。
5.用CSS实现动画导航菜单

6.用CSS创建类似树形导航菜单

7.CSS渐变文字效果

8.CSS目录菜单设计


点击上图查看清晰原图

很容易理解的关于使用CSS border属性或CSS背景图属性实现目录菜单的教程。
9.使用CSS负margin创建自适应布局

10.使用CSS固定你的页脚


点击上图查看清晰原图

你也许会遇到这种情况:当你为每个页面设置相同的页脚后，有些页面的主题内容量很少，使得页脚自动向上移动，看上去的浏览器下面很空。这个教程将教你如何使用CSS固定页脚在页面底部来解决这个头疼的问题。
11.简单、灵活的CSS面包屑导航

12. 为你的博客创建时髦的引用(Pullquotes)

13.CSS实现的柱状图表

14.如何为链接列表创建块级悬停效果

15.CSS多列列表

16.用CSS Sprites技术实现日期显示

17.使用CSS美化你的日期和评论

18.使用CSS创建图片浏览器


点击上图查看清晰原图
19.创建CSS图片预载
无需JavaScript，仅使用CSS背景图属性实现图片的预载。
20.从页面底部淡出效果


点击上图查看清晰原图
21.创意且很酷的CSS边框属性







seal 2010-03-19 14:36 发表评论


IE6、IE7、FireFox CSS兼容的min-height语法（转）
seal — Thu, 18 Mar 2010 01:56:00 GMT
     摘要: 老旧的IE6不支持很多CSS语法，而其中的一些又是非常有用的，例如min-height、min-width、max-height、max-width等。利用IE独有的样式表达式语法就能解决这一问题。
position: fixed;
#position: fixed;
_position: absolute;
第一排给Firefox以及其他浏览器看
第二排给IE7（可能以后的IE8、IE...  阅读全文

seal 2010-03-18 09:56 发表评论


电子商务类站点终极资源大全（转）
seal — Thu, 25 Feb 2010 03:04:00 GMT

电
子商务网站和普通网站一样，需要良好的设计，除此之外，电子商务站点还有许多额外的东西需要考虑，后台支撑程序，购物车，结算，产品目录，产品搜索与导
航，一个优秀的电子商务站点会引导用户快速找到他们需要的货品并顺畅地完成购买。本文搜集了上百种与电子商务网站设计相关的资源。


1. 设计灵感与借鉴资源 

A。通用资源



20 of the Best e-commerce Websites - 20 个最佳电子商务网站







Cart Craze – 电子商务网站设计展示







23 Excellent Examples of How to Design Online Stores – 25个优秀的电子商务网站设计案例







20 Well Designed E-Commerce Websites – 20 个设计出众的电子商务网站







50 Inspirational e-commerce Website Designs – 50 个电子商务网站设计样例







35 Excellent e-commerce User Interface Designs – 35个出色的电子商务类站点UI设计





B. 按钮 

107 Add to Cart Buttons of the Top Online Retailers – 107 个购物车按钮设计







80 Examples of Add to Cart Buttons for Design Inspiration – 80个购物车按钮设计样例







20 e-commerce Add To Cart Buttons For Your Inspiration – 20个购物车按钮展示







"Add to Cart" Button Showcase – 购物车按钮展示





2. 购物车与电子商务平台 A. 独立购物车 

PrestaShop – 一个免费，开源购物车，灵活，界面直观。







OpenCart – 基于 PHP 的免费，开源购物车。支持产品预览，自动图片尺寸，支持可下载类虚拟产品。







Magento – 开源电子商务平台，包含免费的社区版和收费的企业版。







CubeCart – 购物车程序，有两个版本，包括一个免费版。







Zen Cart – 免费开源购物车，包括各种免费扩展。







osCommerce – 开源，免费的购物车，已经应用到超过 225000 在线商店。







Digistore – 基于 osCommerce 的免费，开源购物车。







StoreSprite – 一个免费但功能强大的，基于 PHP/MySQL 的购物车。







BossCart – 基于 PHP 的购物车，含免费版和高级收费版。







FatFreeCart – 一个通过复制粘贴代码就能实现的购物车，支持 Paypal 和 Google Checkout，无需注册和安装。





C. 插件 

WordPress e-Commerce – 用于 WordPress 的免费，开源电子商务插件。







Shopp – 用于 WordPress 的超简单的购物车插件。







Ubercart – 用于 Drupal 5/6 的购物车插件。







Drupal e-Commerce – 用于 Drupal 的电子商务插件，支持 Paypal，Authorize.net 以及其它支付方式。







VirtueMart – 用于 Joomla 的免费购物车。







Seber Cart – 用于 Joomla 的小巧，易用的购物车。







Joomla jQuery Cart – JCart 是一个易于安装，定制的，免费的 Ajax 购物车。








这是电子商务类站点终极资源大全的第二部分，本部分搜集的是海量的设计资源，包含与电子商务网站设计相关的模板，主题，图标，素材等。本文的第一第三部分请参阅：电子商务类站点终 极资源大全（上）（下）。

3. 图标与设计素材
A. 电子商务网站主题
35  Free High-Quality E-Commerce Templates – Smashing Magazine 搜集的非常出色的电子商务网站主题。

25  Magento Templates for Your E-Commerce Business – 25 套 Magento 主题

20+  Best e-commerce (WordPress Themes, Templates, Icons, Flash Sites)  Collection – 最佳电子商务主题集。

The  Clothes Shop Theme – 基于 WP 的布艺网店主题。

The  Furniture Store Theme – 基于 WP 的家居网店主题。

enVirashop – 用于 WP 的电子商务主题

wpShop  Reloaded – 一套 WP 网店主题

RGBSTore  e-commerce – 一套电子商务 HTML 模板，支持 Magento, osCommerce, Zen Cart 等

Boutique –  一套优雅的电子商务 HTML 模板

Sancart – 一套简单的 OpenCart 模板

OScomm  E-Commerce Template – 一套 e-commerce HTML 模板

ClassyShop – 使用 960 网格框架设计的 e-commerce 模板

Store Theme – 一套来自 Templatic 的主题，能将标准 WP 换成在线网店

Crafty  Cart Theme – 另一个将 WP 变成在线网店的主题

SimpleCart(js) – 还有一个

Market Theme – 这个也是

ShopperPress – WP 网店主题，支持 Google Checkout, PayPal, Authorize.net 等支付方式

B. 设计素材
e-commerce  Web Elements, Dark Grey & Green – 一套绿色系的电子商务网站素材

Web  2.0 Button (e-commerce #2) – 一套电子商务网站按钮集

e-commerce  Web Elements – 一套电子商务设计素材，可以自行配色

Web  Pack (Price Table, Banner, Buttons…) – 一套黑白灰色系设计素材

Price Table – 价格表素材

Colorful  Pricing Table – 多彩的价格表

Pricing  Tables – 5 Pack – 5 套价格表素材

Pricing  Tables – 价格表，包含功能清单

Super  Bright Pricing Tables – 各种配色的价格表

C. 通用图标



Vector  Free Shipping Bag Set – 矢量购物袋

Free  Shipping Tag Icon – 矢量标签

13  E-Commerce Icons – 13 套电子商务网站图标

Universal  Icons – Set 16 (Shopping) – 来自 iStockPhoto 的电子商务网站图标素材

Sale  and Shopping Icons – Alto Series – 另一套

Shopping  & Consumerism Icons – White or Black Series – 来自 iStockPhoto 的图标

Set  of 77 Web Icons – Web 图标集

BlueSakura – 45个图标，包括购物车图标

Icon  Set n9 – Commerce – 一套电子商务网站图标

Icon  Set n8 – Commerce – 另一套

Stylish  Cardboard Tag Icons – 挂牌

Beautiful  e-commerce Icons – 来自 Nettuts+ 的图标，包括购物车等

Hola  Icons – Shopping – 一套漂亮的电子商务图标

Simple  Icons on Black Background – Set 4 – 灰色系图标集，包括购物车等

Shopping  Icons Set – 一套明亮的电子商务图标

Shopping  Icons Fresh Collection – Set 10 – 很卡通的电子商务图标

Smooth  Icon Set – 一套电子商务图标

Shopping  Icons Retro Revival Collection – Set 9 – 一套怀旧风的电子商务图标

Green  Icons Retro Revival Collection – Set 5 – 绿色系的

Shopping  Icon Set (Isometric) – 黄色系的

E-Commerce  Icon Set – 青色系的电子商务图标

Themes  Ultimate Icon Set – 电子商务图标




原帖地址： http://www.hongkiat.com/blog/e-commerce-design-resources-the-ultimate-round-up/



seal 2010-02-25 11:04 发表评论


Web网页配色方案及安全色谱（转载）
seal — Sat, 16 Jan 2010 03:40:00 GMT
Web网页配色方案 



一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。 



1. 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 



2. 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 



3. 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。 



4. 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。 



二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。 



1. 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。 



2. 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。 



3. 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 



4. 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。 



三、
蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深
远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、
橙、白等色，均不会对蓝色的性格构成较明显的影响力。 



1. 如果在蓝色中黄的成份较多，其性格趋于甜美、亮丽、芳香。 



2. 在蓝色中混入小量的白，可使橙色的知觉趋于焦躁、无力。 



四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 



1. 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 



2. 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 



3. 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。 



五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。 



1. 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。 



2. 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。 



3. 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。 



六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。 



1. 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。 



2. 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 



3. 在白色中混入少量的蓝，给人感觉清冷、洁净。 



4. 在白色中混入少量的橙，有一种干燥的气氛。 



5. 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉。 



6. 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。 



明白了配色方案，在具体操作的时候少不了会用到： 



安全色谱 





    
        
            Snow 
            255 250 250 
            #FFFAFA 
        
        
            GhostWhite 
            248 248 255 
            #F8F8FF 
        
        
            WhiteSmoke 
            245 245 245 
            #F5F5F5 
        
        
            Gainsboro 
            220 220 220 
            #DCDCDC 
        
        
            FloralWhite 
            255 250 240 
            #FFFAF0 
        
        
            OldLace 
            253 245 230 
            #FDF5E6 
        
        
            Linen 
            250 240 230 
            #FAF0E6 
        
        
            AntiqueWhite 
            250 235 215 
            #FAEBD7 
        
        
            PapayaWhip 
            255 239 213 
            #FFEFD5 
        
        
            BlanchedAlmond 
            255 235 205 
            #FFEBCD 
        
        
            Bisque 
            255 228 196 
            #FFE4C4 
        
        
            PeachPuff 
            255 218 185 
            #FFDAB9 
        
        
            NavajoWhite 
            255 222 173 
            #FFDEAD 
        
        
            Moccasin 
            255 228 181 
            #FFE4B5 
        
        
            Cornsilk 
            255 248 220 
            #FFF8DC 
        
        
            Ivory 
            255 255 240 
            #FFFFF0 
        
        
            LemonChiffon 
            255 250 205 
            #FFFACD 
        
        
            Seashell 
            255 245 238 
            #FFF5EE 
        
        
            Honeydew 
            240 255 240 
            #F0FFF0 
        
        
            MintCream 
            245 255 250 
            #F5FFFA 
        
        
            Azure 
            240 255 255 
            #F0FFFF 
        
        
            AliceBlue 
            240 248 255 
            #F0F8FF 
        
        
            lavender 
            230 230 250 
            #E6E6FA 
        
        
            LavenderBlush 
            255 240 245 
            #FFF0F5 
        
        
            MistyRose 
            255 228 225 
            #FFE4E1 
        
        
            White 
            255 255 255 
            #FFFFFF 
        
        
            Black 
            0 0 0 
            #000000 
        
        
            DarkSlateGray 
            47 79 79 
            #2F4F4F 
        
        
            DimGrey 
            105 105 105 
            #696969 
        
        
            SlateGrey 
            112 128 144 
            #708090 
        
        
            LightSlateGray 
            119 136 153 
            #778899 
        
        
            Grey 
            190 190 190 
            #BEBEBE 
        
        
            LightGray 
            211 211 211 
            #D3D3D3 
        
        
            MidnightBlue 
            25 25 112 
            #191970 
        
        
            NavyBlue 
            0 0 128 
            #000080 
        
        
            CornflowerBlue 
            100 149 237 
            #6495ED 
        
        
            DarkSlateBlue 
            72 61 139 
            #483D8B 
        
        
            SlateBlue 
            106 90 205 
            #6A5ACD 
        
        
            MediumSlateBlue 
            123 104 238 
            #7B68EE 
        
        
            LightSlateBlue 
            132 112 255 
            #8470FF 
        
        
            MediumBlue 
            0 0 205 
            #0000CD 
        
        
            RoyalBlue 
            65 105 225 
            #4169E1 
        
        
            Blue 
            0 0 255 
            #0000FF 
        
        
            DodgerBlue 
            30 144 255 
            #1E90FF 
        
        
            DeepSkyBlue 
            0 191 255 
            #00BFFF 
        
        
            SkyBlue 
            135 206 235 
            #87CEEB 
        
        
            LightSkyBlue 
            135 206 250 
            #87CEFA 
        
        
            SteelBlue 
            70 130 180 
            #4682B4 
        
        
            LightSteelBlue 
            176 196 222 
            #B0C4DE 
        
        
            LightBlue 
            173 216 230 
            #ADD8E6 
        
        
            PowderBlue 
            176 224 230 
            #B0E0E6 
        
        
            PaleTurquoise 
            175 238 238 
            #AFEEEE 
        
        
            DarkTurquoise 
            0 206 209 
            #00CED1 
        
        
            MediumTurquoise 
            72 209 204 
            #48D1CC 
        
        
            Turquoise 
            64 224 208 
            #40E0D0 
        
        
            Cyan 
            

            
        
    





希望本文能使各位读者制作的网页更加多姿多彩。


seal 2010-01-16 11:40 发表评论


网页典型配色方案（转载）
seal — Sat, 16 Jan 2010 03:39:00 GMT


 
screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">



screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">

screen.width-333)this.width=screen.width-333
}
}
}" border="0">


seal 2010-01-16 11:39 发表评论


很经典的配色方案
seal — Sat, 16 Jan 2010 03:37:00 GMT

很经典的配色方案
 


  





点击图片放大查看







点击图片放大查看



附：背景与字体的搭配经验



bgcolor="#f1fafa"　//做正文的背景色好，淡雅



bgcolor="#E8FFE8" //做标题的背景色好，与上面的颜色搭配很协调这两种颜色可以配黑字或FONT COLOR="#800080"



bgcolor="#E8E8FF"　//做正文的背景色好，字体配黑色较好



bgcolor="#8080C0"　//上配黄色白色字体较好



bgcolor="#E8D098"//上搭配浅蓝色或蓝色字体较好





bgcolor="#EFEFDA" //上搭配浅蓝色或红色字体较好



bgcolor="#F2F1D7"//配黑字素雅,红字醒目



bgcolor="#336699" //配白字做标题较好



bgcolor="#6699CC"和bgcolor="#479AC7"和bgcolor="#66CCCC"和bgcolor="#00B271"和bgcolor="#B45B3E"配白字都较好看 //可做标题



bgcolor="#FBF8EA"和bgcolor="#D5F3F4"和bgcolor="#D7FFF0"和bgcolor="#F0DAD2"和bgcolor="#DDF3FF"配黑字都较好看 //一般做正文以上配色方案都比较淡雅。



浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果


seal 2010-01-16 11:37 发表评论


用CSS使DIV水平居中 (转)
seal — Thu, 14 Jan 2010 12:49:00 GMT

一，用CSS使DIV层水平居中



对需要水平居中的DIV层添加以下属性: 

   margin-left: auto;

   margin-right: auto; 
这样在FF中已经居中了,可是在IE中看还是没有居中!



问题并不在CSS而在XHTML网页本身.



需要加上这样的代码才能使得上述设置有效果: 
 
如何使DIV居中



主要的样式定义如下： 
body { TEXT-ALIGN: center; }



#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 
说明：



首先在父级元素定义TEXT-ALIGN:
center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定
时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”



需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只



要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。



如何使图片在DIV 中垂直居中



用背景的方法。举例： 
body{ BACKGROUND: url(http://www.w3cn.org/style/001/logo_w ... )#FFFno-repeatcenter; } 
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"



如何使文本在DIV中垂直居中



果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下： 




















test content








 
说明：



vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。



CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中 
















 
另一方法: 


***************************************



二，用JS使层居中



把如下代码加入区域中 


















□::BEST4U论坛::




style="CURSOR: hand" width=21>х






height=91>欢迎光临本站!

本站域名:
http://webform.cn 











seal 2010-01-14 20:49 发表评论


Choosing a DOCTYPE
seal — Fri, 08 Jan 2010 01:11:00 GMT
According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.
If standard HTML does not meet your needs but you still wish to gain the benefits of HTML validation, see the section on using a custom DTD.
The following DOCTYPEs are commonly used:

"http://www.w3.org/TR/html4/strict.dtd">

This declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames,
and link targets are not allowed in HTML 4 Strict. By writing to HTML 4
Strict, authors can achieve accessible, structurally rich documents
that easily adapt to style sheets
and different browsing situations. However, HTML 4 Strict documents may
look bland on very old browsers that lack support for style sheets.
Newer browsers such as Internet Explorer 5 for Mac,
Netscape 6, and Mozilla use a
standards-compliant rendering for HTML 4 Strict documents. These browsers
use a "quirks" mode for most other document types to emulate
rendering bugs in older browsers.

"http://www.w3.org/TR/html4/loose.dtd">

This declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.

Newer browsers such as Internet Explorer 5 for Mac,
Netscape 6, and Mozilla use a
standards-compliant rendering for HTML 4.01 Transitional documents
that include the URI
of the DTD
in the DOCTYPE. These browsers use a "quirks"
mode to emulate rendering bugs in older browsers if the
URI is
omitted:



"http://www.w3.org/TR/html4/frameset.dtd">

This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This declares the document to be XHTML 1.0 Strict.
XHTML 1.0 Strict is an XML
version of HTML 4 Strict.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This declares the document to be XHTML 1.0 Transitional.
XHTML 1.0 Transitional is an XML
version of HTML 4 Transitional.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This declares the document to be XHTML 1.0 Frameset.
XHTML 1.0 Frameset is an XML
version of HTML 4 Frameset.

This declares the document to be HTML 3.2. HTML 3.2 is well supported by most browsers in use. However, HTML 3.2 has limited support for style sheets and no support for HTML 4 features such as frames and internationalization.

This declares the document to be HTML 2.0. HTML 2.0
is widely supported by browsers but lacks support for tables, frames,
and internationalization, as well as many commonly used presentational
elements and attributes.



seal 2010-01-08 09:11 发表评论


IE下div使用margin:0px auto不居中的原因
seal — Fri, 08 Jan 2010 01:08:00 GMT
一般在将div居中显示时，使用css：

divX {margin:0 auto;}


此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下：

margin: 0 auto 看看内容居中否


如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“”声明文本居中，即

[ Copy ] [ Run ] [ Save ]



margin: 0 auto 看看内容居中否（加了body文本居中）


然后，单个div的CSS居中，非要扯上？

于是在不采用“”声明文本居中的情况下，将DOCTYPE声明加上，立马有效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



margin: 0 auto 看看内容居中否（加了DOCTYPE声明）


其实原理都知道，就是因为用这个“懒人”的HTML调试框，懒得去输入些忘却的东西，到头来还以为真相就是如此呢。。。

同样，关于“一边固定，一边自动扩展”的例子，加与不加在IE效果完全不同

如下是不加的情况：

[ Copy ] [ Run ] [ Save ]

http://www.w3.org/1999/xhtml">





CSS布局













#dv1 {

background-color: #3399FF;

float: left;

width: 280px;

} 






#dv2 {

background-color: #FFCC00;

width:100%;

}









如下是添加了DOCTYPE声明

[ Copy ] [ Run ] [ Save ]

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">





CSS布局1













#dv1 {

background-color: #3399FF;

float: left;

width: 280px;

} 






#dv2 {

background-color: #FFCC00;

width:100%;

}









下次再也不信HTML调试框了，还是用软件，呵呵。



引用W3C的一些关于DOCTYPE的说明

http://www.w3cn.org/article/step/2004/26.html

引用 

什么是DOCTYPE

上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。



其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。



要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。



XHTML 1.0 提供了三种DTD声明可供选择：



过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。完整代码如下：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">



我们选择什么样的DOCTYPE

理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0
Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通
过W3C的代码校验。



注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。



打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。



补充

DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。





seal 2010-01-08 09:08 发表评论


CSS中关于clearfix对float的使用(转)
seal — Thu, 07 Jan 2010 06:50:00 GMT
使用float时出现的问题
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

这是一个浮动在红框的层中的一个层

style="border:1px solid green;float:left;color:green;"
这是红框的层中的内容
解决的方法
陈旧的方法--使用clear:both
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。

这是一个浮动在红框的层中的一个层

style="border:1px solid green;float:left;color:green;"
这是红框的层中的内容，红框层后面还嵌入了一个没有内容的层

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。
CSS的方法--使用：after
这种方法在在文章《How To Clear Floats Without Structural Markup》中被提到。
/*需要用到的CSS样式表的最初设想*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}
/*实际用到的CSS样式表(针对不同浏览器做了优化)*/

.clearfix:after {

content: ".";

display: block;

height: 0;

clear:both;

visibility: hidden;

}

.clearfix {display: inline-table;}

/* Hides from IE-mac "*/ *

html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

这是一个浮动在红框的层中的一个层

style="border:1px solid green;float:left;color:green;"
这是红框的层中的内容,对这个红框层应用了上面提到的CSS类.clearfix
CSS的方法--使用overflow
前面的2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《 Super simple clearing floats》中被广泛讨论。
/*需要用到的CSS样式表的最初设想(对IE不起作用)*/

.clearfix2{overflow: auto}
/*实际用到的CSS样式表(针对不同浏览器做了优化)*/

.clearfix2{

_height:1%; /*height前面的下划线是必须的*/

overflow:auto;

}


这是一个浮动在红框的层中的一个层

style="border:1px solid green;float:left;color:green;"
这是红框的层中的内容,对这个红框层


seal 2010-01-07 14:50 发表评论


使用CSS定位页面的“footer”
seal — Sun, 03 Jan 2010 12:36:00 GMT
这里还有一种实现技术：http://code.google.com/p/cleanstickyfooter/



“如果有一个footer层，我想让他固定出现在整个页面的最下方，不随着页面中的内容而变化，CSS中要怎样设？比如里面是一些版权信息。因为我整页的内容比较少，footer老跟着内容跑到上面去，很不美观。”

这个问题如果在以前使用表格布局，并不困难，只要给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度
已经属于废止的属性，应该避免使用，而且使用Web标准以后，也不在提倡使用表格布局了，那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端
呢？
下面就来讲解它的实现方法。
基本思路
首先考虑外层设置一个容器div，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个div设置为#container的子div，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的效果。
点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到Footer部分的效果。
代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。


<body>

    <div id="container">

        <div id="content">

            <h1>Contenth1>

            <p>请改变浏览器窗口的高度，以观察footer效果。p>

            <p>这里是示例文字，………，这里是示例文字。p>

        div>

        <div id="footer">

            <h1>Footerh1>

        div>

    div>

body>
然后设置CS


body,html {

        margin: 0;

        padding: 0;

        font: 12px/1.5 arial;

        height:100%;

    }

    #container {

        min-height:100%;

        position: relative;

    }

    #content {

        padding: 10px;

        padding-bottom: 60px;  

        /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/

    }

    #footer {

        position: absolute;

        bottom: 0;

        padding: 10px 0;

        background-color: #AAA;

        width: 100%;

    }

    #footer h1 {

        font: 20px/2 Arial;

        margin:0;

        padding:0 10px;

    }
要点分析
1：首先要给html和body元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使#container的高度撑满整个浏览器窗口。
至于为什么用同时设置html和body元素，是因为Firefox和IE认为的根元素不一样，因此这里都给他们设置上。
2：然后把#container的高度也设置为100%
（第8行），但是要注意，这里使用了“min-height”属性，而不是普通的height属性，这是因为我们要考虑到，如果#content中的内容
如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#container的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，
从而遮盖了#content中的内容。
而使用min-height属性的作用就是使#container的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
但是需要说明的是，在Firefox和IE7中，支持min-height属性，而IE6种，并不支持min-height属性，但是“歪打正着”
的是，IE 6中，会把min-height属性解释为height属性，但是IE
6中height属性的效果却是min-height本来应该具有的效果，也就是说，在IE
6中，子div的高度会撑大父div的高度。所以这样正好可以实现在IE6、IE7和Firefox中都可以正确实现我们希望的效果了。
3：接下来，将#container设置为相对定位（第9行），目的是使他成为它里面的#footer的定位基准，也就是所谓的“最近的定位过的祖先元素”。
4：然后把#foooter设置为绝对定位（第17行），并使之贴在#container的最下端（第18行）。
5：但是要注意，如果当我们把#foooter贴在#container的最下端以后，他实际上已经和上面的#content这个div重叠了，为
了避免覆盖#content中的内容，我们在#contetn中设置了下侧的padding，使padding-bottom的值等于#footer的高
度（第13行），就可以保证避免覆盖#content的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。
6：剩下的就没有更多技术需要解释了。如果读者对上面的解释还不十分理解，说明您对CSS的基本概念还了解得不够，先仔细把CSS的核心原理和基本概念彻底搞清楚，再来看这些代码就是很轻松的了。
点击这里察看案例页面效果。
案例总结
这个看起来并不复杂的代码，去包含了很多CSS的核心概念和原理，因此这里又回到了我们曾经多次给读者的建议上：一定要扎扎实实把CSS的核心原理
搞清楚，特别是CSS的4大核心基石：盒子模型、标准流、浮动、定位。只有把这些核心基础掌握到烂熟于胸的程度，才能游刃有余地进行设计。






原理：为了让浏览器识别高度为100%，设置html、body的height:
100%，同时把所有元素的margin和padding设置为0，这样就等于整个浏览器窗口的总高度了，把footer置于最下方，这是footer就
超出这“100%”的范围了，为让footer
能够刚好在最下方，给footer加一个等于自身高度的上方的负边距（负的margin）强制把它向上推一个自身的高度，即 margin-top:
负的数值;
。但当内容超过一屏会发现内容会覆盖在footer的上方。所以还要给内容部分设置下方内补丁等于footer的高度，强制把内容部分向上推一个
footer的高度就OK了。（参考文章）


seal 2010-01-03 20:36 发表评论


CSS教程:完美的绝对底部
seal — Sun, 03 Jan 2010 11:55:00 GMT
网页制作Webjx文章简介：CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
先说我们为什么会使用到这个CSS底部布局解决方案:
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。



对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。



下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。



甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
代码写法
HTML代码:



















说明: 使用这个布局的前提，就是footer要在总的div容器之外，footer使用一个层，其它所有内容使用一个总的层。如果确实需要到添加其它同级层，那这个同级层就必须使用position:absolute进行绝对定位。
CSS代码:
下面是主要的CSS代码，让你的底部可以位于窗口的最下面:
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */

#footer {position: relative;

margin-top: -150px; /* footer高度的负值 */

height: 150px;

clear:both;}
说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。
就是这么简单，不过还没完。如果你的主体是使用悬浮布局，还得解决一些浏览器的兼容问题，这里使用的重点是为了Goolge Chrome。
对#main部份进行著名的Clearfix Hack:
.clearfix:after {content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;}

.clearfix {display: inline-block;}

/* Hides from IE-mac "*/

* html .clearfix { height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */
注: 该方案测试于两栏悬浮布局，兼容各大主流浏览器，包括Google Chrome。
P.S:

    网络上之前比较知名的footer布局有Ryan Faits创造的，不过它的方法在HTML代码中会有一个空的div层。严格来说，是不符合语义网代码标准的。 
    另外，还有一篇Exploring Footers article from A List Apart，但使用了一些JavaScript代码。 
    这样一比较，上面看似简单的纯CSS，就显得伟大许多了。 

OK, 没有了。如果没看懂，具体的使用方法和说明可以到原站查看。


seal 2010-01-03 19:55 发表评论


优秀的CSS布局大全
seal — Mon, 28 Dec 2009 05:55:00 GMT
这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。

    Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。

    
    CSS Layouts – 另一个专门收集CSS布局的网站。
    Dynamic Drive CSS Layouts – Dynamic Drive对于喜欢设计的人来说是比较熟悉的网站了，它们同样提供有很多CSS布局，两栏，三栏，自适应宽度，固定宽度都有。
    Nice and Free CSS Layouts – 12 个免费的CSS布局。

    
    Strictly CSS – 10个CSS布局。
    Maxdesign – 多种CSS布局，且含有详细的说明教程。
    CSSplay
    ThreeColumnLayouts, by CSS Discuss
    CSS Intensivstation
    Code-Sucks -
    CSS Tinderbox
    Jimmy Lin – 8 个简单的 CSS/XHTML 模板
    Little Boxes – 16 个CSS布局

    
    Ruthsarian –  免费的CSS layouts ，还有CSS下拉菜单
    Mitchbryson
    TJK Design
    Bluerobot
    csscreator – CSS 布局生成器.



seal 2009-12-28 13:55 发表评论


IE中td内容为空时不显示边框的解决办法（转）
seal — Sat, 26 Dec 2009 01:35:00 GMT
在ie（经测试IE8已经不存在此问题）中如果td标签中没有内容时，存在不显示边框的问题，最简单的办法就是用javacript，在文档加载完后加入下面的JS：


var aTd=document.getElementsByTagName("td");

for(i=0;i
if(aTd[i].innerHTML=="")aTd[i].innerHTML=" ";

}


当然还有别的办法，在TD所属的那个table用CSS也是可以的


table{ border-collapse:collapse;}




之前总结了下如何用
css 来实现 table 的 border + bordercolordark + bordercolorlight
的边框明暗效果，然后有网友问我为什么他写了一个类似的 css 样式，但只能在 Opera 下正常看到表格的边框效果， IE 下则什么也没有。

于是我跑去下了个 Opera9 一看，确实如此。原因倒也不复杂：因为在 IE 下（ Firefox 似乎和 IE 一致）如果某个 td
的内容为空的话，即便你设置了高度和宽度，这个 cell 的边框样式也是不会被显示出来的； Opera
则不管是否有内容与否，一概应用样式来渲染。这个问题刚毕业那会就碰到了，当时部门的科长来问我，后来我跟他说：给每个空的 td 加上  
就行了。以后每次碰到这个问题，我就统统采用这个简单粗暴有效的方式来解决了。
　　但今天卯足了劲研究了几下，从 Jiarry 那知道原来 css 语法是允许我们对这些缺省行为进行改变的：使用 border-collapse:collapse; 和 empty-cells:show; 就可以让消失的边框显现出来。

class="test1": 加 border-collapse:collapse;


.test1{

border:1px solid #999999;

border-collapse:collapse;

width:60%

}

.test1 td{

border-bottom:1px solid #999999; 

height:28px; 

padding-left:6px;

}



    
        
            class1 
            这儿有内容
            

            
            

            
            

            
        
        
            这儿有内容
            

            
            

            
            

            
             
        
    



class="test2": 加 border-collapse:collapse; 和 empty-cells:show;


.test2{

border:1px solid black;

border-collapse:collapse;

width:60%

}

.test2 td{

border-bottom:1px solid black; 

height:28px; 

padding-left:6px;

empty-cells:show;

}



    
        
            class2 
            这儿有内容
            

            
            

            
            

            
        
        
            这儿有内容
            

            
            

            
            

            
             
        
    



class="test3": 不加 border-collapse:collapse; 和 empty-cells:show; 的情况下 


.test3{

border:1px solid #999999;

width:60%

}

.test3 td{

border-bottom:1px solid #999999; 

height:28px; 

padding-left:6px;

}



    
        
            class3 
            这儿有内容
            

            
            

            
            

            
        
        
            这儿有内容
            

            
            

            
            

            
             
        
    






seal 2009-12-26 09:35 发表评论


兼容IE和FF的换行CSS推荐样式（转）
seal — Thu, 12 Nov 2009 05:51:00 GMT
本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。
兼容 IE 和 FF 的换行 CSS 推荐样式
最好的方式是

word-wrap:break-word; overflow:hidden;

而不是

word-wrap:break-word; word-break:break-all;

也不是

word-wrap:break-word; overflow:auto;



在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。
word-wrap同word-break的区别
word-wrap:

normal   Default. Content exceeds the boundaries of its container. 

break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
word-break:

normal   Default. Allows line breaking within words. 好像是只对Asian text起作用。

break-all Behaves the same as normal for Asian text, yet allows the
line to break arbitrarily for non-Asian text. This value is suited to
Asian text that contains some excerpts of non-Asian text. 

keep-all Does not allow word breaking for Chinese, Japanese, and
Korean. Functions the same way as normal for all non-Asian languages.
This value is optimized for text that includes small amounts of
Chinese, Japanese, or Korean. 
总结如下：

word-wrap是控制换行的。

使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
break-word是控制是否断词的。

normal是默认情况，英文单词不被拆开。

break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）


ie下：

使用word-wrap:break-word;所有的都正常。
ff下：

如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。

为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。

即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。

对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。

用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。


所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。
另，测试代码如下：




.c1{ width:300px;   border:1px solid red}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 
 
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 

.c3{ width:300px;word-wrap:break-word;word-break:break-all;   border:1px solid green}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 

.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 

.c5{ width:300px;word-break:break-all;   border:1px solid black}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 

.c6{ width:300px;word-break:keep-all;   border:1px solid red}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 

.c7{ width:300px;word-wrap:break-word;overflow:auto;   border:1px solid yellow}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

This is all English. This is all English. This is all English.

全是中文的情况。全是中文的情况。全是中文的情况。

中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. 



seal 2009-11-12 13:51 发表评论


精选31个网站界面设计实践教程（转）
seal — Fri, 25 Sep 2009 14:25:00 GMT

　　设计一个网站从来都不是一件容易的事。如果你去询问一位在该行业有丰富经验的网页设计师，他会告诉你以前根本没有太多关于Web设计/开发的资源、文章和各种沟通交流平台，更不用说高质量免费教程了。
　　如果您打算建立自己的个人网站或者重新设计您的博客的主题，现在看来已经不是很难了。这要感谢那些慷慨的设计师和撰稿者们，现在互联网充满着各
种很棒的教程来帮助你逐步建立自己的网站界面及导航。这篇文章只是让大家浅尝辄止，更多的学习资源大家可以自行寻找。我们以前曾发表过40个非常棒的网站界面设计PHOTOSHOP教程。而今天让暴风彬彬和您一同分享这31个网站界面设计实践教程吧。
您还可以参考彬Go的相关网页设计教程类文章:

《推荐20个关于网站可用性及界面设计的网站》

《网页设计教程:使用Photoshop设计一个高档时尚的网页》

《视频教程:非常酷的3D效果网页设计》 
　　彬Go会经常更新网页设计/前端开发类教程，如果您想所示关注本博客的最新更新教程，欢迎RSS订阅本博客，以便您能第一时间浏览彬Go的最新网页设计教程。 
页头及导航设计
　　为网站创建有效的导航对于网站浏览者的浏览及导航起到至关重要的作用。我们为您精选了以下时尚且简单的导航设计教程，当您掌握这些教程之后，进行各种调节及变化将变得非常容易。
1.Retro Dark Blue Header Design
教您如何设计一个深蓝色复古圆角网站页头。

2.Wii Web Header
　　教您如何设计一个WII风格的网站页头。

3.Colorful Design Studio Header
如何设计一个色彩艳丽的工作室页头布局。

4.Metallic Header Design

5.Nature Theme Header

6.Professional Dark Header
如何为您的网站创建一个简单且有效的网站导航栏。

7.High-Detailed Plastic Navigation Bar
导航菜单可以使用不寻常的文本链接到结构复杂的下拉菜单。这个教程详细描述了设计”塑料”风格导航菜单的过程。

8.Curled Corner
教您如何设计一个光滑的内容区。

9.Green Navigation
如何设计一个绿色发光效果的导航。

10.Blue On Black Navigation Bar
如何结合几种图层样式来设计漂亮而简单的导航栏。

11.Clean White Navigation Bar
简洁是漂亮网站的关键，学习如何使用PHOTOSHOP绘制一个漂亮的导航栏。

12.Modern Web Search Bar
如何设计一个流行的带下拉菜单的搜索栏。

13.Dark Navigation Box
如何使用更多的效果和工具来设计更高级的导航。

14.Clean Blue Navigation Box
如何使用一些工具和效果为网站布局设计一个导航，这种方法同样适用于设计其他内容区等。

15.Create A Professional Gaming Header
如何设计一个专业的游戏网站导航栏。

16.Volkswagen Inspired Navigation
大众汽车风格的导航栏。本教程需要你足够了解PHOTOSHOP。你需要了解图层调色板和如何添加图层样式，并且会使用自定义图形和剪切遮罩。

17.Design A Unique Bookmark Box
如何为您的博客设计独特且专业的书签板块，当然也可用于您的网站。

网站整体布局设计
对于那些想要独立设计自己的网站有没有什么头绪的站长，这里有一些教程能够帮你您从头到尾合计网站的布局。
1.The Art Institute Photoshop Template
简单几步创建时尚的网站模板。

2.Talkmania Arhitecture Layout

3.Creative Studio Web Page
创建工作室网站页面

4.Clean Black And Green Webdesign
简洁的黑色和绿色网页设计

5.Unique Grungy Website Layout
如何设计独特的有破旧感的网站布局

6.Clean Business Layout Tutorial
简洁的商业网站布局设计教程

7.Web 2.0 Blog Layout
本教程包含了一些比较新颖的技术，比如使用有趣的投影元素。

8.The Ultimate Grunge Design Tutorial
本教程将讨论如何使用PHOTOSHOP设计美妙的破旧风格网站布局，其中使用的一些技术是我在其他地方没有看到过的。

9.Real Estate Web Design
设计简洁且有当代风格的房地产相关类型网站。

10.Agency Layout

11.Vibrant Modern Blog Design In Photoshop
使用Adobe Photoshop设计一个色彩鲜明的流行博客布局。

12.Photography Portfolio
设计一个摄影类网站。

13.Konvicted Art

14.Unique Desktop Layout
设计一个独特的桌面布局网站，包括一些常用的办公工具元素。

英文原文:31 Practical (Web) Interface Design Tutorials

翻译原文:精选31个网站界面设计实践教程
转载声明:

原载:彬Go

本文链接:http://blog.bingo929.com/31-practical-web-interface-design-tutorials.html

如需转载必须以链接形式注明原载或原文地址，谢谢合作


seal 2009-09-25 22:25 发表评论


10个非常棒的Ajax及Javascript实例资源网站（转）
seal — Fri, 25 Sep 2009 13:34:00 GMT
　今天，暴风彬彬要向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客，它们提供了相当多的高质量Ajax、Javascript实例及教程，喜欢Ajax和Javascript的朋友绝对不能错过。彬Go曾经还介绍过300多个Javascript导航菜单,有兴趣的话，也可以看一看。
1.Ajax Rain

　　AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例，有一些Demo的确值得你去看一看，即使你不是网页设计(开发)师。
Ajax/Javascript实例:

     EXT JS Date Picker
     jQuery Feed Menu
     jGrowl
     FastFind Menu – Jquery
     Spiffy Accordion




2.Ajax Daddy

　　Ajax Daddy收集了大量漂亮的Web2.0工具，其中一个使用的功能就是，在你把某个Ajax/Javascript实例应用在自己的网站上之前，你可以在它上面先看看效果演示。
Ajax/Javascript实例:

    Flickr Like edit
     MooTools Autocomplete
     SlideShow Viewer
     Prototype window
     Shoutbox




3.Mini Ajax

　　MiniAJAX 是一个新生的网站，收集了少许 DHTML 和 AJAX 脚本, 它的代码片段风格非常实用。
Ajax/Javascript实例:

    Prototype Window – Demo
     AJAX Star Rating Bar – Demo
     Heatmap for your website
     An AJAX contact form
     Digg – like spy script

4.Ajaxian

　　一个接近于门户类型的AJAX资源站点，包括Ajax示例收集，博客，论坛和教程等等。
Ajax/Javascript实例:

    CSSHttpRequest
    Ajaxified Body
    flXHR: Flash based XHR from flensed
    jsTree: jQuery-based JavaScript tree component
    modules.js




5.DHTML Goodies

　　DHTML Goodies是一个收集了大量DHTML、Ajax脚本、Demo和教程的网站。脚本范围涵盖从导航菜单、窗口、日历到图片集合。
Ajax/Javascript实例:

    Quick Edit
    News rotator
    Color picker script
    Chesswidget
    Chained select widget




6.Javascript Kit

　　收集了大量的Javascript教程及脚本资源，当然也有DHTML、CSS和网页设计教程和一个设计师帮助论坛。
Ajax/Javascript实例:

     Rich HTML Ticker
     Scrollers
     Combo Boxes
     Text effects
     Windows, remotes, frames etc




7.Dynamic Drive

　　一个我常去的 JavaScript和 CSS资源网站，即使你是初学者，也能找到DHTML、Javascript、客户端脚本详细的指导。
Ajax/Javascript实例:

     Step Carousel Viewer
     Ajax Pagination script
     All Levels Navigational Menu
     Circling text trail
     Drop Down/ Overlapping Content




8.DHTML Site

　　你能从DHTML Site找到大量游泳的AJAX及DHTML脚本及教程，脚本涵盖页面效果、工具技巧、拖拽式日历、窗口特效及图片集效果。
Ajax/Javascript实例:

     Starbox – rating stars for prototype
     Multibox gallery
     MooMonth
     jQuery Lightbox
     Sliding Panels for jQuery




9.Solutoire

　　这个网站收集了相当多且很棒的javascript和ajax的实例及教程. 还有很多 jQuery、Scriptaculous、mootools等Javascript框架。
Ajax/Javascript实例:

    Uniajax
    Simple Scriptaculous autocomplete
    Build SOA Ajax clients with the Dojo toolkit
    How to Develop WebApps with Ajax, Pt. 1
    GWT Autocompleting Textbox




10.DevSnippets

　　收集了大量Ajax, javascript和CSS资源，在这里你可以提交自己喜欢的Ajax和Javascript实例，也可以为你喜欢的实例投票。
Ajax/Javascript实例:

     jQIR – jQuery Image Replacemen
    The Ajax Suite

阅读英文原文
转载声明:

原载:彬Go

本文链接:http://blog.bingo929.com/10-sources-ajax-javascript.html

如需转载必须以链接形式注明原载或原文地址，谢谢合作


seal 2009-09-25 21:34 发表评论


300+Jquery, CSS, MooTools 和 JS的导航菜单资源(转)
seal — Fri, 25 Sep 2009 13:33:00 GMT
　　如果你是网站前端开发人员，那么对你来说，也许做一个漂亮导航菜单会很得心应手。但今天暴风彬彬要为大家总结各种导航菜单的资源，以便让大家的网站前端开发的工作更方便更快速，只要选择现成的例子就可以应用于自己的网站了。暴风彬彬收集的这些资源，从非常简单的HTML和CSS导航菜单，到非常复杂和高级的JQuery、JavaScript和MooTools技术，这都可以让你轻松实现褪色、滑动、拖动等效果。如果您觉得这些资源值得一用，那就快把本网页收藏以备日后查阅吧！
 



1.Fancy menu - 非常酷的导航菜单:




2. 专为Mac爱好者开发的CSS dock菜单，使用jQuery框架。

下载 dock 菜单



3.37个不同的CSS导航菜单技术：




4.这个导航五年前就有了，但现在看来依然很棒！




5.漂亮的JQuery滑动效果菜单，有四种不同的例子。




6.更新jquery嵌套标签设置,有演示;




7.垂直JavaScript菜单,含子菜单效果。 查看演示




8.13个精选纵向及横向CSS菜单




9.各种不同的CSS菜单教程



10.很全的收集CSS纵向菜单的网站：dynamicdrive.com



11.CSSplay.com，一个非常全面的收集各种CSS菜单的网站，而且经常有更新，推荐！




12.有显示/隐藏效果的菜单 - 有 CSS 和 MooTools两种;




13.Superfish v1.4.8 – jQuery 菜单插件



14.方便的图片标签翻转菜单;




15.模仿Digg.com风格的CSS纵向菜单




16.JavaScript可折叠菜单，查看演示




17.独特的使用jQuery和MooTools的导航菜单;   查看演示




18.CSSmenumaker.com - 提供专业的CSS菜单;






19. 非常酷的 JavaScript 菜单 ，摘自 JavaScriptkit.com;



20. 使用CSS创建的多级下拉菜单并用JQuery进行了改善。查看演示




21. jdMenu 多层次菜单插件 ， jQuery框架 - 纵向多级下拉菜单列表



22. 难以置信的Apple风格导航菜单:




23.折叠风格JQuery菜单




24. 非常酷的使用CSS和 jQuery制作的动画导航菜单:




25. jQuery树插件




26. 35种独特的JQuery菜单演示



27.Jquery 快速导航 - 点击 toogle 菜单, 以弹出导航菜单:




28. jQuery id标签 - 8种不同的很酷的JQuery菜单例子




29. jQuery ContextMenu；轻量级JQuery插件，可以自定义右键弹出的菜单




30. jQuery UI tabs - 可以自定义不同效果的标签菜单，比如：幻灯片效果、淡出效果等…查看演示



31. iconDock jQuery - 有一个模仿 MAC OS X dock效果的菜单;




32.SlidingMenu - 很简单的滑动菜单效果






33. 标签导航
11个使用了滑动门技术的菜单，并且兼容IE浏览器

下载这些菜单



34.另一种CSS标签导航菜单




35.9种不同的CSS块级菜单

直接下载这些菜单



36.12种以上不同的CSS菜单




37. ADxMenu-4种非常酷的导航菜单

下载



38.在CSSmenubuilde你可以自己选择喜欢的菜单风格，这个网站有一个庞大的菜单列表供你选择




40. 很多不同的菜单风格





41.CSS菜单，纵向、横向都有




42.非常棒的导航菜单，其中有一种是非常有人气的折叠菜单；

下载这个折叠菜单



list-u-like:制作你自己喜欢的CSS列表
CSS Menu Generator:这个CSS菜单生成器可以允许你制作3中不同风格的菜单。
您还可以参考以下前端开发相关教程&资源:

《精选15个国外CSS框架》

《10个非常棒的Ajax及Javascript实例资源网站》

《12种Javascript解决常见浏览器兼容问题的方法》

《精选30个优秀的CSS技术和实例》

《15个前端开发/网页设计师必备的Bookmarklet》 
英文原文:300+ Jquery, CSS, MooTools and JS navigation menus 

翻译原文:300+Jquery, CSS, MooTools 和 JS的导航菜单资源

转载声明：
请在转载本文时, 在文章底部加入本站或本文链接, 以声明文章来源, 谢谢合作
本站链接:http://blog.bingo929.com
本文链接:http://blog.bingo929.com/300-jquery-css-mootools-js-navigation-menus.html



seal 2009-09-25 21:33 发表评论

Snow	255 250 250	#FFFAFA
GhostWhite	248 248 255	#F8F8FF
WhiteSmoke	245 245 245	#F5F5F5
Gainsboro	220 220 220	#DCDCDC
FloralWhite	255 250 240	#FFFAF0
OldLace	253 245 230	#FDF5E6
Linen	250 240 230	#FAF0E6
AntiqueWhite	250 235 215	#FAEBD7
PapayaWhip	255 239 213	#FFEFD5
BlanchedAlmond	255 235 205	#FFEBCD
Bisque	255 228 196	#FFE4C4
PeachPuff	255 218 185	#FFDAB9
NavajoWhite	255 222 173	#FFDEAD
Moccasin	255 228 181	#FFE4B5
Cornsilk	255 248 220	#FFF8DC
Ivory	255 255 240	#FFFFF0
LemonChiffon	255 250 205	#FFFACD
Seashell	255 245 238	#FFF5EE
Honeydew	240 255 240	#F0FFF0
MintCream	245 255 250	#F5FFFA
Azure	240 255 255	#F0FFFF
AliceBlue	240 248 255	#F0F8FF
lavender	230 230 250	#E6E6FA
LavenderBlush	255 240 245	#FFF0F5
MistyRose	255 228 225	#FFE4E1
White	255 255 255	#FFFFFF
Black	0 0 0	#000000
DarkSlateGray	47 79 79	#2F4F4F
DimGrey	105 105 105	#696969
SlateGrey	112 128 144	#708090
LightSlateGray	119 136 153	#778899
Grey	190 190 190	#BEBEBE
LightGray	211 211 211	#D3D3D3
MidnightBlue	25 25 112	#191970
NavyBlue	0 0 128	#000080
CornflowerBlue	100 149 237	#6495ED
DarkSlateBlue	72 61 139	#483D8B
SlateBlue	106 90 205	#6A5ACD
MediumSlateBlue	123 104 238	#7B68EE
LightSlateBlue	132 112 255	#8470FF
MediumBlue	0 0 205	#0000CD
RoyalBlue	65 105 225	#4169E1
Blue	0 0 255	#0000FF
DodgerBlue	30 144 255	#1E90FF
DeepSkyBlue	0 191 255	#00BFFF
SkyBlue	135 206 235	#87CEEB
LightSkyBlue	135 206 250	#87CEFA
SteelBlue	70 130 180	#4682B4
LightSteelBlue	176 196 222	#B0C4DE
LightBlue	173 216 230	#ADD8E6
PowderBlue	176 224 230	#B0E0E6
PaleTurquoise	175 238 238	#AFEEEE
DarkTurquoise	0 206 209	#00CED1
MediumTurquoise	72 209 204	#48D1CC
Turquoise	64 224 208	#40E0D0
Cyan

□::BEST4U论坛::	style="CURSOR: hand" width=21>х
height=91>欢迎光临本站! 本站域名: http://webform.cn

BlogJava-Sealyu-随笔分类-CSS

CSS Hack区分浏览器 IE6 IE7 IE8 Firefox Opera Safari

Effective and Powerful CSS Tools & Generators for Designers

Clean vCard: A Free Professional XHTML-CSS vCard Template

Main Features of The Template

About Designer

About Developer

Agreements

Download The Template files for Free!

Top Articles On The Web Design Billboard In August’10

Design Showcase, Feature Collection

35+ Unique & Interesting Product Packaging Designs

Corporate Website Design: Creative and Beautiful Solutions

50 Fresh Portfolio and Blog Design Interfaces for Inspiration

40 Stunningly Creative Resume Designs on DeviantArt

Showcase Of Delicious Coffee Websites

Photography, Digital Showcase and Art inspiration

88 Brilliant Examples of Forced Perspective Photography

Photography Inspiration: 40 Magnificent Aerial Photos

Surreal Photo Manipulation: 40 Amazing Artwork

Russia in color, a century ago

15 Logos With Hidden Messages

Freebies Resources (Themes, Wallpapers, PSDs, Icons, Vectors, Fonts etc.)

100 Free High Quality WordPress Themes: 2010 Edition

100+ Free High Quality Icon Sets for Web Designers and Developers

Free Social Media Icon Sets – Best Of

40+ Elegant Free CSS/(X)HTML Templates from 2010

60 Beautiful Minimalist Desktop Wallpapers

30 New Free High-Quality Fonts

35 Fresh High-Quality Free Fonts for Professional Designers

80+ Useful PSD Templates For Web Designers

Tutorials, Tips, Tricks & Hacks Resources

28 HTML5 Features, Tips, and Techniques you Must Know

Twitter Background Design – Great Tips and Gorgeous Examples

10 Useful iPhone Shortcuts, Tips and Tricks

How to Design a Phone Icon in Photoshop

Create Gold Ornamental Text in Photoshop

Building a Sleek AJAX Email Signup Form

Correcting Exposure with the Shadows & Highlights Tool

20 Methods for Upping Your Current Web Design Skills

How To Create a Detailed Vector Sugar Skull Illustration

16 Vital Checks Before Releasing a WordPress Theme

CSS, xHTML, Javascript, Ajax and Design Resources

20 HTML Best Practices You Should Follow

10 Great Tips for Writing Better And More Comprehensive CSS

Commonly Confused Bits Of jQuery

8 examples of stunning CSS3 text effects

25 Incredibly Useful CSS Snippets for Developers

Appz, Tools and Development Resources

80 Of The Most Useful Mac Tools and Utilities

50 Awesome New jQuery Plugins

8 CSS preprocessors to speed up development time

45 Free Applications For Designers And Developers

20+ New Apps and Websites for Designers

Freelancing Resources

26 Common Freelancing Mistakes to Avoid

How I Learned to Stop Worrying and Love My Job

6 Online Marketing Mistakes that Will Kill Your Business

5 Good Ways to Close a Client Deal

Designers, “Hacks” and Professionalism: Are We Our Own Worst Enemy?

15 Ways to Get Inspired

Doing the Little Things to Please Clients

Miscellaneous Resources

Why Your Blog Doesn’t Make Money

How Limitations Improve Design

Giving Users Some Credit

A Design Is Only As Deep As It Is Usable

Why SEO Doesn’t Matter Anymore and What You Should Do Instead

Reductionism in Web Design

5 Reasons Why No One Is Reading Your Email Newsletter

The Future of the Internet

60 Ways to Increase Your Influence Online

CSS Sprites

100+ Free High Quality Icon Sets for Web Designers and Developers

CSS Image Maps(转)

CSS首字母大些 TEXT(转)

让 IE6, 7和 8支持CSS3 (转)

CSS Color Names

99款高质量免费(X)HTML/CSS模板（转）

你需要了解的21个CSS惊人技巧(转)