Results for category "CSS精髓"

css3,div+css,web前端

不同浏览器兼容css hack

/***** Attribute Hacks ******/

 

/* IE6 */

#once { _color: blue }

 

/* IE6, IE7 */

#doce { *color: blue;/* or #color: blue */}

 

/* Everything but IE6 */

#diecisiete { color/**/: blue }

 

/* IE6, IE7, IE8 */

#diecinueve {color: blue\9;}

 

/* IE7, IE8 */

#veinte { color/*\**/: blue\9;}

 

/* IE6, IE7 — acts as an !important */

#veintesiete {color: blue !ie;}/* string after ! can be anything */

 

/***** Selector Hacks ******/

 

/* IE6 and below */

* html #uno  {color: red }

 

/* IE7 */

*:first-child+html #dos {color: red }

 

/* IE7, FF, Saf, Opera  */

html>body #tres {color: red }

 

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */

html>/**/body #cuatro {color: red }

 

/* Opera 9.27 and below, safari 2 */

html:first-child #cinco {color: red }

 

/* Safari 2-3 */

html[xmlns*=””] body:last-child #seis {color: red }

 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:nth-of-type(1) #siete {color: red }

 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:first-of-type #ocho {  color: red }

 

/* saf3+, chrome1+ */

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

#diez  {color: red  }

}

 

/* iPhone / mobile webkit */

@media screen and (max-device-width: 480px) {

#veintiseis {color: red  }

}

 

/* Safari 2 – 3.1 */

html[xmlns*=””]:root #trece  {color: red  }

 

/* Safari 2 – 3.1, Opera 9.25 */

*|html[xmlns*=””] #catorce {color: red  }

 

/* Everything but IE6-8 */

:root *> #quince {color: red  }

 

/* IE7 */

*+html #dieciocho {  color: red }

 

/* Firefox only. 1+ */

#veinticuatro,  x:-moz-any-link  {color: red }

 

/* Firefox 3.0+ */

#veinticinco,  x:-moz-any-link, x:default  {color: red  }

 

html5 在IE6/IE7/IE8中使用html5标签

html5出来后多了很多标签,但是IE6/IE7/IE8并不支持html5,这让我们开发html5网站的很郁闷。现在就介绍下如何在IE6/IE7/IE8中使用html5标签。

原理就是在css中,将新标签的样式变成块状元素,然后在script中创建新标签。直接放出代码,如果您是IE6/IE7/IE8用户,可运行代码试试:

  1. <!doctype html><head>  
  2. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />  
  3. <title>在IE6/IE7/IE8中使用html5标签</title>  
  4. <!–试试去掉以下方法,运行代码看看–>  
  5. <!–方法一–>  
  6. <!–  
  7. <!–[if lt IE9]>  
  8. <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>  
  9. <![endif]–>  
  10. –>  
  11. <!–方法二–>  
  12. <style type=“text/css”>  
  13. article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}  
  14. </style>  
  15. <script>
    (function() {
    if (!
    /*@cc_on!@*/
         0) return;
    var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);
    var i= e.length;
    while (i–){
    document.createElement(e[i])
    }
    })()
    </script>
  16. </head>  
  17. <body>  
  18. <header>宅到底</header>  
  19. <nav>菜单1</nav>  
  20. <div>菜单2</div>  
  21. </body>  

在IE6/IE7/IE8下,header和nav不被识别,所以“宅到底”和“菜单1”会在同一行输出。加上以上方法后,header和nav会被当成是div,所以会分两行输出。

响应式Web设计之Viewport用法


● viewports
现在,当我们调整我们浏览器的大小时,使用@media已经可以非常不错的完成工作了。但这并不能满足移动端的浏览器。原因是移动端浏览器(iPhone/Safari, Android/Chrome和Fennec)会默认页面是为宽屏幕设计的,所以将它缩小整个页面来适应小屏幕。这就表明了上面的代码完全不足于适应移动端的浏览器,因为设备无法识别正确的宽度。解决方法:在文档的头部使用苹果提供的viewport meta标签,并结合@media queries:

