Table of Contents
Description of naming rules:
CSS style naming for important parts of the outer layer of the web page:
DIV CSS naming reference table:
CSS style naming
Description
Home Web Front-end HTML Tutorial DIV CSS specification named collection_html/css_WEB-ITnose

DIV CSS specification named collection_html/css_WEB-ITnose

Jun 24, 2016 am 11:52 AM

When we develop CSS DIV web pages (Xhtml), the most confusing and tangled thing is CSS naming, especially newbies who don’t know how to name places and what is the best way to name them.

Description of naming rules:

1), all names should be lowercase

2), attribute values ​​must be in double quotes ( ""), and 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 layout. Regular and neat

4), empty elements must have an ending tag or add "/" after the beginning tag

5), performance and structure are completely separated, and no code is involved The expression elements, such as style, font, bgColor, border, etc.

6), definitions should follow the principle 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 images

9), try to use English naming principles

10) Try not to abbreviate words unless they are words that can be understood at a glance

CSS style naming for important parts of the outer layer of the web page:

Coat wrap------------------used for the outermost head header----------------used for the main head Content main------------used for main content (middle) left main-left-------------left layout right main- right--- --------Right layout navigation bar nav-----------------Web page menu navigation bar contentcontent------------- --For footer at the bottom of the middle body of the web page-----------------Used at the bottom

DIV CSS naming reference table:

The following is a reference table for CSS style naming and CSS file naming, DIV CSS naming collection:

CSS style naming

Description


Web page public name


#wrapper

Page periphery controls the overall layout width


#container or #content

Container, used for the outermost


#layout

Layout


#head,#header

Header part


#foot,#footer

Footer section


#nav

Main navigation


#subnav

Secondary navigation


#menu

Menu


#submenu

Submenu


#sideBar

SideBar


#sidebar_a,#sidebar_b

Left or right sidebar


#main

Page body


#tag

tag


#msg#message

Prompt message


#tips

Tips


#vote

Vote


#friendlink

Friendly connection


#title

title


#summary

Summary


#loginbar

Login bar


#searchInput

Search input box


#hot

Hot Hotspot


#search

Search


#search_output

Search output is similar to search results


#searchBar

Search Bar


#search_results

Search results


#copyright

Copyright Information


#branding

Trademark


#logo

Website LOGO


#siteinfo

Site Info


#siteinfoLegal

Legal Statement


#siteinfoCredits

Credit


#joinus

Join us


#partner

Partner


#service

Service


#regsiter

Register


arr/arrow

Arrows


#guild

Guidelines


#sitemap

sitemap


#list

list


#homepage

Homepage


# subpage

Secondary page subpage


#tool,#toolbar

Toolbar


#drop

dropdown


#dorpmenu

dropdown menu


#status

status


#scroll

scroll


.tab

tab


.left.right.center

Left, center, 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 review


.editor_review

Edit comments


.news_release

Latest Product


.publisher

Manufacturer


.screenshot

Thumbnail


.faqs

FAQ


.keyword

Keyword


.blog

blog


.forum

Forum


CSS file naming

Description

master.css,style.css

main

module.css

Module

base.css

Basic sharing

layout.css

Layout, layout

themes.css

Theme

columns.css

columns

font .css

Text, font

forms.css

Form

mend.css

patch

print.css

Print

Huidu provides [genuine IDE joint promotion plan], various IDEs are sold as low as half price (deadline 2014/12/31). In addition, there are 50% off limited-time sales and free iPhone 6, iPad air and other gifts!


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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

See all articles