书签 分享 收藏 举报 版权申诉 / 16
立即下载 加入VIP,免费下载
当前位置： 首页 > 工作范文 > 行政公文 > css命名规范英文命名.docx

类型css命名规范英文命名.docx

  • 文档编号：23299841
  • 上传时间：2023-05-16
  • 格式：DOCX
  • 页数：16
  • 大小：23.41KB

　　

#mainMenu{

width:

100%;

height:

30px;

background:

url（images/mainMenu_bg.jpg）repeat-x;

}

#mainMenuulli{

float:

left;

line-height:

30px;

margin-right:

1px;

cursor:

pointer;

}

*******************************************************************************************

命名参考（来源网络）

常用的CSS命名规则：

 

头：

header

内容：

content/container

尾：

footer

导航：

nav

侧栏：

sidebar

栏目：

column

页面外围控制整体布局宽度：

wrapper

左右中：

leftrightcenter 

命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

常用代码结构：

div：

主要用于布局，分割页面的结构

ul/ol：

用于无序/有序列表

span：

没有特殊的意义，可以用作排版的辅助，

例如

  • （4.23）天幻网六周年天幻网六周年天幻网六周年天幻网六

    • 然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

    h1-h6：

    标题

    h1-h6根据重要性依次递减

    h1位最重要的标题

    label：

    为了使你的表单更有亲和力而且还能辅助表单排版的好东西，

    例如：

    密　码

    fieldset&legend：

    fildset套在表单外，legend用于描述表单内容。

    例如：

    title

    密　码

    dl,dt,dd：

    当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，

    例如

    什么是CSS?

    CSS就是一种叫做样式表（stylesheet）的技术。

    也有的人称之为层叠样式表（CascadingStylesheet）。

    什么是XHTML？

    XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。

    可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。

    本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。

     

    C#content

    S#subcol

    M#maincol

    X#xcol

    这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏,c-sm表示有两个纵栏,c-mx表示有两个纵栏其中一个是附属的,c-m表示一个纵栏。

    其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

    自定义命名：

    根据w3c网站上给出的,最好是用意义命名

    比如：

    是重要的新闻高亮显示（像红色）

    有两种

    .red{color:

    red}

    .important-news{color:

    red}

    很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

    CSS命名规范

    DIVCSS名称说明 

    网站公用相关 

    Containerdiv#container容器 

    Headerorbannerdiv#header页头部分 

    Mainorglobalnavigationdiv#mainNav主导航 

    Menu#menu菜单 

    SubMenu#submenu子菜单 

    Leftorrightsidecolumns#sidebarA,#sidebarB左边栏或右边栏 

    Maindiv#main页面主体 

    Contentdiv#content内容部分 

    Themaincontentarea#contentMain主要内容区域 

    Footerdiv#footer页脚部分 

    Tag#tag标签 

    Message#msg#message提示信息 

    Tips#tips小技巧 

    Vote#vote投票 

    FriendLink#friendlink友情连接 

    Title#title标题 

    Summary#summary摘要 

    Sub-navigationlist#subNav二级导航 

    Searchinput#searchInput搜索输入框 

    Searchoutput#searchOutput搜索输出和搜索结果相似 

    Search#search搜索 

    Searchresults#searchResults搜索结果 

    Copyrightinformation#copyright版权信息 

    brand#branding商标 

    branding-logo#brandingLogoLOGO 

    Siteinformation#siteinfo网站信息 

    Copyrightinformationetc.#siteinfoLegal法律声明 

    Designerorothercredits#siteinfoCredits信誉 

    Joinus#joinus加入我们 

    Partnershipopportunities#partner合作伙伴 

    Services#service服务 

    Regsiter#regsiter注册 

    Status#status状态

    　　9、鼠标手势：

    在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:

    pointer;”

     

    CSS样式命名规范

    设置字体:

    小 中 大

    刚开始学HTML和CSS的时候就到网上看了一篇CSS样式命名规则文章，经过一小段时间的工作经验，今天回头来看这个命名规则感觉还有要增加的内容。

    1.样式命名

    外　套：

    　　wrap

    主导航：

    　　mainnav

    子导航：

    　　subnav

    页　脚：

    　　footer

    整个页面：

    　content

    页　眉：

    　　header

    页　脚：

    　　footer

    商　标：

    　　label

    标　题：

    　　title

    主导航：

    　　mainbav（globalnav）

    顶导航：

    　　topnav

    边导航：

    　　sidebar

    左导航：

    　　leftsidebar

    右导航：

    　　rightsidebar

    旗　志：

    　　logo

    标　语：

    　　banner

    菜单内容1：

    menu1content

    菜单容量：

    　menucontainer

    子菜单：

    　　submenu

    边导航图标：

    sidebarIcon

    注释：

    　　　note

    面包屑：

    　　breadcrumb（即页面所处位置导航提示）

    栏目：

    　　　column

    登录条：

    　　loginbar

    热点：

    　　　hot

    新闻：

    　　　news

    下载：

    　　　download

    友情链接：

    　friendlink

    版权：

    　　　copyright

    滚动：

    　　　scroll

    标签页：

    　　tab

    提示信息：

    　msg

    小技巧：

    　　tips

    加入：

    　　　joinus

    指南：

    　　　guild

    服务：

    　　　service

    注册：

    　　　regsiter

    状态：

    　　　status

    投票：

    　　　vote

    合作伙伴：

    　partner

    容器：

    　　　container

    内容：

    　　　content

    搜索：

    　　　search

    登陆：

    　　　Login

    功能区：

    　　shop（如购物车，收银台）

    当前的：

    　　current

    小工具：

    　　tool

    盒子：

    　　　box

    局部块：

    　　part（A-Z）

    2.样式文件命名

    基本的：

    　　base.css

    主要的：

    　　master.css

    布局，版面：

    layout.css

    局部：

    　　　part.css

    专栏：

    　　　columns.css

    文字：

    　　　font.css

    打印样式：

    　print.css

    主题：

    　　　themes.css

    3.缩写命名

    左浮：

    　　　fl=float:

    left;

    右浮：

    　　　fr=float:

    right;

    清楚浮动：

    　clear=clear:

    both;

    左对齐：

    　　tl=text-align:

    left;

    右对齐：

    　　tri=text-align:

    right;

    居中：

    　　　tc=text-align:

    center;

    宽度：

    　　　w1（width）=1px……..w1000=1000px

    高度：

    　　　h1（height）=1px……..h1000=1000px

    清楚边框：

    　bd_n=border:

    none!

    important;

    加粗：

    　　　fw_b=font-weight:

    bold;

    清楚加粗：

    　fw_n=font-weight:

    normal;

    隐藏块：

    　　dp_n=disipay:

    none;

    显示块：

    　　dp_b=disipay:

    block;

    清楚背景色：

    bg_n=background:

    none;

    外边距（上右下左）：

    　m_05=margin:

    5px;

    外边距（上下左右）：

    　m_0510=margin:

    5px10px;

    外边距（上左右下）：

    　m_051007=margin:

    5px10px7px;

    外边距（上）：

    　　mt_10=margin-top:

    10px;

    外边距（右）：

    　　mr_10=margin-right:

    10px;

    外边距（下）：

    　　mb_10=margin-bottom:

    10px;

    外边距（左）：

    　　ml_10=margin-left:

    10px;

    内边距（上右下左）：

    　p_05=padding:

    5px;

    内边距（上下左右）：

    　p_

    举报
    举报     版权申诉
    版权申诉     word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
    配套讲稿：

    如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制：

    部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词：
    css 命名 规范 英文
    提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：css命名规范英文命名.docx
    链接地址：https://www.bdocx.com/doc/23299841.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部