Face-changing: Web skin created with Css+js

css|js| Web page

Face-changing: Web skin created with Css+js

Everyone has different degrees of aesthetic fatigue, saying that the vulgar point is the new, for the Web page, how to the visitor's aesthetic fatigue shut out, so that the Web page to maintain a sense of freshness, this is a problem worth studying. In fact, many large web sites or personal sites will be irregular to the Web page for the revision, which can be summed up as a word, that is, "change", constantly changing the layout and style of the page, is to cater to the changing taste of people.

CSS Core: attribute redefinition

Let's take a look at some tips:

1, to add decoration to the link

We usually decorate the links with elements other than the stylesheet, such as using pictures, using tables, using other tags, we can actually define the <a> tags with style sheets, and for the sake of simplicity, we define them directly in <a> using style.

A: Add A border to the link

Why do you want to add a border to the link, usually in the navigation section we will give some border decoration, if the style sheet to define, we can write:

<a style= "border:1px solid #ccc;" href= "http://www.webjx.com/" > with border links </a>

This is the effect: a link with a border

Of course, such a border is not good-looking, we also need to set the inner margin. The following code:

<a style= "border:1px solid #ccc;p adding:5px;" href= "http://www.webjx.com/" > with border links </a>

Here is the effect: a link with a border

B: Add a background color to the link

In fact, this effect is not to achieve a beautiful effect, we can add background color, the code is as follows:

<a style= "border:1px solid #ccc;p adding:5px;background-color: #efefef;" href= "http://www.webjx.com/" > with border Links </a>

Here is the effect: a link with a border

Such a border and background color may not be what you want, and you can modify the color parameters yourself.

C: Add text decoration to the link

In general, we can use <b> tags or <strong> tags in <a> tags to bold text links, in fact, this is redundant, we just in the <a> label to define:

<a style= "border:1px solid #ccc;p adding:5px;background-color: #efefef; font-weight:bold;" Href= "http:// www.webjx.com/> with border links </a>

Here is the effect: a link with a border

2, redefine the properties of the original label

What do you mean to redefine the properties of the original label? For a simple example, the function of the:<b> tag is to display the text as bold, which is the browser's interpretation of the default properties of the <b> tag. But we can overwrite it with the style sheet, the following code:

<b style= "FONT-WEIGHT:100;" <b> tags for > redefined attributes </b>

Here is the effect: the <b> label of the attribute being redefined

You will see the above words "redefined attributes <b> tags" display as normal text, rather than bold, because the <b> font-weight property is redefined, so the definition of CSS will be resolved in precedence.

Of course, we can also add a <b> label such as a border, background color, underlined underline, and so on, see the following code:

<b style= "border:1px solid #FF6600; Background-color: #FFEFE8; padding:5px; Text-decoration:underline; " > Modified <b> Tags </b>

Here is the effect: the modified <b> label

To sum up, the labels in almost all the corners of the HTML can be used to redefine the style, which in turn changes the default properties of the labels.

Simple beauty: page layout design with tables and paragraphs

Usually, the rookie will use tables and paragraphs for Web page layout design, in fact, this is not the Web page layout design, but a few simple typesetting it; however, the real masters they can only use tables and paragraphs to design beautiful web pages, and absolutely conform to the standards of the world, In most cases, the various browsers are satisfied with the parsing of the code.

First you need to understand why the use of tables and paragraphs for web design, what is the advantage of the collocation between them?

In fact, the advantages of using tables and paragraphs for web design are obvious, first of all, the table as a layout element used in the Web page is very much, designers can arbitrarily use the table to divide the functions of each part of the page. But it must be mentioned that although the table is easy to use but can not abuse, misuse of the table will make the page appears bloated, Web page waste code increased not only waste a lot of bandwidth, reduce the speed of downloading Web pages, affect the user experience, but also violates the search engine to support the simplification of the requirements of web pages, a good web designer Second, the paragraph in the page layout is also a lot of use, a return key is a paragraph, and the code is very concise, easy to use. The final advantage is to use CSS to redefine table attributes and paragraph attributes to achieve a perfect visual effect and to be simple is the highest state of beauty.

Because of the advantages of tables and paragraphs in Web layout design, we can make full use of the functions of both, let the form complete the overall layout, and let the paragraph in detail to give more support for typesetting, this is the "golden combination" the biggest advantage.

Changing face: Flexible use of the label's definable style

Since you want to design a beautiful web page, then it is good to apply color skills, border skills, a better design method is <p> and <td> using the same color,<p> background color is white, and the table background color is compared with <p> and The <td> borders are lighter in color, see the following examples:

