Summary of naming conventions for HTML and CSS
|
CSS naming rules header: header Content: content/contain footer Navigation: nav Sidebar: sidebar Column: column The page periphery controls the overall layout width: wrapper Left right center Login bar: loginbar Logo: logo Advertisement: banner Page body: main Hot spot: hot News: news Download: download Sub-navigation: subnav Menu: menu Submenu: submenu Search: search Friend link: friendlink Footer: footer Copyright: copyright Scroll: scroll Content: content Tab: tab Article list: list Prompt message: msg Tips: Column title: title Join: joinus Guide: guild Service: service Registration: regsiter Status: status Voting: vote Partner: partner Naming of id in XHTML file (1) Page structure container: container Header: header Content: content/container Page body: main Footer: footer Navigation: nav Sidebar: sidebar Column: column The page periphery controls the overall layout width: wrapper Left right center (2) Navigation: nav Main navigation: mainbav Sub-navigation: subnav Top navigation: topnav Side navigation: sidebar Left navigation: leftsidebar Right navigation: rightsidebar Menu: menu Submenu: submenu Title: title summary: summary (3) Functional symbol: logo Advertisement: banner Login: login Login bar: loginbar Registration: regsiter Search: search Functional area: shop Title: title Join: joinus Status: status Button: btn Scroll: scroll Tab: tab Article list: list Prompt message: msg current: current Tips: Icon: icon Note: Guide: guild Service: service Hot spot: hot News: news Download: download Voting: vote Partner: partner Friendly links: link Copyright: copyright Class naming in XHTML files (1) Color: Use the color name or hexadecimal code, such as (it is not recommended to name based on appearance) .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } (2) Font size: Use "font+font size" as the name, such as .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3) Alignment style, use the English name of the alignment target, such as .left { float:left; } .bottom { float:bottom; } (4) Title bar style, named using the "category + function" method, such as .barnews { } .barproduct { } Other related matters 1. All lowercase; 2. Use English as much as possible; 3. No hyphens or underscores; 4. Try not to abbreviate unless the word is clear at a glance. Main master.css module.css Basic shared base.css Layout, layout layout.css themethemes.css columns.css textfont.css forms.css Patch mend.css Printprint.css |
<<: Solution to CSS anchor positioning being blocked by the top fixed navigation bar
>>: Detailed process of building nfs server using Docker's NFS-Ganesha image
Recommend
How to create a view on multiple tables in MySQL
In MySQL, create a view on two or more base table...
Understand the principles of MySQL persistence and rollback in one article
Table of contents redo log Why do we need to upda...
Native js to realize a simple snake game
This article shares the specific code of js to im...
Detailed explanation of Linux file operation knowledge points
Related system calls for file operations create i...
MySQL msi version download and installation detailed graphic tutorial for beginners
Table of contents 1. Download MySQL msi version 2...
How to solve the problem of not getting form value after submitting html form input using disabled
After the form input box input is set to the disa...
How to use Vue cache function
Table of contents Cache function in vue2 Transfor...
The front-end page pop-up mask prohibits page scrolling
A problem that front-end developers often encount...
Methods and steps to upgrade MySql5.x to MySql8.x
Several Differences Between MySQL 5.x and MySQL 8...
Sample code for achieving three-dimensional picture placement effect with pure CSS
1. Percentage basis for element width/height/padd...
Research on the effect of page sidebar realized by JS
Table of contents Discover: Application of displa...
Detailed steps to configure MySQL remote connection under Alibaba Cloud
Preface As we all know, by default, the MySQL ins...
Introduction to Jenkins and how to deploy Jenkins with Docker
1. Related concepts 1.1 Jenkins Concepts: Jenkins...
JavaScript implements the drag slider puzzle verification function (html5, canvas)
introduction: Slider drag verification is now use...
Vue uses custom instructions to add watermarks to the bottom of the page
Project Scenario Add a custom watermark to the en...