PSD Turn div CSS page cut diagram example

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The first step: first put all the marks organising inside and outside the margin organising 0, in fact, there is another way is based on the body inside the HTML tag used to reset to 0. You can also reset it to 0 with a * and reset it based on the tag used in the body. For example: we use the body tag, Div, P then we can write body,div,p on the selector. No need to write *.

*{

margin:0px;

padding:0px;

}

The second step: the overall background of our web page to achieve, we want the result content centered, the background gradient is always covered with the screen.

In this case, we can add a background image to the body. You want the base to be tiled horizontally.

body{

Background:url (image/bj.jpg) repeat-x;

}

Step three: By observing we can divide our web page into five parts first, then write the corresponding HTML code for it.

HTML code:

<div id= "Header" ></div>

<div id= "NAV" ></div>

<div id= "banner" ></div>

<div id= "main" ></div>

<div id= "Footer" ></div>

Through PS measurements, these five parts occupy 950 wide and are centered. We can use the group selector to center the five Div first.

#header, #nav, #banner, #main, #footer {

margin:0px Auto;

width:950px;

}

Fourth step: Finish header Head Part first

Logo: Generally this part has two requirements. 1 Click logo can return to the home page. 2 should pay attention to SEO aspects? So we used the following HTML code:

<h1><a href= "#" > Beijing Jerry-Fly CSS page cut map </a></h1>

So how does CSS coding work?

You can think about it first. And then look at my bottom to write CSS code, in fact, this place is to use CSS to map word skills. The CSS code is as follows

#header H1 a{

Background:url (image/logo.jpg);

width:476px;

height:102px;

Display:block;

text-indent:-9999px;

}

Good. Now we're going to do the right side of the head, or the HTML code first.

<ul>

<li><a href= "#" >css Chettu training </a></li>

<li><a href= "#" > Homepage </a></li>

<li><a href= "#" > Add to Favorites </a></li>

</ul>

CSS code:

#header h1{

Float:left;

}

We first let H1 float on the left. So the right part of the UL can be shown in the peer.

#header ul{

Float:left;

padding:50px 0px 0px 200px;

List-style:none;

}

In order to avoid problems, can let the UL also float. You can try, if not set floating in IE versions, Firefox performance is consistent

#header ul li{

Float:left;

padding:0px 10px;

}

The top code has no problem with Firefox and IE8, but there are problems in IE6. We'll explain it later.

#header ul Li a{

Color: #555;

Text-decoration:none;

font-size:13px;

}

#header ul Li a:hover{

Color: #000;

Text-decoration:underline;

}

The results are as follows:

The fifth step: completes the navigation effect, the effect explanation: the mouse puts on the background to become the light blue color, and wants to make the current page the effect.

HTML code:

<ul>

<li><a href= "#" > Home </a></li>

<li><a href= "#" > website production </a></li>

<li><a href= "#> website production </a></li>

<li><a href= "#" >office training </a></li>

<li><a href= "#" > Graphic Design Employment </a></li>

<li><a href= "#" >div CSS Training </a></li>

<li><a href= "#" > Contact Us </a></li>

</ul>

The code that directly writes the navigation now creates a problem. If you have studied the box model and floating all should know.

The navigation portion of the text runs to the right of the header head. How to solve it?

In fact, it's time for us to clean up the float.

CSS Code

. clear{

Clear:both;

}

This time for us <div id= "NAV" ></div>

became <div id= "NAV" class= ". Clear" ></div>

Now, if you look at it, is it a solution to the problem above? In fact, if we follow the standard box model calculation, if the calculation is appropriate, this problem will not occur.

CSS style to complete navigation

#nav {

padding-top:3px;

}

#nav ul{

List-style:none;

}

#nav ul li{

Float:left;

}

The default Li is to occupy the entire row, so it floats through the left. Make it appear on one line. After setting the state of a, reach the result we want

#nav ul Li a{

Display:block;

width:135px;

height:56px;

line-height:56px;

Color: #fff;

Text-align:center;

Text-decoration:none;

font-size:14px;

}

Display:block, let a element become blocky, then set a wide background for it. There is also a key point is line-height:56px, with the height of 56px corresponding, can achieve what effect. Students think about it?

#nav ul Li a:hover{

Background: #177cb7;

}

Now we have basically finished the navigation, but there is less of a current state of navigation effect. What to do.

It's really simple to add a tag with the ID current to the A link for the page that is currently on it. Follows：

<a href= "#" id= "current" > Home </a>

Then this state and mouse hover is consistent, so very simple, just want to hover in the state behind the mouse to add a #nav ul Li A#current selector. Are you done?

Sixth Step: Product Publicity Banner Pictures, the company's website will generally be an animation or js/jquery special effects. Right now we're just going to put a picture

<img src= "image/banner.jpg" alt= "Beijing Jie Fei Computer training" title= "Beijing Jie Fei computer training"/>

The necessary attributes are alt must be added. Replace the text, when the picture does not load properly, there is to optimize.

Tips:

Because many times to use UL. You need to add a default dot. So write list-style:none in the *; So there's no need to write anywhere else. Actually contains the text color size, and so on, if many places are the same. The same can be declared to the * selector.

Step Seventh: Complete the content area

Train of thought: we can divide the content area into two parts: part is the left navigation, and part is the main content area. So I'm going to encode HTML first:

<div class= "Container" >

Test

</div>

Now let's take a look at the results of the right-hand navigation.

Right Navigation HTML code:

<div class= "submenu" >

<h5> Training Courses </h5>

<ul>

<li><a href= "#" id= "current" > Home </a></li>

<li><a href= "#" > website production </a></li>

<li><a href= "#" > website production </a></li>