● width=device-width
我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸的是,只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时,device-width还是和纵向的一样(比如,320px),这意味着,即使我们把页面设计成适应了480px横向设备,它还是会返回320px的效果。
曾经尝试在media query里使用orientation来解决这个问题,但是orientation不会真正的告诉我们实际的设备宽度,因为它只告诉我们设备的宽度是大于还是小于设备的高度。正如有人指出,由于大部分网页往往垂直滚动,所以这是无关紧要的。
如果我们的页面在纵向和横向设备中样式相同,那么我们就可以用width=device-width就足够了,需要注意的是这个是唯一告诉android设备使用设备宽度的方法。
● initial-scale=1.0,maximum-scale=1.0
initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。但还是有 bug,当我们把移动端设备从纵向转成横向时,你就会发现这个问题了。这是因为initial-scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中,浏览器就会认为页面不变,但scales会设置为1.5,为了使320px的页面适应480px。但是,因为我们在@media queries中设置了480px这个宽度,那么页面CSS规则也会是适应480px的。结果就是,页面CSS规则是适应480px的,另外scale还是1.5。这个结果并不可怕,但是不可取。
为解决这个bug,我们可以添加maximum-scale=1这个设置。它的作用是阻止页面在旋转时放大,但它同时带来了更严重的问题:也阻止了用户手动放大或缩小页面。同样user-scalable=no设置也会让用户不能缩放页面。所以一般情况下,不要使用以上俩个设置。
是不是无法解决这个bug了?首先这个bug最多只是在显示层面,带来的后果一点不严重,因为即使页面自动缩放了,它还是成比例的。
● width=
有些人建议在viewport里使用特定的width,并且也按这个width设计页面。如果你可以为每个种类的device编写页面的话,这个设置是可行的,但需要我们明白的是它不是响应式设计。打印时,使用固定宽度布局是必要的,但我们网页应该适应用户的各种样式的设备。总之,不要这样使用。
● @media all and (device-width:480)
这是个media query而不是viewport标签里的选项, 我在很多地方看到过这样的代码,但我并不认为这是好的做法。为什么?根据CSS3对media queries的描述,device-width在media queries里表示的是输出设备表面渲染的宽度。对于continuous media来说,device-width就是屏幕的宽度;对于paged media来说,device-width就是页面尺寸的宽度。以continuous media为例,device-width就是设备屏幕的宽度。除非浏览器最大化,它始终大于viewport的width。
测试表明,大多数桌面浏览器把device-width和width当作同义词。而移动端浏览器对此会有点混淆。至于viewport标签里,device-width只在纵向时等于设备的width。例如,一个320*480的设备,device-width总是320px,不论方向。然而对于CSS media queries,device-width是基于其目前方向上屏幕的width。
如果你一定要这样使用,请和orientation一起使用。但绝对不要使用max-device-width和min-device-width,因为用max-width和min-width替换会比较好。同样需要注意的是,新型号设备的宽度可能会改变。
● 中间尺寸
上面我提到过,我们可以为任意数量的width来设计页面。最重要的是在不同width的浏览器中测试他们,通过调整window浏览器的大小来测试是最简单的方法。随着设计页面的width越来越小,我们可以去掉(Display:none;)一些不重要的内容,比如 footer,sidebars,menu等,为主要内容留足够大的空间。我们的网站也许需要一个可以在所有width屏幕上运行良好的布局,也许只需要满足两到三个布局。这是非常容易设计和测试的,所以没有理由不做。
参考文章
1. Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
2.Jeremy Keith. 2010. Responsive Enhancement. In adactio.
3.Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
4.Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of 385px (on MacOSX) and I was unable to shrink the browser below this. Firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. At that point the viewport width stays fixed even if you shrink the browser. The page is re-rendered if you type something (anything) into the URL bar. Opera 10/11 re-render correctly at all sizes.
5.Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
6.Using the Viewport on Safari. In Safari Web Content Guide.
7.The viewport meta tag. In Safari HTML Reference.
8.MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
9.Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
10.Willison & Downe. Lanyrd.
11.Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
12.If you design your page for the narrow view and expect it to scale when rotated, then use width=device-width and nothing else. If, instead, you design your page for either width, then use width=device-width,initial-scale=1. This is the only way to get the android browser to render a page with the intended width. Mobile Safari will render the page exactly as if initial-scale=1 were specified alone. You will still end up with the zoom on rotate bug.
13.David Calhoun. 2010. The viewport metatag (Mobile web part I).

