Div + CSS is a simple web page design. Javascript provides convenience for interactions that require adding actions. XML makes data storage easier; to reduce the interaction between pages and servers, Ajax technology can be used to combine with CSS, such as Gmail mail. When receiving emails, only new emails are added without refreshing new pages, in this way, the bandwidth occupied by other parts of the page will be reduced and more bandwidth will be used in useful places! More in line with user needs.
Below I will learn through three examples. as JavaScript and XML on the front side have already been learned, and there is another piece dedicated to learning Ajax on the back end. Here we just use CSS to combine it. Let's take a simple look at it through examples!
First, let's take a look at a small example of combining JavaScript and CSS to meet our needs:
<HTML>
:
In this example, the front side uses CSS to control the style of the interface. Later, A JavaScript function changecolor is used to change the color of the CSS font through the three primary colors that the user inputs, it achieves good interaction with users!
2. For the combination of CSS and XML, I think this can better display the data. For example, we can design the left sidebar in this way. Let's look at a simple example, I used XML to monetize a Tang Song, and CSS made it very nice! This is an XML file:
<? XML version = "1.0" encoding = "gb2312"?> <? XML-stylesheet type = "text/CSS" href = "poem.css"?> <Poem> <title> quiet night thinking </title> <author> Tang Li Bai </author> <verse> moonlight in front of bed <br/> suspected to be frost on the ground <br/> <br/> shousi hometown </verse> </poem>
This is the corresponding CSS file:
Poem {margin: 0px; Background: url(poem.jpg) No-Repeat;/* Add a background image */width: 360px; Height: 490px; position: absolute; /* absolute positioning */left: 0px; top: 0px;} title {font-size: 19px; color: # FFFF00; position: absolute; left: 62px; top: 150px;} author {font-size: 12px; color: #4f2b00; position: absolute; left: 100px; top: 176px;} verse {position: absolute; /* absolute positioning */color: # ffffff; font-size: 14px; left: 55px; top: 200px; line-Height: 20px; /* line spacing */} BR {display: block;/* display the lines of lines */}
Display Effect:
In this way, the data of a poem is very good. The advantages of XML have been summarized in the previous blog. Through XML, we can easily implement some things that are difficult to implement in HTML.
3. Let's take a look at the combination of CSS and Ajax. Ajax has no systematic learning yet. Let's take a look at it first, and we will learn it later.
First, the core of AJAX is the JavaScript Object XMLHttpRequest. This object is first introduced in internetexplorer5. It is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to request and process responses to the server without blocking users. Examples that you are familiar with include Google Maps and Google Mail, which are mainly asynchronous request technologies. They only update what users need, while others do not.
Let's look at an example:
<HTML>
In this example, CSS is used to control the page, and Ajax technology in Javascript is used to compile the change event in the input box. The page is not updated, but is changed by the input box, to request the server! :
All in all, we use HTML, XML, JavaScript, CSS, Div, Ajax, and other languages and technologies for the page design in B/S. These languages and technologies have their own advantages, good understanding of this knowledge can make B/S development easier!