Web page standard normalization css+xhtml naming reference

Source: Internet
Author: User
Tags header print print reference wrapper
css|xhtml| Standard | reference | standardization | Web page

CSS naming rules

Header: Header
Content: Content/containe
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Left Right Center
Login Bar: Loginbar
Logo: Logo
Advertisement: Banner
Page body: Main
Hotspot: Hot
News
Download: Download
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Search on: Search
Friendship Link: friendlink
Footer: Footer
Copyrights: Copyright
Scrolling: Scroll
Contents: Content
tab page: Tab
Article listing: List
Tip Message: Msg
Tips: Tips
Column Title: Title
Add: Joinus
Guide: Guild
Services: Service
Registration: Regsiter
State: Status
Vote: Vote
PARTNER: Partner

Name of ID in XHTML file

(1) Page structure
Container: Container
Page Header: Header
Content: Content/container
Page body: Main
Page End: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Left Right Center
(2) Navigation
Navigation: Nav
Main navigation: MAINBAV
Sub-navigation: Subnav
Top Navigation: Topnav
Edge Navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Menus: Menu
Sub-menu: submenu
Titles: Title
Summary: summary
(3) function
Logo: Logo
Advertisement: Banner
Login: Login
Login Bar: Loginbar
Registration: Regsiter
Search on: Search
Functional area: Shop
Titles: Title
Add: Joinus
State: Status
Button: BTN
Scrolling: Scroll
tab page: Tab
Article listing: List
Tip Message: Msg
Currently: current
Tips: Tips
Icons: Icon
NOTES: note
Guide: Guild
Services: Service
Hotspot: Hot
News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyrights: Copyright

Name of class in XHTML file

(1) Color: Use the name of the color or the 16 code, such as (not recommended to name the performance)
. red {color:red;}
. F60 {color: #f60;}
. ff8600 {color: #ff8600;}
(2) Font size, directly using "font+ font size" as a name, such as
. font12px {font-size:12px}
. font9pt {FONT-SIZE:9PT}
(3) Alignment style, using the English name of the alignment target, such as
. left {float:left;}
. Bottom {Float:bottom}
(4) title bar style, using the "category + Features" way to name, such as
. Barnews {}
. barproduct {}

other relevant considerations

1. All lowercase;
2. Use English as much as possible;
3. Do not add the middle bar and underline;
4. Try not to abbreviate, unless a look at the words understood.
The main master.css
Module MODULE.CSS
Basic shared Base.css
layouts, Layout layout.css
Theme Themes.css
Column Columns.css
Text Font.css
Form Forms.css
Patch Mend.css
Print Print.css



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.