Common css naming rules_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:39:24
Original
1042 people have browsed it

Common css naming rules

Header: header

Content: content/container

Tail: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

Left and center: left right center

Login bar: loginbar

Logo: logo

Advertising: banner

Page body: main

Hotspot: hot

News: news

Download: download

Subnav: subnav

Menu: menu

Submenu: submenu

Search: search

Friendly link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tab: tab

Article list: list

Prompt message: msg

Tips: tips

column Title: title

Join: joinus

Guide: guide

Service: service

Registration: register

Status: status

Vote: vote

Partner: partner

(2) Comment writing:

/* Header */ 内容区 /* End Header */ 
Copy after login

(3) ID naming:

(1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

left right center

(2)Navigation

Navigation: nav

Main navigation: mainbav

Subnav: subnav

Top navigation: topnav

Side navigation: sidebar

Left navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) Function

Logo: logo

Advertising: banner

Login: login

Login bar: loginbar

Registration: register

Search: search

ribbon : shop (like shopping cart)

title: title

join: joinus

status: status

button: btn

scroll :scroll

Tab page: tab

Article list: list

Prompt message: msg

Current: current

Tips :tips

icon: icon

note: note

guide: guide

service: service

hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Friendly link: link

Copyright: copyright

(4) Class naming:

(1) Color: use the color name or hexadecimal code, such as

.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } 
Copy after login

(2) Font size, directly use "font font size" as the name, such as

.font10px { font-size: 10px; } .font6pt {font-size: 6pt; } 
Copy after login

(3) Alignment style, use the English name of the alignment target, such as

.left { float:left; } .bottom { float:bottom; } 
Copy after login

(4) Title Column style, use the "category function" method to name, such as

.barnews { } .barproduct { } 
Copy after login

Note::

  1. all lowercase;
  2. try to use English;
  3. No dashes or underlines;
  4. Try not to abbreviate;

I prefer the simple and elegant style of bootstrap. So you can also refer to css naming.

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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!