Introduction to the basic processes and examples of the layout of DIV-CSS

All said that the use of DIV-CSS layout to design the site is easy to optimize, easy to be included, so you know the use of DIV-CSS layout? T he CSS layout is the general name for a web page html created by the DIV tag and CSS style sheet code. T he DIV-CSS layout is now a very popular layout method, replacing the original table layout. Let's start by taking a look at the basic steps for learning the layout of DIV-CSS:

First, recognize the requirements of learning

1, to find out the purpose, first of all to understand why to learn CSS?
2, the state of mind can not be anxious, if you are very impatient, otherwise you will quickly lose interest.
3, insist, this is not a day or two thing, is a long process (at least two months).


Second, basic learning

1. What is the role of CSS? (i.e. what is the relationship between CSS, html, and JS, and the importance of HTML structure)
2, CSS basics, CSS property style
3、HTML

The above points, generally very quickly mastered, also do not need to be proficient, understand about it.

Around the time, start looking for some psd designs online, do your own thing, find out what's wrong, and summarize them.


Third, learn to analyze the layout of other people's web pages

When you do psd design code, find questions, may not find the answer or no one to help you answer, do not rush, then it is best to look at the layout structure of other people's web pages, mainly look at the html layout framework, for reference (of course, there are many structure code on the Internet is very slotted cake). Then learn how art diagrams are analyzed, how to use PS tools to cut out the footage you need, how to use these cut-out picture footage for layout, layout techniques, compatibility resolution and avoidance, and more.

In short: is to let their layout can know how the large layout structure layout, the establishment of layout ideas and techniques.


Fourth, the code specification

When you read a lot of other people's web code, you will find that they all have norms, these norms have many on the Internet, you need to summarize and recite, of course, not rote mestration, mainly on the cut chart to do more practice, familiar can remember.


Five, a lot of practice

Practice is from start to finish, don't break, even if looking for some simple web page layout practice, the beginning may be slow to develop, will encounter a lot of small problems, not in a hurry.

Think about layout before making a DIV CSS web page:

First of all, we can analyze our DIV CSS layout refactoring this page structure framework, we can see that the top, middle and bottom structure, which also includes the left and right structure.

So we're going to write this page CSS and html, and then write CSS and html from top to bottom.

Let's start by building a web folder and creating a new html page in this folder named index.html and the CSS file named index .css. H ere's a trick to import templates to build CSS and html initial pages, then reference CSS files to html, then write on top of the CSS template and add CSS.

Here's .html html code for index:

Here's what's referenced:

One. File naming specification

Global style: global .css;
Frame layout: layout .css;
Font style: font .css;
Link style: link .css;
Print style: print .css;

Two. Common class/ID naming conventions

Header: Header
Inside: content
Capacitor: container
Foot: footer
Copyright: copyright
Navigation: menu
Main navigation: mainMenu
Sub-navigation: subMenu
Logo: logo
Label: banner
Title: Title
Sidebar: sidebar
Picture: Icon
Note: note
Search: search
Press button: btn
Record: login
Chain: link
Infobox: manage
......

Common classes should be named as far as possible by common English words, so that they are easy to understand and annotated where appropriate. F or secondary class/ID naming, the pattern of combined writing is used, and the initials of the last word should be capitaled: such as "search box" should be named "searchInput," "search icon" named "search Icon," "search button" named "searchBtn," and so on.

CSS writing specifications and methods

I. General writing norms and methods

1. Select DOCTYPE:

XHTML 1.0 offers three DTD declarations to choose from:

Transitional: Requires a very loose DTD that allows you to continue using the HTML4.01 identity (but in accordance with the xhtml writing). T he full code is as follows:

XML/HTML code

Strict: Strict: Strict DTD, you can't use any of the identity and attributes of the performance layer, such as . The full code is as follows:

XML/HTML code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

Frameset: A DTD specifically designed for frame pages that you need to use if you have a framework in your page. The full code is as follows:

XML/HTML code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

Ideally, DTDs are strict, but for most of our designers who are new to web standards, transitioning DTDs (XHTML 1.0 Transitional) are the ideal choice at the moment (including this site, which also uses transitional DTDs). Because this DTD also allows us to use the identity, elements, and properties of the performance layer, it is also easier to verify by W3C code.

2. Specify the language and character set:

Specify the language for the document: XML/HTML code

To improve the character set, "utf-8" is recommended.

3. Call the style sheet:

External style sheet calls:

Inline to the page: Is to write the style sheet directly in the head area of the page code. Such as:

XML/HTML code

<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>

External call method: Write the style sheet in a separate .css file, and then call it in the page head area with code similar to the following.

XML/HTML code

<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

In web-compliant designs, it is recommended to use an external call method that allows you to change the style of a page without modifying .css only the file. I f all pages call the same style sheet file, changing one style sheet file can change the style of all files.


4, choose the appropriate elements:

Choose HTML elements based on the structure of the document, not html elements based on their style. F or example, use the P element to contain text paragraphs, not to line up. I f you can't find the appropriate element when you create the document, consider using a generic div or span;

Avoid transitions using div and span. A small, appropriate use of div and span elements can make the structure of the document clearer, more reasonable and easy to use styles;

Use labels and structure nesting as little as possible, which can not only make the document structure clear, but also keep the file small, while improving the user download speed, but also easy for the browser to interpret and view the document;


5, derived selector:

You can use a derived selector to define styles for child elements in an element, simplifying naming while also making the structure clearer, such as:

XML/HTML code

.mainMenu ul li {background:url(images/bg.gif;)}

6, auxiliary picture with back image processing:

The "secondary picture" here refers to images that are not part of what the page wants to express, but are used only for decoration, spacing, and reminders. Make it a backmap, and you can make changes with CSS styles without changing the page, such as:

XML/HTML code

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7, structure and style separation:

Only the structure of the document is written to the page, but the style is written in the css file, and the structure and style are separated by external calls to the CSS style sheet.



8, the structure of the document writing:

Page CSS documents should be structured and easy to read. Such as:

XML/HTML code

#mainMenu {

width:100%;

height:30px;

background:url(images/mainMenu_bg.jpg) repeat-x;   }

#mainMenu ul li {

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;   }

Try it out . . .

9, mouse gestures:

In the XHTML standard, hand is recognized only by IE, and when the mouse gesture needs to be converted to "hand", the "hand" is changed to "pointer", i.e. "cursor:pointer;" ”


Two. Comment writing specifications

1, inter-line comments:

Write directly after property values, such as:

XML/HTML code

.search{

Border: 1px solid #fff; / * Define Search Enter Box Box * /

Background: URL (./ images / icon.gif) No-report # 333; / * Define the background of the search box * /

}

2, the whole paragraph of comments:

Add comments at the beginning and end places, such as:

XML/HTML code

/ * ===== Search bar ===== * /

.search {

border:1px solid #fff;

background:url(../images/icon.gif) no-repeat #333;   }

/ * ===== Search bar end ===== * /

Three. Style property code abbreviation

1, different classes have the same properties and property values of abbreviations:

For two different classes, but some or even all of the same properties and property values, you should combine abbreviations, especially if there are multiple different classes with the same properties and property values, which can reduce the amount of code and be easy to control. Such as:

XML/HTML code

#mainMenu {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

height:30px;

overflow:hidden;

}

#subMenu {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

height:20px;

overflow:hidden;

}

The property values of the two different classes are duplicated and can just be abbreviated as:

XML/HTML code

#mainMenu,#subMenu {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

overflow:hidden;

}

#mainMenu {height:30px;}

#subMenu {height:20px;}

2, the abbreviation of the same property:

The same property can also be shorted based on its property values, such as:

XML/HTML code

.search {

background-color:#333;

background-image:url(../images/icon.gif);

background-repeat: no-repeat;

background-position:50% 50%;

}

