Posts in current category

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


May 04, 2021 01:00 CSS


Table of contents


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:

Introduction to the basic processes and examples of 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 get a web art picture we will think from the upper, middle, left and right, upper and middle (including left and right) under the layout framework.

Here's an example of CSS layout analysis, and we analyze CSS layout with the DIV CSS5 list page:

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

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:

<div id="header">我是头部(上)</div>

<div id="centers">

<div class="c_left">我是中的左</div>

<div class="c_right">我是中的右</div>

<div class="clear"> </div>

</div>

<div id="footer">我是底部(下)</div>


Try it out . . .

The CSS .css index is as follows:
Here's what's referenced:

body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,

caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;

font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}

ol,ul,li{list-style:none;}

img{border:0;}

body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}

.clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}

.clear{clear:both;height:1px;margin-top:-1px;width:100%;}

.dis{display:block;}

.undis{display:none;}

/*此上面代码是初始CSS模板,下面是新写CSS布局框架代码*/

#header,#centers,#footer{width:100%;margin:0auto;

clear:both;font-size:18px;line-height:68px;font-weight:bold;}

#header{height:68px;border:1px solid #CCCCCC;}

#centers{padding:8px0;}

#footer{border-top:1px solid #CCCCCC;background:#F2F2F2;}

#centers.c_left{float:left;width:230px;border:1px solid #00CC66;

background:#F7F7F7;margin-right:5px;}

#centers.c_right{float:right;width:500px;border:1px solid #00CC66;background:#F7F7F7}

You can test out these two pieces of code to create a new try.

Follow these steps to build a website page:

1, the top part, including LOGO, MENU and a Banner picture;

2, the middle part of the page, that is our main body, asked to open the home page quickly, so we published information on the site design for three columns.

3, the bottom, including some copyright information.

Based on the above assumptions, we define the structure of div as follows

The DIV structure is as follows:

The body is an HTML element . .

└#Container the page layer container at the time of the page

The #Header the head of the page . . . .

The #MianBody the main body of the page . .

On the #mainbody-left , the left side of the main page . . .

The └#mainbody-center is in the middle of the main page.
The └#MainBody -right' / on the right side of the main page

└#footer at the bottom of the page


It's very easy to make a navigation bar with DIV-CSS, and we can do it
Css to make easy adjustments to the style of the navigation bar. Setting up the navigation bar with div generally uses the labels of slt;ul> and slt;li>

4, the height display effect is different
In general, only height: 100px is required; H owever, when the display is different, you can _height: 100px; to set the height of IE6.

5, nesting effect is different.
In some cases, if the nested picture in the div is greater than the height of the outer div, the height setting in IE6 is always invalid, so be aware of adding the overflow property to the css, and overloaw:hidden, you can hide the part that is out of bounds.

Some of the basics commonly used in the layout of DIV-CSS web pages


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.


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

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

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

In order to be correctly interpreted by the browser and verified by the W3C code, all XHTML documents must declare the coding language they use;

As commonly used language definitions:


XML/HTML code

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Standard XML document language definitions:


XML/HTML code

<?xml version=”1.0″ encoding=” utf-8″?>

Language definitions for older browsers:


XML/HTML code

<meta http-equiv=”Content-Language” content=” utf-8″ />

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;/*定义搜索输入框边框*/

background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/

}



2, the whole paragraph of comments:

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


XML/HTML code

/*=====搜索条=====*/

.search {

border:1px solid #fff;

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

/*=====搜索条结束=====*/


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


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都能识别*;标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important;

FF不能识别*,但能识别!important;

根据上述表达,同一类/ID下的CSS  hack可写为:

.searchInput {

background-color:#333;/*三者皆可*/

*background-color:#666 !important; /*仅IE7*/

*background-color:#999; /*仅IE6及IE6以下*/

}

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;/*通用*/

_background-color:#666;/*仅IE6可识别*/

}


Write three:


XML/HTML code

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {background-color:#333;}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {background-color:#555;}/*仅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的专用*/

select:empty {font:12px  !important;} /*safari可见*/


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不识别*/:none;}


If condition hack of IE:

All IE identifiable:


XML/HTML code

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

只有IE5.0可以识别:

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

IE5.0包换IE5.5都可以识别:

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

仅IE6可识别:

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

IE6以及IE6以下的IE5.x都可识别:

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

仅IE7可识别:

<!–[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;

}