Home > Web Front-end > HTML Tutorial > DIV+CSS standard named collection

DIV+CSS standard named collection

巴扎黑
Release: 2017-05-01 14:51:21
Original
1523 people have browsed it

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

Naming rule description:

1) All names should be lowercase

2) The value of the attribute must be enclosed in double quotes (""), and must have a value such as class="pcss5", id="pcss5"

3). Each tag must have a beginning and an end, and must have the correct level, and the layout must be regular and neat

4) Empty elements must have an ending tag or add "/"

after the starting tag. 5). Performance and structure are completely separated. The code does not involve any performance elements, such as style, font, bgColor, border, etc.

6) The definition should follow the principle from large to small, 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 tag

to the picture 9) Try to use English naming principles

10) Try not to abbreviate words unless they are easy to understand at a glance

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

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

p+CSS naming reference table:

The following is a reference table for CSS style naming and CSS file naming, p CSS naming set:

CSS style naming

illustrate

Public naming of web page

#wrapper

Page peripheral control overall layout width

#container or #content

Container, used for the outermost layer

#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 column or right column

#main

Page body

#tag

Label

#msg#message

Prompt message

#tips

Tips

#vote

Vote

#friendlink

Friendly connection

#title

Title

#summary

Summary

#loginbar

Login strip

#searchInput

Search input box

#hot

Popular 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

Website information

#siteinfoLegal

Legal Notices

#siteinfoCredits

Reputation

#joinus

join us

#partner

Partner

#service

Serve

#regsiter

register

arr/arrow

Arrow

#guild

Guide

#sitemap

Sitemap

#list

List

#homepage

front page

#subpage

Secondary page subpage

#tool,#toolbar

Toolbar

#drop

drop down

#dorpmenu

Drop-down menu

#status

state

#scroll

scroll

.tab

Bookmark page

.left.right.center

Left, center, right

.news

news

.download

download

.banner

Advertising banner (top advertising banner)

Electronic trade related

.products

product

.products_prices

product price

.products_description

Product Description

.products_review

Product Review

.editor_review

Editorial Comment

.news_release

Latest Products

.publisher

manufacturer

.screenshot

Thumbnail

.faqs

common problem

.keyword

Key words

.blog

blog

.forum

Forum

CSS file naming

illustrate

master.css,style.css

Main

module.css

Module

base.css

Basic sharing

layout.css

Layout, layout

themes.css

theme

columns.css

Column

font.css

Text, font

forms.css

Form

mend.css

Patch

print.css

Print

The above is the detailed content of DIV+CSS standard named collection. For more information, please follow other related articles on the PHP Chinese website!

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