Site original content, reproduced please indicate the source Web page teaching network .
We have seen a lot of web pages can achieve a variety of style display, such as dynamic Network forum, and so on, and many sites are set up a variety of styles, user-friendly users according to their own set style to browse your site.
Methods of implementation I'm not talking here. Today I will introduce a very simple method, with Css+js simple method can achieve a variety of Web page style display.
The methodology provided in this tutorial is useful when you want to do a home page.
I think this is the best way to achieve this, if there are other simple ways to discuss with me. qq:76312395 website: http://www.webjx.com, do not talk nonsense, the following start to introduce how to achieve the method:
When we set the style of the Web page, we usually use CSS to set the following code:
<link rel= "stylesheet" type= "Text/css" href= "Style1.css"/>
Using the above code we usually set the style1.css content beforehand, then put the above code in the Head area, if you are not clear, you can see the relevant CSS tutorial to set. When the page is loaded, the content of our page will be displayed according to the style set by STYLE1.CSS. If we want to achieve a variety of styles of display, then we have to change the contents of the above label slightly, we can add a title attribute, the following code:
<link rel= "stylesheet" type= "Text/css" href= "Style1.css" title= "Style1"/>
If you add the above code to a Web page, the effect is the same as it would be when you browse the page, but then we have named a title for the loaded Style1.css. This style is the default style of our web page, then if we want to add another style, then we only have to change the value of the Rel property. The specific code is as follows:
<link rel= "Alternate" type= "Text/css" href= "Style2.css" title= "Style2"/>
The STYLE2.CSS will also be loaded when the browser is browsed, but the rel attribute is alternate, which is implemented although it is loaded but will not show the effect. If we also want to make style2.css to achieve the display effect, then the approach is that we notice that the above code has the title attribute, we can try to use a function to call the title property to achieve the effect of the Web page to display style2.css. This is we can use JS to write a function to achieve the Web page a variety of style display.
Our approach is to do a number of links on the Web page (of course, the connection is very much, such as moving the web forum is used drop-down menu), when the click of the connection to call different CSS files, so as to achieve a variety of Web page style display. Here because the content of the function is more, we can make a JS file, and then add the following code on the page:
<script type= "Text/javascript" src= "Stylealter.js" ></script>
Then we add the following code to the body of the Web page:
<a href= "#" >sytle1 style display </a>
<a href= "#" >sytle2 style display </a>
Provide to everyone source files:
<HEAD>
<TITLE> set a variety of styles for the Web page example </TITLE>
<meta http-equiv=content-type content= "text/html; charset=gb2312 ">
<link title= "Style1" href= "style1.css" Type=text/css rel= "stylesheet" >
<link title= "Style2" href= "style2.css" Type=text/css rel= "Alternate stylesheet" >
<script src= "Stylealter.js" type=text/javascript></script>
<meta content= "MSHTML 6.00.2800.1106" name=generator>
</HEAD>
<BODY>
<P> Web Teaching network http://www.webjx.com default style </P>
<br/><br/>
<a href= "#" > Default style </A>
<BR>
<a href= "#" > Second style </A>
</BODY>
</HTML>
Save the above code as a file with an. htm (or. html) extension
Provide style1.css ,style2.css, stylealter.js Downloads
Click here to see the demo effect!
Of course I give you the above. htm (or. html) files and Style1.css, Style2.css and stylealter.js to the same directory, if not in the same directory then you have to change href= "Style1.css" and src= " Stylealter.js "Directory!
The purpose of this example is to introduce the Web page to show a variety of styles, CSS settings are very simple, I hope you learn ways to set up a more complex CSS, your page is beautiful. Go and try it!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
