DIV+CSS naming convention-Reprint 1

Description of the naming rules:

1), all the names are preferably lowercase

2), the value of the attribute must be enclosed in double quotation marks (""), and must have values such as class= "DIVCSS5", id= "DIVCSS5"

3), each label must have the beginning and the end, and must have the correct level, the layout has the regularity neatly

4), empty element to have the end of the tag or after the beginning of the tag plus "/"

5), performance and structure are completely separated, the code does not involve any expression elements, such as style, font, bgColor, border, etc.

6), the definition, should follow from the big to the small principle, manifests the document structure, and facilitates the search engine query.

7), add a unique, structure tag ID to each table and form

8), add alt tag to picture

9), to use the English naming principle as far as possible

10), as far as possible not abbreviated, unless a look to understand the word

The CSS style is named relative to the outer part of the page:

Jacket Wrap------------------for the outermost head header----------------for the main contents of the head Main------------to the left of the Main-left-------------left side of the main content (middle) main- Right-----------Layout nav Bar nav-----------------page Menu navigation bar content Content---------------used in the middle of a Web page footer-----------------for bottom

Div+css Named reference table:

The following is a CSS style naming reference table with CSS files, a DIV CSS named collection:

CSS style naming	Description
Web page public naming
#wrapper	Page perimeter control Overall layout width
#container或 #content	container, for outermost
#layout	Layout
#head, #header	Page Head points
#foot, #footer	Footer section
#nav	Main navigation
#subnav	Second-level navigation
#menu	Menu
#submenu	Sub-Menu
#sideBar	Side bar
#sidebar_a, #sidebar_b	Left column or right column
#main	Page body
#tag	Label
#msg #message	Prompt information
#tips	Little Tricks
#vote	Vote
#friendlink	Friendship Connection
#title	Title
#summary	Summary
#loginbar	Login Bar
#searchInput	Search Input Box
#hot	Popular hot Spots
#search	Search
#search_output	Search output is similar to search results
#searchBar	Search bar
#search_results	Search results
#copyright	Copyright information
#branding	Trademark
#logo	Website Logo logo
#siteinfo	Website Information
#siteinfoLegal	Legal Notices
#siteinfoCredits	Credibility
#joinus	Join us
#partner	Our Partners
#service	Service
#regsiter	Registered
Arr/arrow	Arrow
#guild	Guide
#sitemap	Site Map
#list	List
#homepage	Home
#subpage	Level two page face page
#tool, #toolbar	Tool bar
#drop	Drop down
#dorpmenu	Drop-down menu
#status	State
#scroll	Rolling
. tab	tab page
. left.right.center	Left, centre, and right
. News	News
. download	Download
. Banner	Banner (top ad bar)
E-commerce related
. Products	Products
. products_prices	Product price
. products_description	Product Description
. Products_review	Product Reviews
. Editor_review	Edit a Comment
. news_release	Latest Products
. publisher	Manufacturers
. screenshot	Thumbnail image
. FAQs	Problems
. keyword	Keywords
. Blog	Blog
. Forum	Forum

CSS file naming	Description
Master.css,style.css	of the main
Module.css	Module
Base.css	Basic common use
Layout.css	Layout, layout
Themes.css	Theme
Columns.css	Column
Font.css	Text, Font
Forms.css	Form
Mend.css	Patch
Print.css	Print

DIV+CSS naming convention-Reprint 1