<li><a href= "#" > website production </a></li>

<li><a href= "#" > website production </a></li>

<li><a href= "#l" >div CSS Training </a></li>

<li><a href= "#l" >div CSS Training </a></li>

<li><a href= "#" > Contact Us </a></li>

</ul>

</div>

CSS code: The following code in the production process has been said. So give it straight out and no longer explain.

#main {

padding:10px 0px;

}

#main. container{

width:674px;

margin-right:50px;

Float:left;

}

#main. submenu{

width:226px;

Float:left;

margin-bottom:10px;

}

#main. Submenu h5{

Background: #19577c;

height:39px;

Text-align:center;

Color: #fff;

font-size:15px;

line-height:39px;

}

#main. submenu UL li{

border-bottom:1px solid #d4d4d4;

Background: #f1f1f1;

}

#main. submenu ul Li a{

Display:block;

Color: #000;

height:36px;

line-height:36px;

Text-decoration:none;

padding-left:60px;

Background:url (image/li.jpg) no-repeat 40px 50%;

}

#main. submenu ul Li a:hover{

Color: #177cb7;

Background:url (image/li3.jpg) no-repeat 40px 50%;

}

Eighth step: The content of the main area code: through the above effect of the picture, you can first think about how to write HTML. I am using the dldd way, we must learn the use of this mark, very commonly used, the description of products often used.

Now let's look at the HTML code:

<div class= News >

<DL class= "Xuexiao" >

<h5> School Profile <a href= "#" ><img src= "Image/more.jpg"/></a></h5>

<dt><img src= "image/223.jpg" alt= "Jay Fei logo"/></dt>

<dd> Fei School Features: The implementation of family-style teaching model, the perfect combination of small class teaching can follow the study, can be scheduled for class, can be completely based on the actual situation of students teaching, to ensure that the institute so far ......</dd>

</dl>

<DL class= "Xinwen" >

<h5> School News <a href= "#" ><img src= "Image/more.jpg"/></a></h5>

<dd><a href= "#" > Discussion on color scheme in graphic design </a><span>2013-4-14</span></dd>

<dd><a href= "#" > Discussion on color scheme in graphic design </a><span>2013-4-14</span></dd>

<dd><a href= "#" > Discussion on color scheme in graphic design </a><span>2013-4-14</span></dd>

<dd><a href= "#" > Discussion on color scheme in graphic design </a><span>2013-4-14</span></dd>

</dl>

</div>

Next is the HTML encoding for the bottom product section:

<div class= "Product Clear" >

<h5> Excellent course <a href= "#" ><img src= "Image/more.jpg"/></a></h5>

<ul>

<li><a href= "#" ><img src= "Image/css.gif"/></a></li>

<li><a href= "#" ><img src= "Image/css.gif"/></a></li>

<li><a href= "#" ><img src= "Image/css.gif"/></a></li>

<li><a href= "#" ><img src= "Image/css.gif"/></a></li>

</ul>

</div>

Now you're done writing CSS code:

The first choice is the school profile and the news, in fact carefully observe these two are also two columns layout, so set wide and set left float:

#main. Container dl{

width:300px;

Float:left;

}

Then the column name: Because the two effects are the same. So it's OK to use the group selector directly to write all two choices.

#main. Container dl h5, #main. Product h5{

border-bottom:1px #000 Solid;

margin-bottom:15px;

font-size:17px;

}

#main. Container DL h5 a{

padding-left:170px;

}

To complete the left side of the school profile, let the introduction floating in the picture to the right:

#main. Container DL dt{

Float:left;

width:110px;

}

#main. Container DL DT img{

border:1px solid #ccc;

}

#main. Container Dl.xuexiao dd{

font-size:12px;

margin-left:25px;

Float:left;

width:165px;

Text-indent:2em;

}

Set the DD mark for the news separately

#main. Container Dl.xinwen dd{

height:22px;

line-height:22px;

Background:url (image/li.jpg) no-repeat 0 50%;

}

#main. Container Dl.xinwen DD a{

Color: #000;

Text-decoration:none;

padding-left:20px;

}

#main. Container Dl.xinwen DD span{

padding-left:25px;

}

#main. Container dl.xuexiao{

margin-right:40px;

}

Now we're done with the CSS code for the product:

#main. product{

padding-top:20px;

}

Let it be empty from the top.

#main. Product H5 a{

padding-left:510px;

}

#main. Product UL li{

Float:left;

padding-left:10px;

}

Let Li make a left float.

Final step: Complete the bottom:

HTML code:

<div id= "Footer" class= "clear" >

<p> Contact Us: Beijing Shijingshan District, Bright moon Office room 328; Tel: 010-88685956;15910646335 (Chen Teacher) </p>

</div>

CSS code:

#footer {

Background: #d1dce3;

height:50px;

line-height:50px;

Text-align:center;

}

We have completed a page Chettu.

Several errors: The head tag has the following expression in the IE6. So through the following code to solve:

<!--[if IE 6]>

<! [endif]-->

The top code means that only IE6 can be identified. So we can edit the style individually for IE6.

<!--[if IE 6]>

<style type "TEXT/CSS" >

#header ul li{

width:80px;

Float:left;

padding:0px 10px;

}

Width value on right side header head

#main. Container DL DT img{

border:1px solid #ccc;

}

#main. Container Dl.xuexiao dt{

Float:left;

width:110px;

}

#main. Container Dl.xuexiao dd{

font-size:12px;

margin-left:20px;

Float:right;

width:145px;

Text-indent:2em;

}

#footer {

margin-top:-10px;

}

</style>

<! [endif]-->

It also involves some other knowledge. will be explained in the following course.

Source: http://www.ps868.com