Hanshunping _php from Getting started to mastering _ Video Tutorial _ 20th _ Imitation Sohu Home Layout _ Cute Home Page _ Learning Notes _ source code diagram _ppt document collation

Hanshunping _php from Beginner to Proficient _ Video Tutorial _ 20th _ Imitation Sohu First page layout _ Cute Home Page _ Learning Notes _ source code diagram _ppt document collation
Analysis of the Sohu page

Note is important

Experience: Write a little, test a little, this is a good way. Don't write it over, test it again, it's not right, you don't know where it went wrong.

Material

logo.jpg

Right.jpg

Sohu.html

 
  
 
  Sohu Home
 
  Login Form set the first page Hypertext
 
   links
 
  
 
   Recruitment advertising campaign Advertising real estate advertising

Sohu.css

body{margin:0 auto;/* give a background or border to facilitate debugging */border:1px solid green;width:950px;/* height and then remove */height:800px;font-size:12px;}. top{width:950px;background:silver;height:24px;}. login{width:350px;height:22px;background:pink;/* float automatically converts rows to block elements and takes the width and Height properties */float:left;}. setindex{width:85px;height:20px;background:green;float:left;margin-left:50px;}. myhref{float:right;margin-right:5px;margin-top:3px;} /* my logo*/.logo{width:138px;height:56px;background:blue;float:left;margin-top:3px;}. Logo img{width:138px;height:56px;} /* navigation */.navi{width:800px;height:56px;background:green;float:left;margin-top:3px;margin-left:10px;} /* Overall advertising div*/.adall{width:950px;height:211px;border:1px solid red;background:silver;margin-top:3px;float:left}/* Enrollment Advertisement */.adstu{width:126px;height:195px;background:green;float:left;margin:5px 0 0 5px;}. adsport{width:451px;height:195px;background:green;float:left;margin:5px 0 0 15px;} /* Real Estate advertising */.adfdc{width:151px;height:195px;background:green;float:left;margin:5px 0 0 15px;} /* Image ads */.adimg{width:180px;height:211px;background:pink;float:right;/* around the office */text-align:center;border-left:1px Solid red;}. ADIMG img{/* Vertical Bureau is not good to do */margin-top:12px;}

Finally remove the background color, IETester multi-browser test

On the homepage layout of Imitation Sohu website, when you master, you have the basic skills of writing more complicated pages.

Cute House Analysis
No material, just listen to the explanation.



code snippets introduced by Flash

background map css file
Background:url (' nav_bg_right.gif ');

The mouse is placed in color change on navigation barThe head-up, with a picture of the top and bottom separations, and then in the CSS
When the mouse moves to the position of span, the background coordinates are not the same as the common coordinates.
#navi a:hover span{
background-position:100% -50px;
}



*{
font-size:12px;
margin:0;
padding:0;
border:0;

}

Hanshunping _php from Getting started to mastering _ Video Tutorials _ Learning Notes _ source code illustration _ppt Document Sorting _ Directory

