DIV CSS specification named collection_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:52:38
Original
1210 people have browsed it

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!


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