.search {

background:#333 url(../images/icon.gif) no-repeat 50% 50%;

}

3, the abbreviation of the inner and outer border:

In CSS, the distance between the inside and outside borders is arranged in order of top, right, bottom, and left, when these four property values are not also directly abbreviated, such as:

XML/HTML code

.btn {

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

You can abbreviated to:

XML/HTML code

.btn {

Margin:10px 8px 12px 5px;

Padding:10px 8px 12px 5px;

}

If the top and bottom, left, and right border property values are the same, the property values can be abbreviated directly to two, such as:

.btn {

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

XML/HTML code

The abbreviations are:

XML/HTML code

.btn {margin:10px 5px;}

When the property values of the top and bottom left and right borders are the same, you can abbreviated directly into one, such as:

XML/HTML code

.btn {

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

The abbreviations are:

XML/HTML code

.btn{margin:10px;}

4, the abbreviation of color values:

When the three color values of RGB are the same, the color value code can be abbreviated. Such as:

XML/HTML code

.menu { color:#ff3333;}

It can be abbreviated as:

XML/HTML code

.menu {color:#f33;}

Four. H ack writing specification

Because different browsers on the W3C standard support is not the same, each browser for the page interpretation is not the same, such as IE in many cases with FF there is a 3px gap, for these differences, we need to use css hack to adjust, of course, in the absence of necessary circumstances, it is best not to write hack to adjust, to avoid the hack caused by page problems.

1, IE6, IE7, Firefox compatible writing:

Write one:

XML/HTML code

IE can identify *; standard browser (such as FF) cannot recognize *;

IE6 can identify *, but not to identify! Important,

IE7 can identify *, can also identify! Important;

Ff can't identify *, but you can identify! Important;

According to the above expression, the CSS Hack under the same category / ID is writable:

.searchInput {

Background-color: # 333; / * All of the three can * /

* Background-color: # 666! important; / * only IE7 * /

* Background-color: # 999; / * Only IE6 and IE6 below * /

}

The writing order of the three is: FF, IE7, IE6.

Write two:

IE6 recognizes """" and doesn't recognize between IE7 and FF, so when only for the difference between IE6 and IE7 and FF, write this:

XML/HTML code

.searchInput {

Background-color: # 333; / * Universal * /

_Background-color: # 666; / * only IE6 recognizable * /

}

Write three:

XML/HTML code

* + HTML and * HTML are IE-specific tags, Firefox is not supported.

.searchInput {background-color:#333;}

* html .Searchinput {background-color: # 666;} / * only IE6 * /

* + html .Searchinput {background-color: # 555;} / * only IE7 * /

Block Internet Explorer:

Select is a selector that is replaced as the case may be. The second sentence is unique to Safari browsers on MAC.

XML/HTML code

*: lang (zh) select {font: 12px! important;} / * ff dedicated * /

SELECT: EMPTY {Font: 12px! important;} / * safari visible * /

IE6 identifies:

Here is mainly through CSS comments to separate a property from the value, comments before the colon.

XML/HTML code

SELECT {Display / * IE6 does not recognize * /: none;

If condition hack of IE:

All IE identifiable:

XML/HTML code

<!–[if IE]> Only IE <![end if]–>

Only IE5.0 can be identified:

<!–[if IE 5.0]> Only IE 5.0 <![end if]–>

IE5.0 replacement IE5.5 can be identified:

<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

IE6 only:

<!–[if lt IE 6]> Only IE 6- <![end if]–>

IE6 and IE5.x below IE6 can be identified:

<!–[if gte IE 6]> Only IE 6/+ <![end if]–>

IE7 only recognition:

<!–[if lte IE 7]> Only IE 7/- <![end if]–>

2, clear floating:

In Firefox, when the children are floating, the height of the parent cannot completely wrap the entire child, so you can solve this problem by defining the parent once with this clear floating HACK.

XML/HTML code

select:after {

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}