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
10 skills that make front-end developers worth millions
The skills that front-end developers need to mast...
Deeply understand how nginx achieves high performance and scalability
The overall architecture of NGINX is characterize...
JavaScript Basics Operators
Table of contents 1. Operators Summarize 1. Opera...
Analyze Mysql transactions and data consistency processing issues
This article analyzes the consistency processing ...
Detailed explanation of the implementation of WeChat applet track playback and the pitfalls encountered
WeChat applet trajectory playback mainly uses pol...
A brief discussion on spaces and blank lines in HTML code
All consecutive spaces or blank lines (newlines) ...
Docker solution for logging in without root privileges
When you use the docker command for the first tim...
mysql command line script execution example
This article uses an example to illustrate the ex...
Good website copywriting and good user experience
Looking at a website is actually like evaluating a...
Detailed tutorial on compiling and installing MySQL 8.0.20 from source code
In the previous article, we introduced: MySQL8.0....
CentOS 6 uses Docker to deploy redis master-slave database operation example
This article describes how to use docker to deplo...
Tutorial on processing static resources in Tomcat
Preface All requests in Tomcat are handled by Ser...
Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)
CUDA installation download cuda Enter the nvidia-...
Summary of data interaction between Docker container and host
Preface When using Docker in a production environ...
Mysql triggers are used in PHP projects to back up, restore and clear information
Examples: Through the PHP background code, you ca...