the PSD to div CSS page cut figure sample
code is as follows:


* {
margin: 0 px;
the padding: 0 px;
}

step 2: put our website background of overall implementation, we want to center content, the result of the background gradient is always covered with screen.
in this case, we can add the background image for the body. To make the base tile along the horizontal direction.

  code is as follows:  


body {
background: url (image/bj. JPG) repeat - x;
}
  Picture
converting PSD cut figure div + CSS format
code is as follows:


<Div id="header" ></div>
<Div id="nav" ></div>
<Div id="banner" ></div>
<Div id="main" ></div>
<Div id="footer" ></div>

PS measurements, through this five parts occupy 950 wide, and centered. We could use group selectors, let these five DIV center.

  code is as follows:  


# header, # nav # banner, # # main, footer {
margin: 0 px auto;
width: 950 px;
}

the fourth step: to complete the header part head
LOGO: this part generally there are two requirements. 1 click on LOGO to return to homepage. 2 should pay attention to SEO? So we have adopted the following HTML code:
<H1 ><A href=http://www.jb51.net//web/" # " >Beijing jie fly CSS page cut figure </a> </h1 >
so how CSS coding the implementation?
you can can think about it first. And then looking at I here to write CSS code, this place is actually CSS techniques in an effort to change words. CSS code the following

  code is as follows:  


# header h1 a {
background: url (image/logo. JPG);
width: 476 px;
height: 102 px;
display: block;
text text-indent: - 9999 px;
}

good. Now we went on to finish the head right hand side, or the preparation of the HTML code to the

  code is as follows:  


<Ul>
<Li> <A href="http://www.jb51.net//web/#" >CSS cut figure training </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Set as home page </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Join the collection </a> </li>
</ul>

CSS code:

  code is as follows:  


# header h1 {
float: left;
}

we first H1 left floating. So the right side of the UL part shows the counterparts can.

  code is as follows:  


# header ul {
float: left;
the padding: 50 px 0 px 0 px, 200 px;
the list - style: none;
}

in order to avoid the problem, can make UL also float. You can try, if not setting floating in every version of Internet explorer, firefox performance are consistent in the

  code is as follows:  


# header ul li {
float: left;
the padding: 0 px 10 px;

} code in firefox and Internet explorer 8 above there is no problem, but there will be a problem in IE6. We will talking at the back. # header ul li a {

color: # 555;
text - decoration: none;
the font - size: 13 px;

} # header ul li a: hover {
color: # 000;
text - decoration: underline;
}

this time results showed as follows:

converting PSD cut figure div + CSS format
code is as follows:


<Ul>
<Li> <A href="http://www.jb51.net//web/#" >Homepage </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Web site production </a> </li>
<Li> <Made <a href="http://www.jb51.net//web/#>/a> </li>
<li> <a href=" http://www.jb51.net//web/#” >Office training </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Graphic design jobs </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Div CSS training </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Contact us </a> </li>
</ul>

now direct navigation code will have a problem. If studied box model and float should know.
the navigation part of the text run to the header on the right side of the head. How to solve?
should we actually everything clear floating work
CSS

  code is as follows:  


the clear {
clear: both;
}

this time for us <Div id=" Nav" ></div>
became <Div id=" Nav" Class=&throughout; Clear” ></div>
you have a look at the now, is to solve the above problem. Actually if we according to the standard box model calculation, if calculated properly, won't appear this problem.
to complete navigation CSS style

  code is as follows:  


# nav {
padding - top: 3 px;

} # nav ul {
the list - style: none;

} # nav ul li {
float: left;
}

default li is occupying the entire line show, so through the left float. To make it in one line display. In setting up A state, after get the result we want to test: let LI has wide and high, and then set A background, can reach the effect we, don't let into A block

  code is as follows:  


# nav ul LI A {
display: block;
width: 135 px;
height: 56 px;
the line - height: 56 px;
color: # FFF;
text - align: center;
text - decoration: none;
the font - size: 14 px;
}