10个很棒的测试响应式设计的网站

测试是一种对响应式网站设计的评判。用响应式设计的目的是让网站适用于任何终端,但是没有大量的测试你不会知道网站在不同情况下是怎样的表现。幸运的是,有一些很好的工具和可用资源可以帮助你来测试你的响应式设计。在这篇文章里我们一起来看下这10个好用的工具让你自己来尝试下。

Viewport sizes are

  • Desktop — 1600 x 992px scaled down to scale(0.3181)
  • Laptop — 1280 x 802px scaled down to scale(0.277)
  • Tablet — 768 x 1024px scaled down to scale(0.219)
  • Mobile — 320 x 480px scaled down to scale(0.219)

Devices and screen sizes emulated in this site are

  • Macbook — 1280 x 800
  • iPad portrait — 768 x 1024
  • iPad landscape — 1024 x 768
  • Kindle portrait — 600 x 1024
  • Kindle landscape — 1024 x 600
  • iPhone portrait — 320 x 480
  • iPhone landscape — 480 x 320
  • Galaxy portrait — 240 x 320
  • Galaxy landscape — 320 x 240

Respondr

Respondr is a simple, but helpful, tool. You’ll just enter the URL of the site/page that you want to test, and then select the device of your choice. You can select an iPhone, iPad, or desktop. It then previews the page at the appropriate width.

Viewport Resizer

Viewport Resizer works as a bookmarklet. You can click on the button and then enter the URL of the site/page that you want to test. You’ll have several different screen sizes that you can use for testing, including two smartphones, a small tablet, regular tablet, widescreen, and HDTV.

Responsivator

With Responsivator you will enter a URL for testing and it will preview the site/page at 7 different widths from a smartphone all the way up to a desktop. You can also enter your own custom screen dimensions for testing, and Responsivator even provides you with a custom URL that you can share with others so they can preview the results.

jResize Plugin

jResize is a jQuery plugin for one-window responsive development. You can simply click on the different screen widths and the page will adjust accordingly, making it easy to test as your work.

Screenqueri.es

With Screenqueri.es you enter the URL and then you can pull the slider to adjust the screen width of the display. You can also choose several preset testing options, including 14 popular smartphones and 12 popular tablets.

Screenfly

Screenfly allows you to enter a URL to test, and then you choose phone, tablet, desktop, or TV. You can also enter a custom screensize, rotate the screen, and generate a URL to share with others for testing.

responsivepx

With responsivepx you will enter the URL and then use the sliders to set the width and height for testing. You can choose whatever screen size you want, up to 3000 pixels in width. You can also share it by email with others.

resizeMyBrowser

resizeMyBrowser allows you to choose the dimensions of your browser for testing. You can choose between 15 different presets, or you can enter your own custom screen sizes.

Adobe Edge Inspect

Edge Inspect is an Adobe product that is part of the Creative Cloud membership. It allows you to test your sites on various devices.

Responsive Design Bookmarklet

The Responsive Design Bookmarklet is another simple tool. Just drag the bookmarklet above your bookmarks bar and it will be applied in your browser. You can then choose to preview the current page on screen widths the size of tablets and smartphones.

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。

移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

responsive webdesign

手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

 

一、”自适应网页设计”的概念

2010年,Ethan Marcotte提出了”自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

 

如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

 

如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

 

如果屏幕宽度在400像素以下,则6张图片分成三行。

 

mediaqueri.es上面有更多这样的例子。

这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

二、允许网页宽度自动调整

“自适应网页设计”到底是怎么做到的?其实并不难。

首先,在网页代码的头部,加入一行viewport元标签。

  <meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

  <!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

具体说,CSS代码不能指定像素宽度:

  width:xxx px;

只能指定百分比宽度:

  width: xx%;

或者

  width:auto;

四、相对大小的字体

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

  body {
font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代码指定,字体大小是页面默认大小的100%,即16像素。

  h1 {
font-size: 1.5em;
}

然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

  small {
font-size: 0.875em;
}

small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

五、流动布局(fluid grid)

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

  .main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25%;
}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

另外,绝对定位(position: absolute)的使用,也要非常小心。

六、选择加载CSS

“自适应网页设计”的核心,就是CSS3引入的Media Query模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

  <link rel=”stylesheet” type=”text/css”
