Complete list of div+css naming conventions

零下一度
Release: 2017-06-24 10:18:59
Original
1658 people have browsed it

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 ),

to

should be defined from large to small to reflect the structure of the document and facilitate search engine queries.
7), add a unique structure tag id to each table and form
8), add alt tags to pictures
9), try to use English naming principles
10), Try not to abbreviate unless it is a word that is easy to understand at a glance
DIVCSS5 introduces common CSS naming and DIV CSS naming methods.
2. CSS style naming for important parts of the outer layer of the web page: - TOP

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:

##.left .right .centerLeft, center, right##.news.download.bannerElectronic trade related.products.products_prices.products_description.products_review.editor_review.news_release.publisher.screenshot##.faqsFAQ.keywordKeyword.blogblog.forumforum

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
news
Download
Advertising banner (top advertising banner)
Products
Product prices
Product Description
Product Review
Editor Comment
Latest products
Manufacturer
Thumbnail
##font.cssText, fontforms.cssFormmend.cssPatchprint.cssPrint
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

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

Main master.css

Layout, layout.css
Columns columns.css
Text font.css
Print style print .css
themes.css
4. English naming skills: - TOP

If you encounter something that is not commonly used, you can use a translation tool to translate it and name it in English.

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template