<STYLE> pstyle{background-color: #fff; padding:5px; margin:5px; font-size:12px;} td{border:1px solid #FF8040; ba Ckground-color: #FFEBE1; } a{color: #FF8040; </style><table title= page styles are constantly changing cellspacing=3 cellpadding=0 width=250 border=0>< TBODY&GT;&LT;TR&GT;&LT;TD valign=top><p class=pstyle> Here for the defined border and background <p> tags, of course, you can also define line height, font size, inner margin and outside, etc. </p><p class=pstyle> here for the border and background of the <p> label, of course, you can also define row height, font size, inner margin and the outside of the </p><p Class=pstyle > here for <p> labels with borders and backgrounds defined, you can also define line height, font size, inner margin and outside &LT;/P&GT;&LT;/TD&GT;&LT;TD valign=top width=80><p Class=pstyle><a href= "http://www.webjx.com" > Right navigation </A> <p class=pstyle><a href= "http:// Www.webjx.com "> Right navigation </A> <p class=pstyle><a href=" http://www.webjx.com "> Right navigation </A> <p Class=pstyle><a href= "http://www.webjx.com" > Right navigation </A> <p class=pstyle><a href= "http:// Www.webjx.com "> Right navigation </A> <p class=pstyle><a href=" Http://wwW.webjx.com "> Right navigation </A> <p class=pstyle><a href=" http://www.webjx.com "> Right navigation </A> </p &GT;&LT;/TD&GT;&LT;/TR&GT;&LT;TR&GT;&LT;TD align=middle colspan=2><p class=pstyle><a href= "http:// Www.webjx.com "> Bottom navigation </a>|<a href=" http://www.webjx.com "> Bottom navigation </a>|<a href=" http:// Www.webjx.com "> Bottom navigation </a>|<a href=" http://www.webjx.com "> Bottom navigation </a></p></td></ Tr></tbody></table>
Run codeCopy CodeSave CodeCollect this page

All we need to do is define the P, TD, and a style properties for:

<style> . pstyle{ Background-color: #fff; padding:5px; margin:5px; font-size:12px; } td{ border:1px solid #FF8040; Background-color: #FFEBE1; } a{ Color: #FF8040;} </style>

To keep it fresh, you can define several scenarios and randomly invoke the stylesheet. This article uses JS to constantly change the style properties, add the following JS code:

<script language= "JavaScript" > if (document.getElementById) { var r = Math.floor (Math.random () *241); var g = Math.floor (Math.random () *241); var B = Math.floor (Math.random () *241); var rp1, GP1, BP1, Rp2, GP2, BP2, RP3, GP3, BP3; var p1 =. 1; var p2 =. 15; var p3 =. 2; Getlighterrgbshades (); var ri = Math.floor (math.random () *5); var gi = Math.floor (Math.random () *5); var bi = Math.floor (Math.random () *5); } function Setstylebytag (e, P, v) { var elements = document.getElementsByTagName (e); for (var i = 0; i < elements.length; i++) { Elements.item (i). Style[p] = v; } } function Getlighterrgbshades () { Rp1=parseint ((R*P1) + (255-(255*P1)); Gp1=parseint ((G*P1) + (255-(255*P1)); Bp1=parseint ((B*P1) + (255-(255*P1)); Rp2=parseint ((R*P2) + (255-(255*P2)); Gp2=parseint ((G*P2) + (255-(255*P2)); Bp2=parseint ((B*P2) + (255-(255*P2)); Rp3=parseint ((R*P3) + (255-(255*P3)); Gp3=parseint ((G*P3) + (255-(255*P3)); Bp3=parseint ((B*P3) + (255-(255*P3)); } function Changelinkcolor () { if (!document.getelementsbytagname) {return false;}//unclean! unclean! if (r>239| | r<1) ri=ri*-1; if (g>239| | g<1) gi=gi*-1; if (b>239| | b<1) bi=bi*-1; R+=ri; G+=gi; B+=bi; Setstylebytag (' A ', ' color ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ '); Setstylebytag (' P ', ' border ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ ') '); Setstylebytag (' TD ', ' border ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ ') 1px solid '); Getlighterrgbshades (); Setstylebytag (' TD ', ' background ', ' RGB ' (' +rp2+ ', ' +gp2+ ', ' +bp2+ ') '); SetTimeout (' Changelinkcolor () ', 40); } function Getlighterrgbshades () { Rp1=parseint ((R*P1) + (255-(255*P1)); Gp1=parseint ((G*P1) + (255-(255*P1)); Bp1=parseint ((B*P1) + (255-(255*P1)); Rp2=parseint ((R*P2) + (255-(255*P2)); Gp2=parseint ((G*P2) + (255-(255*P2)); Bp2=parseint ((B*P2) + (255-(255*P2)); Rp3=parseint ((R*P3) + (255-(255*P3)); Gp3=parseint ((G*P3) + (255-(255*P3)); Bp3=parseint ((B*P3) + (255-(255*P3)); } function init () { Changelinkcolor (); } </script>

<STYLE> pstyle{background-color: #fff; padding:5px; margin:5px; font-size:12px;} td{border:1px solid #FF8040; ba Ckground-color: #FFEBE1; } a{color: #FF8040; </style><table title= page styles are constantly changing cellspacing=3 cellpadding=0 width=250 border=0>< TBODY&GT;&LT;TR&GT;&LT;TD valign=top><p class=pstyle> Here for the defined border and background <p> tags, of course, you can also define line height, font size, inner margin and outside, etc. </p><p class=pstyle> here for the border and background of the <p> label, of course, you can also define row height, font size, inner margin and the outside of the </p><p Class=pstyle > here for <p> labels with borders and backgrounds defined, you can also define line height, font size, inner margin and outside &LT;/P&GT;&LT;/TD&GT;&LT;TD valign=top width=80><p Class=pstyle><a href= "http://www.webjx.com" > Right navigation </A> <p class=pstyle><a href= "http:// Www.webjx.com "> Right navigation </A> <p class=pstyle><a href=" http://www.webjx.com "> Right navigation </A> <p Class=pstyle><a href= "http://www.webjx.com" > Right navigation </A> <p class=pstyle><a href= "http:// Www.webjx.com "> Right navigation </A> <p class=pstyle><a href=" Http://wwW.webjx.com "> Right navigation </A> <p class=pstyle><a href=" http://www.webjx.com "> Right navigation </A> </p &GT;&LT;/TD&GT;&LT;/TR&GT;&LT;TR&GT;&LT;TD align=middle colspan=2><p class=pstyle><a href= "http:// Www.webjx.com "> Bottom navigation </a>|<a href=" http://www.webjx.com "> Bottom navigation </a>|<a href=" http:// Www.webjx.com "> Bottom navigation </a>|<a href=" http://www.webjx.com "> Bottom navigation </a></p></td></ Tr></tbody></table><script language= "JavaScript" > if (document.getElementById) {var r = Math.floor (Math.random () *241); var g = Math.floor (Math.random () *241); var B = Math.floor (Math.random () *241); var rp1, GP1, BP1, Rp2, GP2, BP2, RP3, GP3, BP3; var p1 =. 1; var p2 =. 15; var p3 =. 2; Getlighterrgbshades (); var ri = Math.floor (math.random () *5); var gi = Math.floor (Math.random () *5); var bi = Math.floor (Math.random () *5); function Setstylebytag (e, P, v) {var elements = document.getElementsByTagName (e); for (var i = 0; i < Elements.lengTh i++) {Elements.item (i). Style[p] = V;}} function Getlighterrgbshades () {rp1=parseint (R*P1) + (255-(255*P1)); Gp1=parseint ((G*P1) + (255-(255*P1)); bp1= parseint ((B*P1) + (255-(255*P1)); Rp2=parseint ((R*P2) + (255-(255*P2)); Gp2=parseint ((G*P2) + (255-(255*P2)); Bp2=parseint ((B*P2) + (255-(255*P2)); Rp3=parseint ((R*P3) + (255-(255*P3)); Gp3=parseint ((G*P3) + (255-(255*P3)); Bp3=parseint ((B*P3) + (255-(255*P3)); function Changelinkcolor () {if (!document.getelementsbytagname) {return false;}//unclean! unclean! if (r>239| | r<1) ri=ri*-1; if (g>239| | g<1) gi=gi*-1; if (b>239| | b<1) bi=bi*-1; R+=ri; G+=gi; B+=bi; Setstylebytag (' A ', ' color ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ '); Setstylebytag (' P ', ' border ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ ') '); Setstylebytag (' TD ', ' border ', ' RGB ' (' +r+ ', ' +g+ ', ' +b+ ') 1px solid '); Getlighterrgbshades (); Setstylebytag (' TD ', ' background ', ' RGB ' (' +rp2+ ', ' +gp2+ ', ' +bp2+ ') '); SetTimeout (' Changelinkcolor () ', 40); function Getlighterrgbshades () {rp1=parseint (R*P1) + (255-(255*P1))); Gp1=parseint ((G*P1) + (255-(255*P1)); Bp1=parseint ((B*P1) + (255-(255*P1)); Rp2=parseint ((R*P2) + (255-(255*P2)); Gp2=parseint ((G*P2) + (255-(255*P2)); Bp2=parseint ((B*P2) + (255-(255*P2)); Rp3=parseint ((R*P3) + (255-(255*P3)); Gp3=parseint ((G*P3) + (255-(255*P3)); Bp3=parseint ((B*P3) + (255-(255*P3)); function init () {Changelinkcolor ();} Init ();</script>
Run code Copy Code Save Code Collect this page

The statement in this Code settimeout (' Changelinkcolor () ', 40), of which 40 refers to the face-changing interval, of course, you can arbitrarily change its size. The code is not complicated and the reader can study it on its own.