css|google| Web page Today we are going to learn how to use the Web standard method to make Google Home (Chinese). Google homepage has been used to layout the table. We use the Google homepage prtscr screen, as the design of the draft reference, and do not open the Google homepage to view its source code-as it does not exist. This is close to the real project work.
building the first part, HTML (based on XHTML transitional)
Read the content from the design manuscript, to try to figure out the structure. Because the whole page content is less, easy to understand, but also met our first question: is using <p> tag or <div>? Each represents the paragraph and division, in principle, there is no paragraph on this page exists, so should not use <p>. But here is a problem, with the style sheet displayed, the <p> clearer, because the default <div> margin and padding values are zero. Well, using <p> <div> is a matter of preference, but in principle the latter should be used. The latter is also used in this example. Start looking for a hand editor to write HTML:
<div><strong>junchenwu@gmail.com</strong> | <a href= "IG" > Personalized Homepage </a> | <a href= "MyAccount" > My Account </a> | <a href= "Logout" > Exit </a></div>
<div></div>
This includes the landing status of the head and the large Logo in the middle. We don't add any style IDs and class first.
Then we see the links in the middle with the "Web Photo information Forum more»". How do you do it? Generally on two kinds of writing, see a person likes. Write these links within a line or write in a UL, as follows:
<div><strong> page </strong> <a href= "pic" > Photo </a> <a href= "info" > Information </a> <a href= "Group" > Forum </a> <a href= "More" ><strong> more»</strong></a></div>
Or:
<ul>
<li><strong> Homepage </strong></li>
<li><a href= "pic" > Picture </a></li>
<li><a href= "Info" > Information </a></li>
<li><a href= "group" > Forum </a></li>
<li><a href= "More" ><strong> more»</strong></a></li>
</ul>
What are the pros and cons of each of these two types of wording? There are 5 items, the first is bold text, the other 4 are links. If you use the first method to control the style, such as controlling the spacing between these 5 items, if you use the second way of writing, in the case of graduation, 5 lines are displayed. Here I write down the shortcomings, according to this case, we still choose the first method, so to control the style of the need to add before and after each item meaningless <span>.
We went on to write a list of three links to the search form and the advanced search on the edge. Which one do you want to write first? Looks like a peer. This is a good time to ask the product designer's intention. We'll write the form here first. As follows:
<form action= "" method= "POST" >
<div><input type= "text" size= "title=" "Google Search"/></div>
<div><button type= "Submit" >google search </button><button> Good luck </button></div>
<div><label><input type= "Radio" name= "T" checked= "checked"/> Search all pages </label> <label> <input type= "Radio" name= "T"/> Chinese page </label> <label><input type= "Radio" name= "T"/> Simplified Chinese page </ Label></div>
</form>
Note Add a label to each item radio button, the effect you can test yourself. In addition, the label contained in the writing, can also be written as <label for= "foo" > for the ID of Foo label </label>. How to write this is to see a person's liking.
Next is the advanced search three links, as well as the bottom of the copyright information, and so on, the code is as follows:
<div><a href= "Advanced_search" > Advanced search </a> <a href= "pref" > Usage preferences </a> <a href= "lang" > Language Tools </a></div>
<div><a href= "AD" > Advertising program </a>-<a href= "All" >google Daquan </a>-<a href= "en" >google.com In english</a></div>
<div>©2007 google</div>
Here we basically finished the HTML construction of the homepage of Google, here is the sample file, we will also trim a part of the code later.
The second part, style sheet
We use the direct style written in the head inside the way, simpler and easier to demonstrate. First we see that in addition to the landing state of the head, the rest are centered and found that the font is Arial, the default text size is px. We add the following style 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;
}
Here the PX is used as the absolute unit. About absolute units and relative units, online related articles a lot, and has been the Web front of the hot topic, this article for the sake of simplicity, direct use of absolute units.
Then we incrementally add other styles:
#login {/* This is the landing state of the head * *
Text-align:right;
}
#stype {/* This is the 5 search types mentioned above * *
margin-bottom:4px;
}
#stype span{/* Here to add meaningless span*/
Padding:0 6px;
}
After the search form, we encountered a style of difficulty, first as the search for size 55 of the input box from the layout is absolutely centered, and the right advanced search that three items width plus the input box is not absolutely centered. In other words, visual, advanced search that three items on the right. As shown in the following illustration:
Here we use the absolute positioning method to handle it (in HTML, the three items in the advanced search are placed within the form):
#search {/* This is the search form * * *
margin:0 Auto;
width:400px;
position:relative;
}
#more {
Width:4em; /*4 the width of a Chinese character so that it can form a similar list.
Position:absolute;
top:0;
Right: -4.5em;
}
Finally we add the bottom link and the Copyright Information Section Style:
#ft {
margin:54px Auto 16px;
}
Preview in the browser and fine-tune the values, so that the completion of the Google home page production.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>google</title><style type=" text/css >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;} #stype span{padding:0 6px;} #search {margin:0 auto; width:400px; position:relative;} #more {width:4em; position:absolute; top:0; right: -4.5em;} #ft {margin:54px auto 16px;} </style></pead><body><div style= "Text-align:right" ><a href= "IG" > Personalized Homepage </a> | <a href= "MyAccount" > My Account </a> | <a href= "Logout" > Exit </a></div><div style= "margin:4px auto 19px;" ></div><div id= "stype" ><span><strong> Web page </strong> </span> <span><a href= "pic" > Pictures </a></span> <span><a href= "info" > Information </a ></span> <span><a href= "group" > Forum </a></span> <span><a href= "More" > <strong> more»</strong></a></span></div><form id= "search" action= "" method= "POST" ><div><input type= "text" size= "title=" Google search "/></div><div><button type=" submit ">google Search </button><button> Good luck </button></div><div style=" MARGIN-TOP:6PX; ><label><input type= "Radio" name= "T" checked= "checked"/> Search all pages </label><label><input Type= "Radio" name= "T"/> Chinese page </label><label><input type= "Radio" name= "T"/> Simplified Chinese web page </label> </div><div id= "More" ><a href= "Advanced_search" > Advanced search </a> <a href= "pref" > MakeWith preferences </a> <a href= "lang" > Language tool </a></div></form><div id= "FT" ><a href= "ad" > Advertising Plan </a>-<a href= "All" >google Daquan </a>-<a href= "en" >google.com in English</a></div ><div>©2007 google</div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