media=”screen and (max-device-width: 400px)”
href=”tinyScreen.css” />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

  <link rel=”stylesheet” type=”text/css”
media=”screen and (min-width: 400px) and (max-device-width: 600px)”
href=”smallScreen.css” />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

  @import url(“tinyScreen.css”) screen and (max-device-width: 400px);

七、CSS的@media规则

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

  @media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

八、图片的自适应(fluid image)

除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码:

  img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

  img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

  img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

  img { -ms-interpolation-mode: bicubic; }

或者,Ethan Marcotte的imgSizer.js

  addLoadEvent(function() {

var imgs = document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

CSS技巧:word-wrap同word-break的区别

本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrapword-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下,长串会被遮住部分内容。

另,测试代码如下:

1.htm

<style>

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

.c2{ width:300px;word-wrap:break-word;  border:1px solid yellow}

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

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

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

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

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

</style>

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

<div>asdasd

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<br>

.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<br>

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

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<br>

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

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<br>

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

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

 

</div>

<br>

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

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<br>

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

<div>

safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

通过CSS禁止Chrome中input获取焦点后橘黄色边框

Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的。
例如做了一个圆角框的input输入框,如果没有对边框focus时的属性做任何休息,Chrome将默认加上一个正方形的边框,无视你将input的border设为none的命令。
为了避免麻烦我们可以禁止chrome为被激活的输入框添加边框,方法如下:
1. 禁止为所有被激活的输入框添加边框
*:focus { outline: none; }
2. 禁止为被激活的输入框添加边框,例如
.class1:focus{ outline:none }
3. 也可以自定义输入框被激活时的边框样式
.changeborder:focus { outline:Blue Solid 4px;}

css实现强制不换行/自动换行/强制换行

强制不换行
div{
white-space:nowrap;
}

自动换行
div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}

============================================

CSS设置不转行:

overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

============================================

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }


css命名规则规范

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

id的命名

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

导航

导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

SEOer必须掌握的HTML标签

为什么SEO人员必须懂一些HTML代码?

SEO人员到底要不要懂HTML之争,一直都很热门,说必须懂的人和说不必懂的人在数量上差不多,而且懂HTML代码和不懂HTML代码的seo人员都能够将SEO工作做的很不错,所以才会出现公婆各持己见的情况。

实际上SEO工作是由很多细节累积起来的,假设一共有100项工作内容,那么懂hthml语言和不懂html语言的人都做到了90项,在搜索引擎和 用户看来,这个网站就有90分,对于懂或者不懂html语言这个问题似乎并没有那么重要了,因为大家目标一致,并且取得的成果一样,自然而然也就无所谓懂 或者不懂HTML了。

但是,如果我们不满足于只得90分,就需要努力去取得那未曾做到的10个细节,而HTML语言就是其中一个,所以,作为SEO人员最好还是必须懂一些HTML代码。

SEO人员必须懂的HTML语言代码

(1) 标题标签:如果我们不知道网页的标题是由哪个标签来控制的,是一件很失败的事情。曾与一位朋友交流其站点的优化问题,我对他说页面的标题要优化一下,标题的写法最 好是“文章标题-栏目名称-网站名称”的结构,结果他将正文的标题修改了。这充分说明这位朋友并 懂标题标签,所以不知道如何去修改页面标题。而页面标题对于搜索引擎来说是非常重要的,所以我们 作为SEO人员,一定要会使用标题标签。

(2)页面关键词标签:作为SEO人员,所有的工作内容都是在做与关键词相关的工作,所以我们千万不能将这个标签忽略了。对于常见有两种错误:

(2.1)没有使用页面关键词标签:通过源码,我们可以发现很多网站其实没有这个标签。没有此标签的网站,大部分情况是因为CMS程序不支持,而有些则是因为不明 白它的作用,所以没有添加。不论是那种情况,我们都可以通过某些方法来改进。

(2.2)关键词分隔符号使用不正确:关键词内容的正确形式是【content=“关键词,关键词2,……”】,关键词与关键词之间使用英文半角逗号分隔开来,而不是使用下划线、竖线或者空格等符号。

