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
CSS optimization skills self-practice experience
1. Use css sprites. The advantage is that the smal...
Analysis of the new features of MySQL 8.0 - transactional data dictionary and atomic DDL
Preface Transactional data dictionary and atomic ...
JS implements multiple tab switching carousel
Carousel animation can improve the appearance and...
Example code for implementing large screen adaptation on PC using vue+px2rem (rem adaptation)
Configuration Preface Project construction: built...
A brief discussion on MySQL index design principles and the differences between common indexes
Index definition: It is a separate database struc...
Learn the black technology of union all usage in MySQL 5.7 in 5 minutes
Performance of union all in MySQL 5.6 Part 1:MySQ...
Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS
In the past, float was often used for layout, but...
Detailed explanation of chmod command usage in Linux
chmod Command Syntax This is the correct syntax w...
Detailed explanation of the use of Vue3 state management
Table of contents background Provide / Inject Ext...
A detailed introduction to setting up Jenkins on Tencent Cloud Server
Table of contents 1. Connect to Tencent Cloud Ser...
Sample code for separating the front-end and back-end using FastApi+Vue+LayUI
Table of contents Preface Project Design rear end...
Solution to the problem of MySQL thread in Opening tables
Problem Description Recently, there was a MySQL5....
MySQL high availability solution MMM (MySQL multi-master replication manager)
1. Introduction to MMM: MMM stands for Multi-Mast...
MySQL8.0 installation process under Centos7 in VMware workstation16 and Navicat remote connection
Table of contents 1. CentOS7+MySQL8.0, yum source...
Getting Started Tutorial for Beginners⑧: Easily Create an Article Site
In my last post I talked about how to make a web p...