CSS, div naming rules for HTML pages

Source: Internet
Author: User

CSS Naming conventions

Head: Header

Content: Content/containe

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

Login Strip: Loginbar

Logo: Logo

Ad: Banner

Page body: Main

Hotspot: Hot

Press: News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Searches: Search

Links: Friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

Tabs page: Tab

Article List: List

Hint Message: MSG

Tip: Tips

Column Title: Title

Join: Joinus

Guide: Guild

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

Naming of IDs in XHTML files

(1) Page structure

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

(2) Navigation

Navigation: Nav

Main navigation: MAINBAV

Sub-navigation: Subnav

Top Navigation: Topnav

Side navigation: Sidebar

Left navigation: Leftsidebar

Right navigation: Rightsidebar

Menus: Menu

Sub-menu: submenu

Caption: Title

Abstract: Summary

(3) function

Logo: Logo

Ad: Banner

Login: Login

Login Strip: Loginbar

Registration: Regsiter

Searches: Search

Functional area: Shop

Caption: Title

Join: Joinus

State: Status

Button: BTN

Scrolling: Scroll

Tabs page: Tab

Article List: List

Hint Message: MSG

Present: Current

Tip: Tips

Icons: Icon

Note: note

Guide: Guild

Services: Service

Hotspot: Hot

Press: News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

Naming rules for Css+div:

Login Strip: Loginbar
Logo: Logo
Sidebar: SideBar
Ad: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Scrolling: Scroll
Page body: Main
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Links: Friendlink
Footer: Footer
Join: Joinus
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Vote: Vote
PARTNER: Partner
Copyrights: Copyright

The naming of 1.CSSID
Jacket: Wrap
Main navigation: Mainnav
Sub-navigation: Subnav
Footer: Footer
Entire page: Content
Headers: Header
Footer: Footer
Trademark: Label
Caption: Title
Main navigation: Mainnav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Content 1:menu1content
Menu Capacity: Menucontainer
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadCrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current

2. style file naming
Main: Master.css
Layout page: Layout.css
Rubric: Columns.css
Text: Font.css
Plot style: Print.css
Theme: Themes.css

Description: Both class and need to be expanded, the name is customized with the "_" (underscore) suffix within the current name.
I used to call the list page, the news list is newslist, the picture list is piclist,
The content page is view,
/**/
Overall Big frame: #wrapper
Inside the big frame: #inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
Top and Banner:.top
Top and inside of banner:. Intop
Logo:.logo
Banner:.banner
Navigation:. Menu
Inside Navigation:. Inmenu
. Menuul
. Menuul Li
. Menuul Li A
Drop-down menu:. Inmenu_xiala
. Inmenu_xialaul
. Inmenu_xialaul Li
. Inmenu_xialaul Li A
///////////////////////////////////////////////////////////////////////////////////////////////////////////
Main content:. mainwrapper
Within the main content:. inmainwrapper
Left stop:. Sideleft
Inside left:. insideleft
Right column:. sideright
Right inside:. Insideright
Middle:. Sidecenter
In the middle:. Insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
Bottom:. Foot
Bottom inside:. infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Other names */
Search:. Search
Search within:. Insearch
Search bar:. Searchselect
Search button:. serachbuttom
Enter text box:. Input
. Select

/* Table Style */
Table Overall framework:. ListBox
Width of table:. listbox-table
Table Header Text style:. Listbox-header
Table Body Text style:. listbox-entry
/* Universal Type */
General:. gm/* This is a bit depressed, English is too poor ... * *
In general:. Ingm
Universal left float:. GMFL (GM FLOAT left)
Universal right float:. GMFR (GM FLOAT right)
/* General Picture Style */
Common picture styles:. img
/* Clear FLOAT */
Clear all floats:. Clear
Clear left float:. clearleft
Clear right float:. clearright
/* Text Style */
Text:. Font
/* News list */
News list:. fontnews
/*view page Font Total style */
View page font:. Fontview


Trademark: Label
Caption: Title
Main navigation: Mainbav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Contents 1:MENU1 Content
Menu Size: Container
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadcrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current
Header: Masthead
Summary, summary summary or general
Floating photo on the left Photoleft
Floating picture on the right photoright
Titles Title
Entry Bottom Entrybottom
More extended or. more
Container background CONTAINERBG
Services Service
Service Link ServiceLink
Line lines
Textual text
Right Rightside
Copyright
Press News
Book Wrapper
Introduction Intro-part1
Columns column
Path pathways
Piece section
Modular Module
On the navigation Subnav
2. Also the annotations that are available when editing the stylesheet can be written like this:

<--Footer--
Content Area
<--End Footer--

3. style file naming

The main master.css
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css

4. Annotation in the style sheet
Instance One
/* GLOBAL---------------------------*/
/* LINKS---------------------------*/
/* FORMS---------------------------*/
/* IDS---------------------------*/
/* HEADER---------------------------*/
/* COLUMN 1---------------------------*/
/* COLUMN 2---------------------------*/
/* CLASSES---------------------------*/

CSS, div naming rules for HTML pages

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.