//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content网页自动跳转，是指当用户访问某个网页时，被自动跳转到另一个网页中去。网页自动跳转的主要作用是，当域名变更后，或者网站里的一个或多个网页被删除后，可以使用这种方式将用户引导到其它正常的网页中去，从而留住用户。
不过，现在有许多人利用网页自动跳转来进行作弊，欺骗搜索引擎，从而实现提高网站搜索引擎排名的目的。比较典型的方式是：先做一个“桥页”，当搜索引擎收录了这个桥页，并有较高排名时，桥页中再使用网页自动跳转方式，将用户引导到用户本来无意访问的其它网页中去。
下面介绍一下五种常见的网页自动跳转方法，以及搜索引擎对这些跳转方法的辨识能力。
1.网页自动跳转方法：Meta Refresh自动跳转法
在网页的head区域的Meta Refresh标签中，加入自动跳转代码，可实现网页的立即或延时自动跳转。
示例如下：
<meta http-equiv=”Refresh” content=”10;url=http://www.gogoweb.cn/”>
上述html代码中的“10”是延时跳转的时间，单位是秒。如果设为0，就表示立即跳转。“http://www.gogoweb.cn”是跳转的目标地址，可以是同一域名下的站内相对路径，也可以是不同域名的站外地址。
由于搜索引擎能够读取HTML，所以对于这种自动跳转方法，搜索引擎是能够自动检测出来的。
至是会不会被视为作弊，则主要看跳转时间。如果跳转时间为0，就可能会被视为作弊，从而受到惩罚。如果有时间延迟（一般3秒以上），就会被视为正常应用。
2.网页自动跳转方法：body onload自动跳转法
在网页加载时通过onload事件指定parent.location进行自动跳转。
示例如下：
<body onLoad=”parent.location=’http://www.gogoweb.cn”>
这种方法与第一种方法一样，能够被搜索引擎识别。
3.网页自动跳转方法：javascript自动跳转法
javascript可以实现网页的自动跳转，如果要实现立即跳转，将跳转代码放在网页的head区域即可。
示例如下：
<script language=”javascript”>
location.replace(“http://www.gogoweb.cn/html/help/”)
</script>
其中的“http://www.gogoweb.cn/html/help/”是重定向目标地址。
由于搜索引擎无法解析javascript，所以搜索引擎便无法识别用javascript脚本进行的自动跳转。
4.网页自动跳转方法：表单自动跳转法
对于表单大家都很熟悉，就是将表单中填写的内容，提交到action参数中指定的URL地址中，目标URL再对接收到的数据进行处理。利用这一点，我们可间接的实现网页跳转，只不过，我们并不需要提交任何表单内容。再结合javascript脚本，可以对表单进行自动提交。
示例如下：
<form name=”form1″ action=http://www.gogoweb.cn/index.html method=”get”>
</form>
<script language=”javascript”>
document.form1.submit()
</script>
其中form1名称任意，但二处form1应该统一。action中的URL地址必须以文件名结尾，例如“action=http://www.gogoweb.cn/”或“action=http://www.gogoweb.cn/html”便是不规范写法。method可以是get也可以是post，但根据我的经验，提交空表单时最好使用get。
众所周知，由于搜索引擎的蜘蛛程序是不会填写表单的，所以搜索引擎便无法识别通过这种方法实现的网页自动跳转。
5.网页自动跳转方法：程序跳转法（response.redirect 、server.transfer）
每种程序都有各自的页面跳转方法，例如asp中使用response.redirect 来进行跳转，跳转范例如下：
response.redirect “http://www.gogoweb.cn”
它的作用是，asp程序运行到该行代码后，会立即跳转到目标url地址中去。
在asp中，除了使用response.redirect 做跳转外，还有一个跳转方法，用server.transfer进行跳转，跳转范例如下：
response.redirect “/html/help/index.html”
注意，这里的url地址，必须是站内地址，且url地址必须以文件名结尾，例如 response.redirect “/html/help/” 便是错误用法。
response.redirect和server.transfer都能实现网页自动跳转，但二者也有不同之处，前者可以跳转到站内URL，也可以跳转到站外URL，而后者只能跳转到站内文件，且浏览器地址栏的URL将保持不变。server.transfer还有许多好处，这里不多详述，大家可在搜索引擎中查找它的更多资料。
使用response.redirect 跳转虽然是在服务器端完成跳转的，但它最终是转换成html后在客户端执行的，因此，也能被搜索引擎识别，过多的使用亦会被当作作弊处理。
如果是在同一网站内部的不同网页间跳转，建议使用server.transfer跳转，server.transfer肯定不会被搜索引擎视为作弊。
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
h1
{
position: absolute;
left: 100px;
top: 150px;
}
| 值 | 描述 |
|---|---|
| static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 |
| relative | 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 将向元素的 LEFT 位置添加 20 个像素。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 |
CSS is one of the most important building blocks of modern web design. Standards demand the use of CSS for formatting and styling pages, and with good reason. It’s lighter-weight and capable of much more than older methods like tables.
And CSS isn’t nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They’re a good place to start if you’re new to CSS but are valuable even if you’re a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site.
CSS is now the primary language used to create page layouts on modern websites. There are almost limitless possibilities for creating page layouts and user interfaces with CSS, but below are some of the more interesting techniques.
The simplest way to horizontally and vertically center a DIV
This article covers centering a DIV, both vertically and horizontally, using CSS. While many code snippets out there show how to do this through the use of parent and child DIVs, this particular method uses a single DIV and is much simpler.
New CSS Sticky Footer – 2009
Here’s a sticky footer technique that’s completely cross-browser compatible. It even works in Google Chrome. And it doesn’t require an empty push DIV either.
Simple Page Peel Effect with jQuery & CSS
This tutorial combines jQuery and CSS to create a page peel effect. Most sites using this effect are Flash-driven, so this is a nice alternative if you’re not crazy about using Flash (or don’t know how).
Equal height boxes with CSS
Here’s a basic example of creating equal-height boxes (faux columns) using CSS. It works similarly to cells in a table, but without the messy table bits.
Adaptable view – how do they do it?
Letting users manually change the way your site appears can greatly improve the site’s usability and the likelihood that users will have positive experience (and come back for more). This tutorial shows you how to implement adaptable viewing techniques for your site.
CSS: The All-Expandable Box
Here’s a tutorial for creating a CSS box that will expand in all directions to fit the content contained within it, instead of just vertically. It works especially well if users increase the font size but making the entire box larger, instead of just shifting the content around and making the box longer vertically.
Four Methods to Create Equal Height Columns
Here’s another tutorial for creating equal-height columns in CSS, this time covering four different techniques. The techniques covered work in all major browsers (even IE6).
Vertical Centering With CSS
This post covers a variety of the best techniques for centering CSS elements vertically on a page. It also covers how to create a simple little vertically-centered website using the techniques.
CSS vertical center using float and clear
Here’s another tutorial for creating a vertically-centered CSS box using float and clear. It even works in IE5 for the Mac, just in case.
Cross-Browser Inline-Block
This tutorial covers how to create an inline-block layout that works with varying levels of content without breaking the layout.
The CSS “Ah-ha!” Moment
Here’s a post talking about the “Ah-Ha!” moment most designers have at some point in their careers, where some vital bit of design knowledge suddenly makes perfect sense. In this case, it’s the relationship of CSS boxes within a layout.
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
This article gives a comprehensive overview of CSS layers, relative and absolute positioning, and Z-Index properties.
The CSS Overflow Property
Here’s a complete run-down of how the different settings for the CSS overflow property work. It includes visible (the default), hidden, scroll, and auto, with illustrated examples of each.
Absolute, Relative, Fixed Positioning: How Do They Differ?
The differences between absolute, relative, and fixed positioning with CSS can be confusing at times. This article shows the difference between each one and when it’s appropriate to use one or another.
display: inline-block
Here’s a cross-browser (mostly) compatible method of creating inline blocks in a variety of styles. There are some differences, though, between the vertical alignment interpretation between browsers.
Good navigation is vital part of any website. Good navigation is both user-friendly and complements the rest of the site’s design elements. Below are some techniques and tips for creating navigation that does both.
Create dropdown menus with CSS only
A complete tutorial on creating CSS-based dropdown menus that behave like dropdown lists. It’s a short and easy-to-implement method.
Simple scalable CSS based breadcrumbs
Using breadcrumbs on your site can make it easier for your visitors to navigate. And this tutorial shows a method for creating scalable breadcrumbs using CSS.
Horizontal Sub-nav with CSS & jQuery
Here’s a complete tutorial on creating a horizontal navigation submenu using purely CSS (in most cases, anyway). If you want it to work in IE6, you’ll need to implement some jQuery, too.
CSS Step Menu
Creating a stepped menu (also referred to as a “wizard menu”) can be tricky, especially when it has to change the number of steps depending on what it’s being used for. Here’s an example of one with information on how to create your own.
The Tabbed Breadcrumb Navigation
A comprehensive tutorial on creating breadcrumb navigation formatted as tabs.
Apple’s Navigation bar using only CSS
This tutorial shows how to create an Apple-like navigation bar using only CSS and HTML (with no images).
Sitemap Celebration
Here’s a sitemap style that’s cross-browser compatible (even back to IE5 for the Mac) and based on nested lists.
Nice CSS menu with feed reader icons list
Create a menu of feed reader icons using CSS. It could easily be adapted to other types of menus.
Multi-level Menus with jQuery and CSS
Here’s a collection of techniques for creating multi-level menus in pure CSS and CSS/JS. In addition to basic techniques, it also covers more advanced and creative examples.
Styling of images is an oft-overlooked element of page design. The techniques and tips featured below should help you remedy that situation on any of the sites you’ve designed.
Centering images with CSS
Some basic information on centering images using CSS instead of deprecated HTML.
Add a Custom “Trendy” Border Around Blog Images With CSS & JavaScript
A complete rundown of how to create a variety of border styles around the images on your blog using both JavaScript and CSS.
Sexy Music Album Overlays
A great tutorial for adding a bit more style to any image gallery, though it uses an album cover gallery as an example.
Create CSS pin balloons with ease
This is an awesome technique for adding pin balloons or speech bubbles to an image or map that expand on rollover from an anchor point.
Create an Image Rotator with Description (CSS/jQuery)
A great tutorial on how to create an image rotator/gallery using CSS and jQuery. It creates a clean UI for displaying a portfolio or general image gallery.
5 Popular CSS Speech Bubbles
A collection of five different techniques for creating speech bubbles using CSS (some of them using only CSS).
How to Make a Threadless Style T-Shirt Gallery
A tutorial for creating an image gallery similar to the one on the Threadless website, with a caption or overlay on top of an image or thumbnail, among other features.
CSS image replacement for… images? It makes sense for print. (Ask the CSS Guy)
Here’s a method for swapping special print- and screen-optimized images into your pages depending on the stylesheet being used.
Beautiful new CSS: box-shadow (in German)
CSS really excels at typography styling. Everything from font type to weight to color is defined using CSS. Here are a number of tutorials to help you create better web typography.
Truetype, Font Variants and Antialiasing
A great article on some issues with using Truetype fonts and how they sometimes don’t show up as you had hoped (or planned).
Styling Ordered Lists with CSS
A tutorial for creating a very appealing ordered list with CSS.
Beautiful fonts with @font-face
The basics of using @font-face for inserting truetype fonts within your designs.
Forgotten possibilities of :first-letter in CSS (in Russian)
8 Definitive Web Font Stacks
A collection of eight CSS font stacks that are based on the format of exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), and generic. These are grouped depending on the impression they’re likely to give visitors.
Mike’s Experiments – CSS: Perspective Text
An interesting example of creating text with a perspective effect (so the bottom of a block of text looks closer than the top).
Fonts for web design: a primer
A great guide to typography aimed specifically at web designers that includes an overview of the types of fonts, their appropriate uses, and the use of specialist typefaces for web design.
CSS text-shadow Fun: Realtime Lighting Demo
A really neat example of using the text-shadow property combined with JavaScript to create a lighting demo.
Rendering Quotes With CSS
A guide to using quotation marks in CSS, including how to create standard quotes for different countries.
Six Ways to Style Blockquotes
A tutorial of different methods for styling the blockquote XHTML tag with CSS.
Make OL list start from number different than 1 using CSS
A simple tutorial for starting an ordered list number from any number you want.
Use CSS to Override Default Text Selection Color
Choose any color you want to become the text highlight color on your sites with this method.
CSS Drop Cap Effect
A drop cap can set your site apart, especially if it’s a magazine or book website (or otherwise related to the literary trades). Here’s a CSS method for creating them.
Icons, buttons and links are another overlooked element on many pages. But they can also make a huge impact on your overall design. Below are some resources for styling better ones.
Add Progressive Icons to Your Site Using :after pseudo-element
This tutorial shows how to use descriptive icons for your links, mainly to show the type of file being linked to (such as a PDF or ZIP archive).
Super Awesome Buttons with CSS3 and RGBA
A tutorial for creating great buttons using CSS3 and alpha-blending techniques.
Scalable CSS Buttons Using PNG and Background Colors
A tutorial for creating buttons scalable both horizontally and vertically using PNG images. The technique degrades gracefully, so even users in IE6 will still see the button (just without the PNG).
Add File Type Icons next to your links with CSS
Another tutorial for adding file type icons to your links.
22 CSS Button Styling Tutorials and Techniques
Here’s a comprehensive resource list covering more than 20 techniques for creating buttons of all shapes and sizes with CSS.
CSS Tricks’ Link Nudge
A tutorial for creating links that nudge sideways when they’re hovered over.
Sanscons
This is an icon set that can be recolored using just CSS.
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of the forthcoming book Internet Famous.
CSS Sprites 这是一种利用程序上的技巧来减轻服务器的http请求的压力的方法的一种说法。
简单介绍一下 CSS Sprites 的优点：
实现方法：
我也发现了现在一般的门户网站都这么干，
阿里巴巴，淘宝，拍拍….
插曲：以前在上学的那会儿经常在淘宝网上做交易，偶然的一次发现淘宝网的背景图片居然是在同一个图片文件上面。上面布满了小图标,如：http://assets.taobaocdn.com/app/fp/2009b/hd_20090313.png 就像这一张图片。
—————-
第一次我的发现是一个叫做CSS Sprites是在 http://realazy.org/blog/2007/10/08/css-sprites/ 这里看到的。
下面的文字从以前链接复制来:
我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。
我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
更新：有网友问到IE6不支持png的问题。其实真相是，IE6不支持的是半透明（alpha transparency）的png，对于全透明的png, IE6并不存在问题。因此，在实践中，不涉及到半透明而需要透明背景的图片，其实都可以使用png, 这是很安全的。
最新评论