Example of conversion from PSD to div css

Step 1: first set all the labels to the internal and external margins to 0. In fact, another method is to reset them to 0 based on the HTML tags used in the BODY. you can also use * to reset to 0 and then reset according to the tag used in the BODY. for example, if we use the "div" and "p" in the BODY tag, we can write the "body", "div", and "p" options. no need to write.

*{

Margin: 0px;

Padding: 0px;

}

Step 2: implement the overall background of our webpage, center the desired result content, and fill the screen with the background gradient.

In this way, we can add a background image for the body. You just need to make the base tiled along the horizontal direction.

Body {

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

}

 

Step 3: By observing, we can divide our webpage into five parts, and then write the corresponding html code for it first.

 

HTML code:

<Div id = "header"> </div>

<Div id = "nav"> </div>

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

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

<Div id = "footer"> </div>

According to the PS measurement, these five parts occupy 950 in width and are centered. We can use the group selector to center the five divs first.

# Header, # nav, # banner, # main, # footer {

Margin: 0px auto;

Width: 950px;

}

Step 4: first complete the header part

LOGO: Generally, there are two requirements for this part. 1. Click the LOGO to return to the homepage of the website. 2. Do you need to pay attention to SEO? The following HTML code is used:

<H1> <a href = "#"> Beijing jiefei css webpage cut chart </a>

How can we implement CSS coding?

You can think about it first. Then, let's look at the CSS code below. In fact, CSS is used in this place to change the word. The CSS code is as follows:

# Header h1 {

Background: url (image/logo.jpg );

Width: 476px;

Height: 102px;

Display: block;

Text-indent:-9999px;

}

Okay. Now let's complete the right part of the header, or write the HTML code first.

<Ul>

<Li> <a href = "#"> css graph cutting training </a> </li>

<Li> <a href = "#"> set as homepage </a> </li>

<Li> <a href = "#"> Add to favorites </a> </li>

</Ul>

CSS code:

# Header h1 {

Float: left;

}

First, let H1 float left. In this way, the UL part on the right can be displayed in the same row.

# Header ul {

Float: left;

Padding: 50px 0px 0px 200px;

List-style: none;

}

To avoid problems, UL can also be floating. You can try it out. If it is not set to float in different IE versions, the performance of Firefox is consistent.

# Header ul li {

Float: left;

Padding: 0px 10px;

}

The above Code has no problem in Firefox and IE8, but it may occur in IE6. We will explain it later.

# Header ul li {

Color: #555;

Text-decoration: none;

Font-size: 13px;

}

# Header ul li a: hover {

Color: #000;

Text-decoration: underline;

}

The result is as follows:

Step 5: complete the navigation effect. effect Description: place the mouse on the background to light blue and create the effect of the current page.

HTML code:

<Ul>

<Li> <a href = "#"> homepage </a> </li>

<Li> <a href = "#"> website creation </a> </li>

<Li> <a href = "#> website creation </a> </li>

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

<Li> <a href = "#"> graphic design and employment </a> </li>

<Li> <a href = "#"> div css training </a> </li>

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

</Ul>

Now writing the Navigation Code directly produces a problem. If you have learned the box model and float, you should know.

Some text in the navigation bar is directed to the right of the header. How can this problem be solved?

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

CSS code

. Clear {

Clear: both;

}

<Div id = "nav"> </div>

Changed to <div id = "nav" class = ". clear"> </div>

Let's take a look at whether the above problems have been solved. In fact, if you calculate according to the standard box model, this problem will not occur if the calculation is proper.

Complete the CSS style of the navigation

# Nav {

Padding-top: 3px;

}

# Nav ul {

List-style: none;

}

# Nav ul li {

Float: left;

}

By default, li occupies the display of the entire row, so it is displayed in one row by float on the left. Set the status of A to achieve the desired result.

# Nav ul li {

Display: block;

Width: 135px;

Height: 56px;

Line-height: 56px;

Color: # fff;

Text-align: center;

Text-decoration: none;

Font-size: 14px;

}

Display: block; change element A to block, and set the wide and high background for it. Another key point here is line-height: 56px, which corresponds to 56px of the same height. What effect can be achieved. Think about it?

# Nav ul li a: hover {

Background: #177cb7;

}

Now the navigation is complete, but the current navigation effect is missing. What should I do.

In fact, it is very easy to add A tag with the ID of current for the link of the current page. As follows:

<A href = "#" id = "current"> homepage </a>

