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

Source: Internet
Author: User
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


  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.