zoukankan      html  css  js  c++  java
  • 常用的CSS命名规范大总结

    转载: http://www.php.cn/toutiao-417563.html

    文本命名规范

    index.css: 一般用于首页建立样式

    head.css: 头部样式,当多个页面头部设计风格相同时使用。

    base.css: 共用样式。

    style.css:独立页面所使用的样式文件。

    global.css:页面样式基础,全局公用样式,页面中必须包含。

    layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中

    module.css:模块,用于产品类页,也可与其它样式配合使用。

    master.css:主要的样式表

    columns.css:专栏样式

    themes.css:主体样式

    forms.css:表单样式

    mend.css:补丁,基于以上样式进行的私有化修补。

    页面结构命名:

    page:代表整个页面,用于最外层。

    wrap:外套,将所有元素包在一起的一个外围包,用于最外层

    wrapper:页面外围控制整体布局宽度,用于最外层

    container:一个整体容器,用于最外层

    head,header:页头区域,用于头部

    nav: 导航条

    content:内容,网站中最重要的内容区域,用于网页中部主体

    main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容

    column:栏目

    sidebar:侧栏

    foot,footer:页尾、页脚。网站一些附加信息放置区域,(或命名为 copyright)用于底部

    导航命名:

    nav, navbar, navigation, nav-wrapper:导航条或导航包,代表横向导航

    topnav:顶部导航

    mainbav:主导航

    subnav:子导航

    sidebar:边导航

    leftsidebar 或 sidebar_a:左导航

    rightsidebar 或 sidebar_b:右导航

    title:标题

    summary:摘要

    menu:菜单,区域包含一般的链接和菜单

    submenu:子菜单

    drop:下拉

    dorpmenu:下拉菜单

    links:链接菜单

    功能命名:

    logo:标记网站logo标志

    banner:标语、广告条、顶部广告条

    login:登陆,(例如登录表单:form-login)

    loginbar:登录条

    register:注册

    tool, toolbar:工具条

    search:搜索

    searchbar:搜索条

    searchlnput:搜索输入框

    shop:功能区,表示现在的

    icon:小图标

    label:商标

    homepage:首页

    subpage:二级页面子页面

    hot:热门热点

    list:文章列表,(例如:新闻列表:list-news)

    scroll:滚动

    tab:标签

    sitemap:网站地图

    msg 或 message:提示信息

    current:当前的

    joinus:加入

    status:状态

    btn:按钮,(例如:搜索按钮可写成:btn-search)

    tips:小技巧

    note:注释

    guild:指南

    arr, arrow:标记箭头

    service:服务

    breadcrumb:(即页面所处位置导航提示)

    download:下载

    vote:投票

    siteinfo:网站信息

    partner:合作伙伴

    link, friendlink:友情链接

    copyright:版权信息

    siteinfoCredits:信誉

    siteinfoLegal:法律信息

  • 相关阅读:
    webstorm编辑器使用
    css深入理解z-index
    vue-cli安装失败问题
    html5 离线存储
    ESXI安装
    文档相似性匹配
    Hibernate基础
    云存储技术
    Signs of a poorly written jQuery plugin 翻译 (Jquery插件开发注意事项,Jquey官方推荐)
    Jquery类级别与对象级别插件开发
  • 原文地址:https://www.cnblogs.com/izhaong/p/12154302.html
Copyright © 2011-2022 走看看