Baidu Homepage (practice)

Learned a few days of HTML and CSS, did a Baidu homepage when the exercise (because the simplest). Since I haven't seen JavaScript yet, I just try to make the layout similar.

Baidu's homepage is relatively simple, roughly divided into three parts: the top right corner of the label, logo and forms, the following copyright information.

The first is the top part of the code:

1 <Divclass= "Top">2     <Divclass= "title">3         <span>4             <aclass= "Bold"href="#">News</a>&nbsp;5             <aclass= "Bold"href="#">Hao123</a>&nbsp;6             <aclass= "Bold"href="#">Map</a>&nbsp;7             <aclass= "Bold"href="#">Video</a>&nbsp;8             <aclass= "Bold"href="#">Stick</a>&nbsp;9             <ahref="#">Landing</a>&nbsp;Ten             <ahref="#">Set up</a>&nbsp; One             <inputclass= "List"type= "Submit"value= "More Products"name= "Submit" />&nbsp; A         </span> -     </Div> - </Div>

This part of the style sheet:

. Top{width:100%;Height:64px;}. Top>.title{Height:64px;float: Right;}. Top>.title>span{Line-height:64px;float: Right;}. Top>.title>span>a{font-size:13px;font-family:"The song Body";text-decoration:Underline;Color:#333}. Top>.title>span>.bold{Font-weight:Bold;}. List{Border:0;Height:25px;width:60px;background:#36F;Color:#fff;}

A lot of layers are nested here. First, the top setting width allows the landscape to fill the entire page.

Top inside the title this layer uses float:right; Let the content align to the right.

The span in title is more than one, and is vertically centered with line-height.

The width of title and span are self-adapting.

The font styles of several labels are better defined, just the last "more product", where the button in the form is used to define the width and height, the background color, and the font color. If you want to make a solid color button also remember to change the border to 0.

The effect is probably like this (Chrome):

Compare Baidu's page:

The effect is basically the same (there seems to be a typo)

However, "more products" this part of the text and left alignment, but the top and bottom border of the button is not aligned with what, do not know that the design of the error AH (personally think carefully look at the time a little bit uncomfortable).

The following is the body part, the code is posted first:

<Divclass= "Body">    <Divclass= "Pic">        <imgclass= "logo"src= "Logo.png" />    </Div>    <Divclass= "Search">        <form>            <label for= "Search"></label>            <inputclass= "Input"type= "text"name= "Search"ID= "Search"value="" /><inputclass= "BTN"type= "Submit"value= "Baidu a bit"name= "Submit" />        </form>    </Div></Div>

Style sheet:

. pic{text-align:Center;Margin-bottom:30px;}. Logo{Height:130px;width:270px;}. Search{text-align:Center;}. Input{width:540px;Height:36px;}. BTN{Border:0;width:100px;Height:40px;background:#36F;font-size:15px;Color:#fff;}

Body is divided into two blocks: Picture and search box.

The picture is wrapped in a div to keep the picture horizontally centered and to pull some distance from the top layer. The picture itself also needs to be resized.

The Search box section uses a form and adjusts the horizontal center of the layer for search.

Here the form and button style table to write more:

The form as long as the adjustment and height can be, the button as before, in addition to the width of the font and background, in addition to the border set to 0 will be a flat button.

The pages made are only one detail and the original page is different:

The forms and buttons on the original page are strictly aligned, and you have a bit of offset.

(Workaround pending Update)

Finally, the copyright section at the bottom:

<Divclass= "Foot">    <Divclass= "link">        <ahref="#">Set Baidu as your homepage</a>&nbsp;        <ahref="#">About Baidu</a>&nbsp;        <ahref="#">About Baidu</a>    </Div>    <Divclass= "Copyright">        <P>©2015 Baidu<ahref="#">Use Baidu before must read</a> <ahref="#">View Feedback</a>Beijing ICP Certificate No. No. 030173</P>    </Div></Div>

Css:

. Foot{width:100%;position:Absolute;Bottom:100px;}. Foot>.link{text-align:Center;Margin-bottom:10px;}. Foot>.link>a{font-size:12px;font-family:"The song Body";text-decoration:Underline;}. Copyright{text-align:Center;}P,p>a{font-size:12px;font-family:"The song Body";Color:#666;}

Here to illustrate, I think the foot part should refer to the bottom of the page to locate the more semantic, so the use of absolute and the bottom of some distance (and Baidu almost distance).

The two lines of information are defined by two blocks, each set horizontally centered. The effect is as follows:

Original page:

The effect is still very close, look at the whole (Chrome):

I feel good besides not being able to point.

Try to write a more complicated page next time.

(Ps:ie is not put because it is a bit miserable)

Baidu Homepage (practice)