1. Description of naming rules: - TOP
1), all names should be lowercase
2), the value of the attribute must be enclosed in double quotes (""), and must be It must have a value such as class="divcss5", id="divcss5"
3), each tag must have a beginning and an end, and must have the correct level, and the layout must be regular and neat
4), empty elements There must be an ending tag or "/" after the beginning tag
5), the performance and structure are completely separated, and the code does not involve any performance elements, such as style, font, bgColor, border, etc.
6 ),
Coat wrap ------------------used for the outermost layer
Header -------------Used for the head
Main contentmain------------Used for the main content (middle part)
Left main-left -------------Left layout
Right main-right ----------Right layout
Navigation bar nav ------------------Web page menu navigation bar
Content content ---------------Used for the middle body of the web page
Bottom footer ------------------used for bottom
3. DIV+CSS naming reference table: - TOP
The following are CSS style naming and CSS files Naming reference table, DIV CSS naming collection:
CSS style naming | Description | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Web page public naming | |||||||||||||||||||||||
#wrapper | Page peripheral control overall layout width | ||||||||||||||||||||||
#container or #content | container, Used for the outermost | ||||||||||||||||||||||
#layout | layout | ||||||||||||||||||||||
#head, #header | page Header part | ||||||||||||||||||||||
#foot, #footer | Footer part | ||||||||||||||||||||||
#nav | Main navigation | ||||||||||||||||||||||
#subnav | Secondary navigation | ||||||||||||||||||||||
#menu | Menu | ||||||||||||||||||||||
#submenu | Submenu | ||||||||||||||||||||||
#sideBar | sidebar | ||||||||||||||||||||||
#sidebar_a, #sidebar_b | Left or right column | ||||||||||||||||||||||
#main | Main page | ||||||||||||||||||||||
#tag | tag | ||||||||||||||||||||||
msg #message | tips | ||||||||||||||||||||||
tips | Tips | ||||||||||||||||||||||
#vote | vote | ||||||||||||||||||||||
friendlink | Friendly connection | ||||||||||||||||||||||
#title | Title | ||||||||||||||||||||||
#summary | Summary | ||||||||||||||||||||||
#loginbar | Login bar | ||||||||||||||||||||||
#searchInput | Search input box | ||||||||||||||||||||||
#hot | Hotspots | ||||||||||||||||||||||
#search | Search | ||||||||||||||||||||||
#search_output | Search output Similar to search results | ||||||||||||||||||||||
#searchBar | Search bar | ||||||||||||||||||||||
search_results | Search results | ||||||||||||||||||||||
#copyright | Copyright information | ||||||||||||||||||||||
#branding | trademark | ||||||||||||||||||||||
#logo | Website LOGO | ||||||||||||||||||||||
#siteinfo | Website information | ||||||||||||||||||||||
siteinfoLegal | Legal Statement | ||||||||||||||||||||||
#siteinfoCredits | Credibility | ||||||||||||||||||||||
#joinus | Join We | ||||||||||||||||||||||
#partner | Partner | ||||||||||||||||||||||
#service | Service | ||||||||||||||||||||||
#regsiter | Registration | ||||||||||||||||||||||
arr/arrow | arrow | ||||||||||||||||||||||
# guild | Guide | ||||||||||||||||||||||
sitemap | 网站MAP | ||||||||||||||||||||||
#list | List | ||||||||||||||||||||||
#homepage | Homepage | ||||||||||||||||||||||
#subpage | Secondary page subpage | ||||||||||||||||||||||
#tool, #toolbar | Toolbar | ||||||||||||||||||||||
#drop | drop-down | ||||||||||||||||||||||
#dorpmenu | Drop-down menu | ||||||||||||||||||||||
#status | Status | ||||||||||||||||||||||
#scroll | Scroll | ||||||||||||||||||||||
.tab | Tab page | ||||||||||||||||||||||
Left, center, right | |||||||||||||||||||||||
news | |||||||||||||||||||||||
Download | |||||||||||||||||||||||
Advertising banner (top advertising banner) | |||||||||||||||||||||||
Products | |||||||||||||||||||||||
Product prices | |||||||||||||||||||||||
Product Description | |||||||||||||||||||||||
Product Review | |||||||||||||||||||||||
Editor Comment | |||||||||||||||||||||||
Latest products | |||||||||||||||||||||||
Manufacturer | |||||||||||||||||||||||
Thumbnail | ##.faqs | ||||||||||||||||||||||
.keyword | |||||||||||||||||||||||
.blog | |||||||||||||||||||||||
.forum | |||||||||||||||||||||||
CSS file naming | Description |
---|---|
master.css, style.css | Main |
module.css | Module |
base.css | Basically shared |
layout.css | Layout, layout |
themes.css | Theme |
columns.css | Column |
Text, font | |
Form | |
Patch | |
CSS style naming description
Web page public naming
#wrapper Page peripheral control Overall layout width
#container or #content container, used for the outermost
#layout layout
#head, #header header part
#foot, #footer footer part
# nav main navigation
#subnav secondary navigation
#menu menu
#submenu submenu
#sideBar sidebar
#sidebar_a, #sidebar_b left sidebar or right sidebar
#main page Subject
#tag Tag
#msg #message Prompt message
#tips Tips
#vote Vote
#friendlink Friendly link
#title Title
#summary Summary
#loginbar login bar
#searchInput search input box
#hot hot spot
#search search
#search_output search output and search results are similar
#searchBar search bar
#search_results search Result
#copyright Copyright information
#branding Trademark
#logo Website LOGO mark
#siteinfo Website information
#siteinfoLegal Legal statement
#siteinfoCredits Credibility
#joinus Join us
#partner partner
#service service
#regsiter registration
arr/arrow arrow
#guild guide
#sitemap sitemap
#list list
#homepage homepage
#subpage secondary page subpage
#tool, #toolbar toolbar
#drop drop-down
#dorpmenu drop-down menu
#status status
#scroll scroll
.tab Tag page
.left .right .center Left, middle, right
.news News
.download Download
.banner Advertising banner (top advertising banner)
Electronic trade related
. products products
.products_prices product prices
.products_description product description
.products_review product reviews
.editor_review editor review
.news_release latest products
.publisher manufacturer
.screenshot abbreviation Outline
.faqs Frequently Asked Questions
.keyword Keyword
.blog Blog
.forum Forum
CSS File Naming Description
master.css,style.css Main
module .css module
base.css basically shares
layout.css layout, layout
themes.css theme
columns.css column
font.css text, font
forms.css form
mend.css Patch
print.css Print
Other instructions for CSS naming:
DIV+CSS naming summary: Whether you use "." (lowercase period) to select the name starting with the symbol, or use "# It doesn't matter whether the name starts with the "#" (pound sign) selection symbol, but we'd better follow it. The main, important, special, and outermost boxes should be named with the "#" (pound sign) selection symbol, and the others should use ". ” (lowercase period) selector symbol to start naming, also consider named CSS selectors to be reused in HTML calls.
Usually our most commonly used main names are: wrap (coat, outermost layer), header (header, header), nav (navigation bar), menu (menu), title (column title, generally matched with h1\h2 \h3\h4 tag use)
, content (content area), footer (footer, bottom), logo (logo, can be used with h1 tag), banner (advertising banner, usually at the top), copyRight (copyright) . Others can be used selectively according to your own needs.
DIVCSS5 recommendation: The main, important, and outermost boxes should be named starting with the "#" (pound sign) selection symbol, and the others should be named starting with the "." (lowercase period) selection symbol.
2. The CSS style file is named as follows
Layout, layout.css
Columns columns.css
Text font.css
Print style print .css
themes.css
4. English naming skills: - TOP
It is recommended to use Google online translation tool:
The above is the detailed content of Complete list of div+css naming conventions. For more information, please follow other related articles on the PHP Chinese website!