• css命名规范


    css命名规范

    页面结构命名

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

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

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

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

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

            6、nav:导航条

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

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

            9、column:栏目

            10、sidebar:侧栏

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

    导航命名

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

             2、topnav:顶部导航

             3、mainbav:主导航

             4、subnav:子导航

             5、sidebar:边导航

             6、leftsidebar或sidebar_a:左导航

             7、rightsidebar或sidebar_b:右导航

             8、title:标题

             9、summary:摘要

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

             11.submenu:子菜单

              12、drop:下拉

              13.dropmenu:下拉菜单

              14.links:链接菜单

    功能命名

               1.logo:标记网站logo标志

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

                3、login:登录

                4、loginbar:登录条

                5、regsiter:注册

                6、tool、toolbar:工具条

                7、search:搜索

                8、searchbar:搜索条

                9、searchInput:搜索输入框

                10、shop:功能区,表示现在的

               11、icon:小图标

               12、label:商标

               13、homepage:首页

               14、subpage:二级页面子页面

                15、hot:热门热点

                16、list:文章列表

                 17、scroll:滚动

                 18、tab:标签

                 19、sitemap:网站地图

                  20、msg或message:提示信息

                  21、current:当前的

                  22、joinus:加入

                  23、status:状态

                  24、btn:按钮

                  25、tips:小技巧

                  26、note:注释

                  27、guild:指南

                  28、arr、arrow:标记箭头

                  29、service:服务

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

                  31、download:下载

                  32、vote:投票

                  33、siteinfo:网站信息

                  34、partner:合作伙伴

                   35、link、friendlink:友情链接

                   36、copyright:版权信息

                   37.siteinfoCredits:信誉

                   38、siteinfoLegal:法律信息

      CSS样式命名

     1、对齐样式命名:left(左边内容)、center(中间内容)、right(右边内容)等

    2、颜色英文命名:red(红色)、green(绿色)、yellow(黄色),又或者border_red(红色边框)等

    3、颜色代码命名:f00(红色)、ff0(黄色)、f90(橙色)等

    4、文字大小命名:font12px(字体12像素)、font16px(字体16像素)等

    5、页面线条命名:line_X(横线)、line_y(纵线)或line_red(红线)、line_black(黑线)

    6、图片图标命名:pic_1.jpg、pic_2.jpg或ico_1.gif、ico_2.gif

    7、页面广告命名:ad_01、ad_02

    8、背景框架命名:nav_bg(代表导航条的背景图片位置)、tool_bg(代表工具栏的背景图片位置)

    CSS样式表命名

    1、index.css:单独为首页建立样式

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

    3、base.css:共用样式

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

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

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

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

    8、master.css:主要的样式表

    9、columns.css:专栏样式

    10、themes.css:主体样式

    11、forms.css:表单样式

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

  • 相关阅读:
    ORACLE PL/SQL使用经验总结 [转]
    网页表单项Input的高级限制级用法 [转]
    Zend_Search_Lucene索引更新
    Zend Framework 1.10.1 开始使用 Zend_Search_Lucene
    使用zend Framework的lucene进行全文检索——中文分词
    SQL to Select a random row from a database table
    php源代码之函数集介绍
    Zend Framework之Search_Lucene实例
    array_multisort根据字段给数组排序
    php soap实例讲解
  • 原文地址:https://www.cnblogs.com/zzp0320/p/7227630.html
Copyright © 2020-2023  润新知