The State is the same as that when hovering over the mouse. Therefore, you only need to add a # nav ul li a # current selector After hovering over the mouse. Are you finished?

Step 6: The product promotes banner images. The company's website will generally be an animation or js/jquery special effect. Currently, we can place an image directly.

The required attribute must be alt. Replace text. When the image cannot be loaded normally, it is also optimized.

TIPS:

Because UL is used multiple times. You must add the default dots. Therefore, write list-style: none; In * so that you do not need to write it elsewhere. In fact, it contains the text color and size, if it is the same in many places. You can also declare it to the * selector.

Step 7: complete the content area

Idea: we can divide the content area into two parts: one is the left navigation, and the other is the main content area. In this way, I first perform HTML encoding:

<Div class = "container">

Test

</Div>

Now let's take a look at the result graph of the right navigation.

Right-side navigation: html code:

<Div class = "subMenu">

<H5> training course

<Ul>

<Li> <a href = "#" id = "current"> homepage </a> </li>

<Li> <a href = "#"> website creation </a> </li>

<Li> <a href = "#"> website creation </a> </li>

<Li> <a href = "#"> website creation </a> </li>

<Li> <a href = "#"> website creation </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 has been mentioned in the above process. So I will give it directly and will not explain it again.

# 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 {

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%;

}

Step 8: subject area encoding of the content: You can first think about how to compile HTML through the above Effect Picture. I am using DLDD. You must learn the usage of this tag. It is very common and often used to describe products.

Now let's look at the HTML code:

<Div class = "news">

<Dl class = "xuexiao">

<H5> school profile <a href = "#"> </a>

<Dt> </dt>

<Dd> jiafei school features: it implements a home-based teaching mode. The perfect combination of small class teaching can be on-demand, and Class reservation can be made. It can be taught based on the actual situation of students to ensure the learning ends ...... </Dd>

</Dl>

<Dl class = "xinwen">

<H5> school news <a href = "#"> </a>

<Dd> <a href = "#"> color scheme in graphic design </a> <span> </dd>

<Dd> <a href = "#"> color scheme in graphic design </a> <span> </dd>

<Dd> <a href = "#"> color scheme in graphic design </a> <span> </dd>

<Dd> <a href = "#"> color scheme in graphic design </a> <span> </dd>

</Dl>

</Div>

The following is the HTML code for the bottom part of the product:

<Div class = "product clear">

<H5> excellent courses <a href = "#"> </a>

<Ul>

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

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

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

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

</Ul>

</Div>

Now, you can write the CSS code:

The first choice is the school profile and news. In fact, they are also two columns of layout, so set the width and set the left floating:

# Main. container dl {

Width: 300px;

Float: left;

}

Followed by the topic name: because the two results are the same. Therefore, you can use the group selector to select and write both of them.

# Main. container dl h5, # main. product h5 {

Border-bottom: 1px #000 solid;

Margin-bottom: 15px;

Font-size: 17px;

}

 

# Main. container dl h5 {

Padding-left: 170px;

}

First, complete the school profile on the left side to bring the profile to the right of the picture:

# 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;

}

Separately set the DD mark of the news

# Main. container dl. xinwen dd {

Height: 22px;

Line-height: 22px;

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

}

# Main. container dl. xinwen dd {

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 let's start to complete the CSS code of the product:

# Main. product {

Padding-top: 20px;

}

Leave it a certain distance from the top.

# Main. product h5 {

Padding-left: 510px;

}

# Main. product ul li {

Float: left;

Padding-left: 10px;

}

Let LI float left.

Last step: complete the bottom:

HTML code:

<Div id = "footer" class = "clear">

<P> Contact Us: Room 328, haoyue office building, Shijingshan District, Beijing; Tel: 010-88685956; 15910646335 (Instructor Chen) </p>

</Div>

CSS code:

# Footer {

Background: # d1dc4;

Height: 50px;

Line-height: 50px;

Text-align: center;

}

By now, we have completed a page cut.

Several errors: the header is marked as follows in IE6. The following code solves the problem:

<! -- [If IE 6]>

<! [Endif] -->

The above Code indicates that only IE6 can be recognized. In this way, you can edit the style for IE6 separately.

<! -- [If IE 6]>

<Style type "text/css">

# Header ul li {

Width: 80px;

Float: left;

Padding: 0px 10px;

}

Add the width value to the right of the Header

# 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. The course will be explained later.

Source: http://www.ps868.com