Convert psd cut image to div+css format

Convert psd cut image to div+css format

PSD to div css web page cutting example

Convert psd cut image to div+css format

Step 1: First, set the inner and outer margins of all tags to 0. In fact, there is another way to reset them to 0 according to the HTML tags used in BODY. You can also use * to reset to 0 first and then reset according to the tags used in BODY. For example, if we use div, p in the BODY tag, then our selector can be body, div, p. No need to write *.

Copy code
The code is as follows:

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

Step 2: Implement the overall background of our webpage. The content we want is centered and the background gradient always fills the screen.
In this case, we can add a background image to the body. Just make sure it is tiled horizontally.

Copy code
The code is as follows:

body{
background:url(image/bj.jpg) repeat-x;
}

Convert psd cut image to div+css format

Step 3: By observing, we can first divide our web page into five parts, and then write the corresponding HTML code for them
HTML code:

Copy code
The code is as follows:

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

Through PS measurement, we know that these five parts occupy 950 width and are centered. We can use the group selector to center these five DIVs first.

Copy code
The code is as follows:

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

Step 4: Complete the header first
LOGO: Generally, there are two requirements for this part. 1. Clicking the LOGO can return to the homepage of the website. 2. Pay attention to SEO? So we used the following HTML code:
<h1><a href="#">Beijing Jiefei CSS web page cutting map</a></h1>
So how to implement CSS coding?
Everyone can think about it first. Then look at the CSS code I wrote below. In fact, this place uses the CSS technique of replacing words with images. The CSS code is as follows

Copy code
The code is as follows:

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

good. Now let's finish the right side of the header. Let's start by writing the HTML code.

Copy code
The code is as follows:

<ul>
<li><a href=" #">css image cutting training</a></li>
<li><a href=" #">Set as Homepage</a></li>
<li><a href=" #">Add to Favorites</a></li>
</ul>

CSS code:

Copy code
The code is as follows:

#header h1{
float:left;
}

We start by floating H1 left. In this way, the UL part on the right can be displayed in the same industry.

Copy code
The code is as follows:

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

To avoid problems, you can let UL float as well. You can try to see if the floating is not set in each version of IE and the performance in Firefox is consistent.

Copy code
The code is as follows:

#header ul li{
float:left;
padding:0px 10px;
}
The above code works fine in Firefox and IE8, but it will have problems in IE6. We will explain this later.
#header ul li a{
color:#555;
text-decoration:none;
font-size:13px;
}
#header ul li a:hover{
color:#000;
text-decoration:underline;
}

The result at this time is shown as follows:

Convert psd cut image to div+css format

Step 5: Complete the navigation effect. Effect description: When you put the mouse on the background, it turns light blue, and the effect of the current page will be produced.
HTML code:

Copy code
The code is as follows:

<ul>
<li><a href=" #">Homepage</a></li>
<li><a href=" #">Website Design</a></li>
<li><a href="#>Website Design</a></li>
<li><a href="#">office training</a></li>
<li><a href="#">Graphic Design Jobs</a></li>
<li><a href="#">div css training</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Now writing the navigation code directly will cause a problem. If you have learned about box model and float, you should know it.
The navigation text has moved to the right side of the header. How to solve it?
In fact, it is time for our universal clear float to work.
CSS Code

Copy code
The code is as follows:

.clear{
clear:both;
}

At this time, for us <div id="nav"></div>
It becomes <div id="nav" class="clear"></div>
Now let’s take a look and see if the above problem has been solved. In fact, if you calculate according to the standard box model, if the calculation is done properly, this problem will not occur.
Complete the CSS style of the navigation

Copy code
The code is as follows:

#nav{
padding-top:3px;
}
#nav ul{
list-style:none;
}
#nav ul li{
float:left;
}

By default, li occupies the entire line, so it is displayed in one line by floating it to the left. Then set the state of A to achieve the desired result. Let's test: let LI have width and height, and then set the background of A. Can we achieve our desired effect and prevent A from becoming a block?

Copy code
The code is as follows:

