DIV+CSS Naming Reference

Source: Internet
Author: User
Tags header reference custom name
css| Reference Program code
Header: Header
Content: Content/container
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Left Right Center

Name all use lowercase letters, if you need more than one word, use "-" to separate words, such as user-list

Common code structure:

Program Code div: mainly for layout, split the structure of the page
Ul/ol: For unordered/ordered lists
Span: There is no special meaning that can be used as a support for typesetting, for example

<li><span> (4.23) </span> The six anniversary of the Magic net six anniversary of the Magic network six years of Magic network six </li>

Then define span as right float in CSS, and realize the effect of date and caption display on both sides

H1-h6: Title
H1-h6 Descending according to importance
The most important title of the H1 bit

Program code label: Good things to make your form more approachable and to assist with form typesetting, such as:
<label for= "User-password" > Password </label>
<input type= "password" name= "password" id= "User-password"/>

Fildset & Legend:fildset are set outside the form, and legend is used to describe the contents of the form. For example:
<label for= "User-password" > Password </label>
<input type= "password" name= "password" id= "User-password"/>

Program code DL,DT,DD: When the first action appears in the page similar to the title/brief, then the following is a detailed description of the content should use the label, for example
<dt> What is css?</dt>
<dd>css is a technique called style sheet (stylesheet). Some people call it cascading style sheets (cascading Stylesheet). <dd>
<dt> What is XHTML? </dt>
< dd>xhtml is an xml-based markup language that seems to be somewhat imagined with HTML, with only a few small but important differences. As you can see, XHTML is an XML that acts like an HTML role. XHTML is essentially a bridging (transition) technology that combines the power of XML (in some cases) with the simple features of HTML (most). </dd>

Program code C #content

S #subcol

M #maincol

X #xcol

This is the vertical layout of the XHTML structure, c-smx that the Web page has three columns, C-SM said there are two columns, C-MX indicates that two columns one is attached, c-m represents a vertical bar.

The layout of the three columns needs to be divided into two layers: the first layer is #subcol and #main the second layer is the #maincol and #xcol in #main.

Program code custom naming:
According to the Web site, it's best to name it by meaning
For example: is important news highlighting (like red)
There are two kinds of
. red{color:red}
. important-news{color:red}
It's clear that the second message is more explicit, so try not to use it as your own custom name.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.