Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to use DIV CSS page layout to achieve Google home page, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

We take a screenshot of the Google home page with PrtScr as a reference for the design at the time of production, and do not open the Google home page to view its source code-just as if it doesn't exist. This is closer to the real project work.

Implementation of Google homepage with DIV CSS page layout

Today we will learn to use the Web standard method to make the Google home page (in Chinese). The Google home page has always been laid out in table. We take a screenshot of the Google home page with PrtScr as a reference for the design at the time of production, and do not open the Google home page to view its source code-just as if it doesn't exist. This is closer to the real project work.

Construction of HTML for * part and DIV CSS page layout (based on XHTMLTransitional)

From the content seen in the design draft, to figure out the structure. Because the content of the whole page is less and easy to understand, but we also encounter a problem: using the

The label is still

? Each stands for paragraph and division. In principle, there are no paragraphs on this page, so you should not use the

. But there is a problem here. Put aside the stylesheet and use the

Clearer because of the default

Both the margin and padding values of Okay, use it.

Still use

It is a matter of personal preference, but the latter should be used in principle. The latter is also used in this example. Start to find a good editor to write HTML:

Junchenwu@gmail.comstrong > | Personalized home page a > | my account a > | exit a > div > div >

This includes the login status of the head and the big Logo in the middle. Let's not add any styles id and class yet.

Then we see the links to "Web Picture Information Forum more »" in the middle. How? Generally speaking, there are two ways to write, depending on your personal preference. Write these links on one line or in a ul, as follows:

Page strong > Picture a > Information a > Forum a > more »strong > a > div >

Or:

Page strong > li > Picture a > li > Information a > li > Forum a > li > more »strong > a > li > ul >

What are the advantages and disadvantages of each of these two writing methods? There are five items here, the * items are bold text, and the other four items are links. If you use the * writing method to control the style, such as controlling the distance between the five items, if you use the second writing method, you will be divided into five lines in the case of breaking away from the style. Here I write all the shortcomings, according to this example, we still choose * writing, so that to control the style, we need to add meaningless before and after each item.

Let's go on and come across three links, such as the search form and the advanced search on the side. Which one should I write first? It looks like a level. At this time, ask the product designer what he meant. Let's write the form here first. As follows:

Div > Google search button > lucky button > div > search all pages label > Chinese pages label > simplified Chinese pages label > div > form >

Pay attention to add a label to each radiobutton, and you can test the specific effect by yourself. In addition, the writing method included in label is used here, or it can be written as a label with foo for id. How to write this also depends on personal preference.

Next is the advanced search and other three links, as well as the copyright information at the bottom, the code is as follows:

Advanced search a > usage preference a > language tool a > div > Advertising Plan a >-Google complete Book a >-Google.cominEnglisha > div > ©2007Googlediv >

At this point, we have basically completed the HTML construction of the home page of Google. Here is the sample file, and we will fix some of the code later.

The second part, the style sheet of DIV CSS web page layout.

We use the way to write the style directly in head, which is relatively simple and easy to demonstrate. First of all, we see that except for the login status of the head, the rest are centered, and we find that the font is Arial and the default text size is 13px. We added the following styles to the head area:

Body {font-family:Arial,sans-serif; font-size:13px; text-align:center; margin-top:3px;} a:link {color:#00C;} a:visited {color:#551a8b;}

The absolute unit of px is used here. About absolute units and relative units, there are many related articles on the Internet, and it has always been a hot topic at the front desk of Web. For the sake of simplicity, use absolute units directly.

Then we gradually add other styles:

# login {/ * this is the login status of the header * / text-align:right;} # stype {/ * this is the five search types mentioned above * / margin-bottom:4px;} # stypespan {/ * meaningless span*/ padding:06px;} has been added here

After the search form, we encountered the difficulty of styling. First of all, the input box with a size of 55 as the search is absolutely centered in terms of layout, while the width of the three items on the right side of the advanced search plus the input box is not absolutely centered. That is to say, visually, the three advanced search items are to the right. As shown in the following figure:

Here we use the absolute positioning method to deal with it (put the contents of the three advanced search items into the form in HTML):

# search {/ * this is the search form * / margin:0auto; width:400px; position:relative;} # more {width:4em;/*4 Chinese characters wide, which can form a list-like effect * / position:absolute; top:0; right:-4.5em;}

* We add the style of the bottom link and copyright information section:

# ft {margin:54pxauto16px;}

Preview and fine-tune the values in the browser to complete the production of the Google home page.

The third part, the complete code of DIV CSS web page layout.

As follows:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Googletitle > body {background:#FFF; color:#000; font-family:Arial,sans-serif; font-size:13px; text-align:center; margin-top:3px;} a:link {color:#00C;} a:visited {color:#551a8b;} # login {text-align:right;} # stype {margin-bottom:4px } # stypespan {padding:06px;} # search {margin:0auto; width:400px; position:relative;} # more {width:4em; position:absolute; top:0; right:-4.5em;} # ft {margin:54pxauto16px } style > head > Personalized homepage a > | my account a > | quit a > div > div > webpage strong > span > Picture a > span > Information a > span > Forum a > span > more »strong > a > span > div > div > Google search button > lucky button > div > search all pages label > Chinese Page label > simplified Chinese Page label > div > Advanced search a > use preference a > language tool a > div > form > Advertising Plan a > Google Quan a > Google.cominEnglisha > div > ©2007Googlediv > body > html > read the above Do you know more about how to use DIV CSS page layout to implement Google home page? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.