#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; makes element A block-shaped, so that we can set the width and height background for it. Another key point here is line-height:56px, which corresponds to the height of 56px. What effect can be achieved? Students, think about it?

Copy code
The code is as follows:

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

Now our navigation is basically complete, but we are still missing a navigation effect for the current state. What should I do?
In fact, it is very simple to add a tag with ID current to the A link of the current page. as follows:

Copy code
The code is as follows:

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

Then this state is consistent with the mouse hover state, so it is very simple. Just add a #nav ul li a#current selector after the mouse hover state. Have you finished?
Convert psd cut image to div+css format

Step 6: Product promotion banner image. For company websites, it will usually be an animation or js/jquery special effects. Now let's just put a picture

Copy code
The code is as follows:

<img src="image/banner.jpg" height="184" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image005.jpg" width="127" />

Right navigation html code:

Copy code
The code is as follows:

<div class="subMenu">
<h5>Training courses</h5>
<ul>
<li><a href=" #">Homepage</a></li>
<li><a href="# ">Website Design</a></li>
<li><a href="# ">Website Design</a></li>
<li><a href="# ">Website Design</a></li>
<li><a href="# ">Website Design</a></li>
<li><a href="# ">div css training</a></li>
<li><a href="# ">div css training</a></li>
<li><a href="#l">Contact Us</a></li>
</ul>
</div>

CSS code: The following codes have been mentioned in the above production process. So I just give it out directly without explaining it.

Copy code
The code is as follows:

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

Step 8: Coding the main content area: Through the picture above, you can first think about how to write HTML. I use the DLDD method. Everyone must learn how to use this mark. It is very commonly used and is often used when describing products.
Now let's look at the HTML code:

Copy code
The code is as follows:

<div class="news">
<dl class="xuexiao">
<h5>School Introduction<a href="#"><img src="image/more.jpg"/></a></h5>
<dt><img src="image/223.jpg" src="//img.jbzj.com/file_images/article/201304/psdcutpic/image006.jpg" width="488" />
<!--[if IE 6]>
<![endif]-->

The above code means that only IE6 can recognize it. This way we can edit the styles for IE6 alone.

Copy code
The code is as follows:

<!--[if IE 6]>
<style type "text/css">
#header ul li{
width:80px;
float:left;
padding:0px 10px;
}

Header right side width value

Copy code
The code is as follows:

#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. This will be explained in subsequent courses.

<<:  HTML+jQuery to implement a simple login page

>>:  Teach you how to monitor Tomcat's JVM memory through JConsoler

Recommend

Explore JavaScript prototype data sharing and method sharing implementation

Data Sharing What kind of data needs to be writte...

A brief discussion on the principle of shallow entry and deep exit of MySQL

Table of contents 1. Overview of the page 2. Infi...

The difference between html Frame, Iframe and Frameset

10.4.1 The difference between Frameset and Frame ...

MySQL Query Cache Graphical Explanation

Table of contents 1. Principle Overview Query Cac...

MYSQL Left Join optimization (10 seconds to 20 milliseconds)

Table of contents 【Function Background】 [Raw SQL]...

How to use vue.js to implement drag and drop function

Preface Adding drag and drop functionality is a g...

An in-depth introduction to React refs

1. What is Refs is called Resilient File System (...

Learning Vue instructions

Table of contents 1. v-text (v-instruction name =...

Use iframe to submit form without refreshing the page

So we introduce an embedding framework to solve th...

Ubuntu 18.04 MySQL 8.0 installation and configuration method graphic tutorial

This article shares the installation and configur...

24 Practical JavaScript Development Tips

Table of contents 1. Initialize the array 2. Arra...

Introduction to MyCat, the database middleware

1. Mycat application scenarios Mycat has been dev...

HTML tutorial, HTML default style

html , address , blockquote , body , dd , div , d...

Explain the deployment and configuration of Clickhouse Docker cluster with examples

Table of contents Written in front Environment de...

56 practical JavaScript tool functions to help you improve development efficiency

Table of contents 1. Digital Operation (1) Genera...