Common CSS code structure

Common Code Structure:

Div: Mainly used for layout and page splitting.
Ul/OL: used for unordered/ordered lists
Span: it has no special meaning and can be used as an aid in typographical editing. For example:

<Li> <span> (4.23) </span> store in seclusion </LI>
In CSS, span is defined as the right float to display the date and title on both sides.

H1-h6: Title
H1-h6 decreases in order of importance
H1 is the most important title

<Label for = "user-Password"> password </label>
<Input type = "password" name = "password" id = "user-Password"/>
Fieldset & Legend: fildset is set outside the form, and legend is used to describe the form content. For example:
<Form>
<Fieldset>
<Legend> title </legend>
<Label for = "user-Password"> password </label>
<Input type = "password" name = "password" id = "user-Password"/>
</Fieldset>
</Form>
DL, DT, DD: this label should be used when the first action is similar to the title/brief description on the page, and the following is the detailed description. For example:

<DL>
<DT> what is CSS? </DT>
<DD> CSS is a technology called stylesheet. Some people also call it cascading stylesheet ). <DD>
<DT> what is XHTML? </DT>
<DD> XHTML is an XML-based syntax. It seems to be somewhat different from HTML, but it only has some small but important differences. As you can see, XHTML is an XML that plays a role similar to HTML. In essence, XHTML is a bridge (Transition) technology that combines the powerful functions of XML (somewhat) and the simple features of HTML (mostly. </DD>
</Dl>
C # Content

S # subcol

M # maincol

X # xcol

This is the XHTML structure of the vertical layout. C-smx indicates that the webpage has three vertical columns, and C-Sm indicates that there are two vertical columns, c-mx indicates that one of the two vertical columns is affiliated, and C-M indicates one vertical column.

The layout of the three vertical columns must be divided into two layers. The first layer is # subcol and # the second layer of main is # maincol and # xcol in main.

Custom name:
Based on the W3C website, it is best to use a meaningful name.
For example, it is an important news highlight (like red)
There are two types

. Red {color: Red}
. Important-news {color: Red}
Obviously, the meaning of the second communication is clearer, so do not use a name that is ambiguous as your own.

Common CSS naming rules:

Header: header content: content/container tail: footer navigation: nav sidebar: sidebar

Topic: the overall layout width of the peripheral control of the column page: Left right center in wrapper

Logon entry: loginbar flag: logo advertisement: banner page subject: Main hotspot: hot

News: News download: Download subnavigation: subnav menu: Menu

Sub-menu: submenu search: Search link: friendlink footer: footer

Copyright: Copyright scroll: Scroll content: content tab: Tab

ArticleList: List tip: MSG tips: Tips topic title: Title

Join: joinus guide: Guild service: Service Registration: regsiter

Status: Status vote: Vote partner: Partner

(2) Comment writing:

/* Footer */

Content Area

/* End footer */

(3) ID name:

(1) Page Structure

Container: Container header: header content: content/Container

Page subject: Main, footer: footer, navigation: nav

Sidebar: sidebar Bar: the overall layout width of the column page is wrapper.

Left right center

(2) Navigation

Navigation: nav main navigation: mainbav subnavigation: subnav

Top navigation: topnav side navigation: sidebar left navigation: leftsidebar

Right navigation: rightsidebar menu: Menu Sub-menu: submenu

Title: Title Abstract: Summary

(3) Functions

Logo: logo advertisement: banner login: login Login entry: loginbar

Registration: regsiter search: Search functional area: Shop

Title: title added: joinus status: Status button: BTN

Scroll: Scroll tab: tab article list: List prompt: msg

Current: Current tips: Tips icon: icon Note: Note

Guide: Guild service: Service hotspot: hot news: News

Download: Download vote: Vote partner: Partner

Link copyright: Copyright

(4) Class naming:

(1) color: use the color name or hexadecimal code, such

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use 'font + font size' as the name, as shown in figure

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, as shown in figure

. Left {float: Left ;}

. Bottom {float: bottom ;}

(4) use the 'category + function' method to name the title bar style, as shown in figure

. Barnews {}

. Barproduct {}

Note ::

1. All are in lower case;

2. Try to use English;

3. Do not add hyphens or underscores;

4. Try not to be abbreviated, except words that can be understood without looking at them.

The main master.css module module.css basically shares base.css

Layout.css themes.css column columns.css

Text font.css form forms.css patch mend.css print print.css

<$ This article is reprinted from http://www.oujiebin.cn/$>