Common CSS Name Reference

It can be used to define IDs in XHTML. It is mainly used to make it easy for CSS to define styles at a glance. Therefore, CSS naming is for reference only.

(1) Page Structure

Container: Container

Header: Header

Content: content/Container

Page subject: Main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

(2) Navigation

Navigation: nav

Main navigation: mainnav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Location navigation: crumb

Menu: Menu

Sub menu: submenu

Breadcrumb)

(3) webpage content

Title: Title

Abstract: Summary

Arrow: Arrow

Trademark: Label

Website Logo: logo

Corner/rounded corner: corner

Banner

Column: Column

Sub menu: submenu

Search: Search

Search box: searchbox

Logon: Login

Tool bar: Toolbar

Drop-down: Drop

Tab: Tab

Current: Current

List: List

Scroll: Scroll

Service: Service

Message: msg

News: News

TIPS: Tips

Download: Download

Topic title: Title

Hotspot: hot

Join: joinus

Registration: regsiter

Guide: Guide

Link: friendlink

Status: Status

Copyright: Copyright

Button: BTN

Partner: Partner

Vote: Vote

Header: Header

Content: content/Container

End: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

Logon entry: loginbar

Logo: 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

Article list: List

Message: 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

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Sub-Pilot: 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

Logon entry: loginbar

Registration: regsiter

Search: Search

Functional Area: Shop

Title: Title

Join: joinus

Status: Status

Button: BTN

Scroll: Scroll

Tab: Tab

Article list: List

Message: 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, such

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment sample, which uses the English name of the alignment target, as shown in figure

. Left {float: Left ;}

. Bottom {float: bottom ;}

(4) The title bar style is named by "category + function", 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.

Main master.css

Module module.css

Basic shared base.css

Layout.css

Themes.css

Columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css

Header: Header

Content: content/Container

End: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left and right: leftrightcenter

Logon entry: loginbar

Logo: logo

Announcement: banner

Page subject: Main

Hotspot: hot

News: News

Download

Subnavigation: subnav

Menu: Menu

Sub menu: submenu

Search: Search

Link: friendlink

Footer: footer

Copyright: Copyright

Scroll: Scroll

Content: Content

Tab: Tab

Article list: List

Message: 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

/* Endfooter */

(3) ID name:

(1) Page Structure

Container: Container

Header: Header

Content: content/Container

Page subject: Main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: Column

Overall Layout width of the page peripheral control: wrapper

Left and right: leftrightcenter

(2) Navigation:

Navigation: nav

Main navigation: mainbav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu

Sub menu: submenu

Title: Title

Abstract: Summary

(3) functions:

Logo: logo

Advertisement: banner

Login: Login

Loginbar

Registration: regsiter

Search: Search

Functional Area: Shop

Title: Title

Join: joinus

Status: Status

Button: BTN

Scroll: Scroll

Tab: Tab

Article list: List

Message: 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, for example:

Reference content is as follows:

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, for example:

Reference content is as follows:

. Font12px {font-size: 12px ;}

. Font9pt {font-size: 9pt ;}

(3) alignment style. Use the English name of the alignment target, for example:

Reference content is as follows:

. Left {float: Left ;}

. Bottom {float: bottom ;}

(4) use the "category + function" method to name the title bar style, such:

Reference content is as follows:

. Barnews {}

. Barproduct {}

(5) Naming of file names:

Main: master.css

Module: module.css

Basic usage: base.css

Layout, layout: layout.css

Themes.css

Topic: columns.css

Text: font.css

Form: forms.css

Fill in: mend.css

Print: print.css

(6) Notes:

(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.