(3)页面描述标签:此标签可以看着是定义文章的主要内容,与标题一样,搜索引擎会将其显示在搜索结果页中。所以我们千万不要忽略,甚至于我们可以利用这一点来将一些促销和利好信息展示给搜索者,描述的写法可以参见我们之前的文章。

(4) 默认地址标签:在某些情况下,我们的网站会被某些人恶意复制,造成网站排名下降和权重流失等损失,为了在一定程度上防御这种复制带来的后果,很 多SEO人员提出在外链接中使用绝对url的方法。实际上除了使用绝对地址,我们还可以使用默认地址标签,使用了默认地址标签的页面,其页内所有的相对 url地址都是将其【href】所指定的url作为基准,进行链接。

同时,在此也提醒一下建站的朋友,如果使用了默认地址标签,在修改各种包含文件——如css,js等引用文件——的时候,要去掉默认地址标签,否则修改本地文件是无效的,因为它会默认去调用href指定的文件。

(5) 和文字加粗标签:这两组html标签在 视觉效果上都是让文字加粗,都有强调的作用,它会告诉用户和搜索引擎,这部分内容在本页面是很重要的。所以我们在页面中可以将重要的词组——一般是关键 词,进行或加粗强调。但是要避免通篇都是加粗,或者 通篇都没有词组被加粗,这两种方式都是不可取的。

大部分情况下,使用或者效果是类似的,有专家 提出使用字符更少、更能节约带宽,所以建议将都换 成,但显然这个理由并不是那么充分和吸引人,几个字符,对于现在的网络速度来说,完全可以忽略不计。

(6)内容最大标题标签:被包含的内容,搜索引擎会给予很高的权重,所以作为SEO人员,一定要重视这一点。并且要记住:是用来定义正文内容最大标题,而不是页面标题,不要与混淆。

同时,一个页面只允许有一个

标签,否则会被认为是作弊——目前来说是这样的,HTML5拥有更强的功 能,允许一个页面有多个标签,但目前还未完全被搜索引擎所支持,所以我们坚持在一个页面使用一个是没错的。

(7)和内容次级标题标签:一篇文章,除了标题,还会有各种次级段落标题,比如本文:

(7.1)为什么SEO人员必须懂一些HTML代码?

(7.2)SEO人员必须懂的HTML语言代码

就存在多个次级标题。一般建议,页面必须有和标签,和标签不作要求,也不建议使用及更次级的标签,因为作用不大,但 不阻止使用,因为他们是文档的标准标签,即使无用,也无害。

(8)超链接标签:作为SEO人员,这个HTML标签是必须懂的,在互联网中超链接标签可以说是灵魂一般的存在,如果 没有超链接标签,网站将失去意义。不管我们是做锚文本,还是做图片链接,都需要使用它。

这里我们要注意它的两个属性,一个是【target】,它决定了链接以何种方式打开,一般站内链接会被定义为在当前页面打开,外部链接被定义为在新窗口中打开。

另外一个属性是【rel】,其最让SEO人员关注的就是【Nofollow】值,因为它代表不传递权重。对内可以集中权重,不使其分散到无意义的页面;对外,可以防止权重流失和避免被骗友情链接。

(9) 图片标签:图片标签我们要注意的是其【alt】属性,因为搜索引擎并不认识图片,而【alt】属性则在大概意义上告诉了搜索引擎此图片的内容。 所以,作为SEO人员,一定要重视【alt】属性的使用,对每一幅具有实际意义的图片都应该加上【alt】属性,并为其指定内容。在大多数浏览器中,定义 了【alt】属性内容的图片,当鼠标悬停在图片上的时候,会显示【alt】属性值:鼠标悬停显示【alt】属性值

另外两个属性【widht】和【height】用来定义图片的宽度和高度,大部分情况下,很多程序编写人员都是忽略,让浏览器自行判断图片的大小。 这种做法在图片的显示上面是没有什么错误的,但是忽略【width】和【height】属性,会增加图片显示的时间,所以我们应该主动给图片加上宽度和高 度属性,并指定其值。

总结

以上就是SEO工作人员必须懂的9个HTML语言标签,希望广大的SEOer们能够将它们的用法做一个详细的了解,并能够在日常的SEO优化工作中去遵照标准来使用他们。相信只要我们越来越符合标准,搜索引擎也会越来越喜欢我们的网站,同时也能够给用户以良好的访问体验。