display: block; Make A element block, then good for its high set wide background. There is also the main point is the line - height: 56 px, px height with 56, what effect can be achieved. The students think about it?

  code is as follows:  


# nav ul li a: hover {
background: # 177 cb7;
}

now our navigation basic has already been completed, but also an effect of the current state of the navigation. What should I do?
actually very simple is for the current page is A link to add an ID for the current tag. Is as follows:

  code is as follows:  


<A href="http://www.jb51.net//web/#" id="current" >Homepage </a>

then the status and when hovering is consistent, so it is very simple, need only in hovering state behind add a # nav in ul li # current selector. You don't finish
converting PSD cut figure div + CSS format
code is as follows:


<Img SRC="http://www.jb51.net//web/image/banner.jpg" height="184" SRC="http://files.script-home.com/file_images/article/201304/psdcutpic/image005.jpg" width="127"/>

on the right side navigation HTML code:

  code is as follows:  


<Div class="subMenu" >
<H5 >Training course </h5 >
<Ul>
<Li> <A href="http://www.jb51.net//web/#" >Homepage </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Web site production </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Web site production </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Web site production </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Web site production </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Div CSS training </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >Div CSS training </a> </li>
<Li> <A href="http://www.jb51.net//web/#l" >Contact us </a> </li>
</ul>
</div>

CSS code: the code at the bottom of the production process has been said above. So give out directly, no longer lecture.

  code is as follows:  


# main {
the padding: 10 px 0 px;

} #. The main container {
width: 674 px;
margin - right: 50 px;
float: left;

} # main. The subMenu {
width: 226 px;
float: left;
margin - bottom: 10 px;

} # main. The subMenu h5 {
background: # 19577 c;
height: 39 px;
text - align: center;
color: # FFF;
the font - size: 15 px;
the line - height: 39 px;

} # main. The subMenu ul li {
border - bottom: 1 px solid # d4d4d4;
background: # f1f1f1;

} # main. The subMenu ul li a {
display: block;
color: # 000;
height: 36 pixels;
the line - height: 36 pixels;
text - decoration: none;
padding - left: 60 px;
background: url (image/li. JPG) no - 50% repeat 40 px;

} # main. The subMenu ul li a: hover {cb7
color: # 177;
background: url (image/li3. JPG) no - 50% repeat 40 px;
}

step 8: the body of the content area code: through the above effect pictures, you can think about how to write HTML first. I is the use of DLDD way, everybody must learn the usage of the symbol, is very common, regular product as they are used.
we now look at the HTML code:

  code is as follows:  


<Div class="news" >
<Dl class="xuexiao >"
<H5 >School profile <A href="http://www.jb51.net//web/#" ><Img SRC="http://www.jb51.net//web/image/more.jpg"/></a> </h5 >
<Dt> <Img SRC="http://www.jb51.net//web/image/223.jpg" SRC="http://files.script-home.com/file_images/article/201304/psdcutpic/image006.jpg" width="488"/>
<! -- [if Internet explorer 6] >
<! [endif] -- >

mean IE6 only can identify the above code. So that we can separate for IE6 editing style.

  code is as follows:  


<! -- [if Internet explorer 6] >
<Style type "text/CSS" ># header ul li {

width: 80 px;
float: left;
the padding: 0 px 10 px;
}

Header added head width value

  code is as follows:  


#. The main container dl dt img {
border: 1 px solid # CCC;

} #. The main container dl. Xuexiao dt {
float: left;
width: 110 px;

} #. The main container dl. Xuexiao dd {
the font - size: 12 px;
margin - left: 20 px;
float: right;
width: 145 px;
text text-indent: 2 em;

} # footer {
margin - top: - 10 px;
}
</style>
<! [endif] -- >

inside also involved some other knowledge. In the subsequent course going on.# 0 - #


This concludes the body part