精华内容
下载资源
问答
  • CSS网页布局ID和Class类的命名介绍
  • 网页设计命名规范

    千次阅读 2017-06-06 23:14:09
    网页设计命名规范
    网页设计命名规范

    一.网站设计及基本框架结构:


    网页设计命名规范
    1.   Container
    “container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.
    2.   Header
    “header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
    3.   Navbar
    “navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
    4.   Menu
    “Menu”区域包含一般的链接和菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”.
    5.   Main
    “Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
    6.   Sidebar
    “Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
    7.   Footer

    “Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.


    二.需要注意的几点:
    1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
    如:red/left/big等。
    2.组合命名规则:
    [元素类型]-[元素作用/内容]
    如:搜索按钮: btn-search
    登录表单:form-login
    新闻列表:list-news
    3.涉及到交互行为的元素命名:
    凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
    鼠标悬停::hover   点击:click   已浏览:visited

    如:搜索按钮: btn-search、btn-search-hover、btn-search-visited


    三.Photoshop图层结构规范:
    Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。
    图层命名结构
     
    四.常用命名汇总:
    站点:site
    首页:homepage
    当前位置:currentPath
    二级页面/子页面:subpage
    布局:layout
    搜索:search
    网页头部:head/header
    登录条:loginbar
    标志:logo
    侧栏:side/sidebar
    广告条:banner
    导航:nav
    主 导 航:mainNav
    顶 导 航:topNav
    子导航:subNav
    当前位置导航:crumb
    菜单:menu
    子菜单:subMenu
    菜单内容:menuContent
    子菜单内容:subMenuContent
    下拉:drop
    下拉菜单:dropMenu
    工具条:tool/toolbar
    表单:form
    栏目:column
    箭头:arr/arrow
    搜索:search
    搜索按钮:btn-search
    滚动条:scroll
    主题/外观:theme
    页面主体:main
    页面中部:mainBody
    内容:content
    标签页:tab
    文章列表:list
    标签内容:tagContent
    当前标签:tagCurrent/currentTag
    提示信息:msg
    转角/圆角:cor/corner
    特别的:spec
    资源:source
    加入:joinus
    小技巧:tips
    栏目标题:title
    链接:links
    页脚:footer
    服务:service
    指南:guild
    热点:hot
    新闻:news
    下载:download
    注册:regsiter
    状态:status
    按钮:btn
    注 释:note
    投票:vote
    合作伙伴:partner
    友情链接:friendlink
    关于我们:aboutus
    提交:submit
    搜索框:searchbox
    文本框:textbox
    网页底部:foot/footer
    版权:copyright
    网站地图: sitemap
    列 定 义:column_1of3 (三列中的第一列)
    column_2of3 (三列中的第二列)
    column_3of3 (三列中的第三列)

    分类命名
    id的命名:
    (1)页面结构
      容器: container  页头:header  内容:content/container
      页面主体:main  页尾:footer  导航:nav
      侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
      左右中:left right center
    (2)导航
      导航:nav  主导航:mainbav  子导航:subnav
      顶导航:topnav  边导航:sidebar  左导航:leftsidebar
      右导航:rightsidebar  菜单:menu  子菜单:submenu
      标题: title  摘要: summary
    (3)功能
      标志:logo  广告:banner  登陆:login  登录条:loginbar
      注册:regsiter  搜索:search  功能区:shop
      标题:title  加入:joinus  状态:status  按钮:btn
      滚动:scroll  标签页:tab  文章列表:list  提示信息:msg
      当前的: current  小技巧:tips  图标: icon  注释:note
      指南:guild 服务:service  热点:hot  新闻:news
      下载:download  投票:vote  合作伙伴:partner
      友情链接:link  版权:copyright
     
    class的命名:
    (1)颜色:使用颜色的名称或者16进制代码,如
      .red { color: red; }
      .f60 { color: #f60; }
      .ff8600 { color: #ff8600; }
    (2)字体大小,直接使用’font+字体大小’作为名称,如
      .font12px { font-size: 12px; }
      .font9pt {font-size: 9pt; }
    (3)对齐样式,使用对齐目标的英文名称,如
      .left { float:left; }
      .bottom { float:bottom; }
    (4)标题栏样式,使用’类别+功能’的方式命名,如
      .barnews { }
      .barproduct { }
    注意事项:
      1.一律小写;
      2.尽量用英文;
      3.不加中杠和下划线;
      4.尽量不缩写,除非一看就明白的单词.
      主要的 master.css  模块 module.css  基本共用 base.css
      布局,版面 layout.css  主题 themes.css  专栏 columns.css
      文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css
           统计:count


    以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav   规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
    一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
    f-blue:表示蓝色字体样式
    f-blod:表示粗体字体样式
    对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
    n-title:新闻标题
    n-list:新闻列表
     
     
    五、CSS文件及样式命名
    1、CSS文件命名规范
    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;
    2、CSS样式命名规范
    本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:
    头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
    下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了。)
    展开全文
  • 头:header ...页面外围控制整体布局宽度:wrapper 或 wrap 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子

    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper 或 wrap
    左右中:left right center
    登录条:loginbar
    标志:logo
    广告:banner
    页面主体:main
    热点:hot
    新闻:news
    下载:download
    子导航:subnav
    菜单:menu
    子菜单:submenu
    搜索:search
    友情链接:friendlink
    页脚:footer
    版权:copyright
    滚动:scroll
    内容:content
    标签页:tab
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    加入:joinus
    指南:guild
    服务:service
    注册:regsiter
    状态:status
    投票:vote
    合作伙伴:partner
    注释的写法:
    /* Footer */
    内容区
    /* End Footer */
    id的命名:
    1.页面结构
    容器: container
    页头:header
    内容:content/container
    页面主体:main
    页尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    左右中:left right center
    2. 导航
    导航:nav
    主导航:mainnav
    子导航:subnav
    顶导航:topnav
    边导航:sidebar
    左导航:leftsidebar
    右导航:rightsidebar
    菜单:menu
    子菜单:submenu
    标题: title
    摘要: summary
    3. 功能
    标志:logo
    广告:banner
    登陆:login
    登录条:loginbar
    注册:regsiter
    搜索:search
    功能区:shop
    标题:title
    加入:joinus
    状态:status
    按钮:btn
    滚动:scroll
    标签页:tab
    文章列表:list
    提示信息:msg
    当前的: current
    小技巧:tips
    图标: icon
    注释:note
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    投票:vote
    合作伙伴:partner
    友情链接:link
    版权:copyright

    转自http://www.w3cfuns.com/blog-5471376-5407363.html

    展开全文
  • WEB设计者最好选择合适的、有意义的元素去描述你的内容,确保您所选择的是富有语义的class和id特征值,如果你已经这样做了应该体会到了这一方法的优越性。尤其是在团队合作时,对团队其他成员来说有意义的内容描述,...

    做SEO的应该都知道,搜索引擎对富有语义化的、结构清晰的DIV+CSS布局是比较青睐的,W3C规范也正是基于“内容与表现分离”这一理念制定的。WEB设计者最好选择合适的、有意义的元素去描述你的内容,确保您所选择的是富有语义的class和id特征值,如果你已经这样做了应该体会到了这一方法的优越性。尤其是在团队合作时,对团队其他成员来说有意义的内容描述,能让其更容易看懂你的WEB内容,这一点尤为重要。郑州SEO总结了以下这些命名规则以作大家参考。

    (1)页面结构
      容器: container
      页头:header
      外套:wrap/wrapper
      页面主体:main
      内容:content/container
      页脚:footer
      导航:nav
      侧栏:sidebar
      栏目:column
      左中右:left center right
    (2)导航
      导航:nav
      主导航:mainbav
      子导航:subnav
      顶导航:topnav
      边导航:sidebar
      左导航:leftsidebar
      右导航:rightsidebar
      面包屑:breadCrumb
      菜单:menu
      子菜单:submenu
      标题: title
      摘要: summary
    (3)功能
      标志:logo
      广告:ad
      广告条:banner
      登陆:login
      登录条:loginbar
      注册:regsiter
      搜索:search
      功能区:shop
      标题:title
      加入:joinus
      状态:status
      按钮:btn
      滚动:scroll
      标签页:tab
      文章列表:list
      提示信息:msg
      当前的: current
      小技巧:tips
      图标: icon
      注释:note
      指南:guild
      服务:service
      热点:hot
      新闻:news
      下载:download
      投票:vote
      合作伙伴:partner
      友情链接:link
      版权:copyright

    展开全文
  • 网页模块命名规范

    千次阅读 2019-08-23 17:15:44
    通常网页模块的命名规范需要遵循以下三个原则: 命名避免使用中文字符(如id=“内容”); 命名不能以数字开头(如id=“1header”); 命名不能使用关键字(如id=“div”); 命名应尽量用最少的字母表达含义,使...

    通常网页模块的命名规范需要遵循以下三个原则:

    • 命名避免使用中文字符(如id=“内容”);
    • 命名不能以数字开头(如id=“1header”);
    • 命名不能使用关键字(如id=“div”);

     命名应尽量用最少的字母表达含义,使之简明、易懂。

    在网页开发中,常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。

    驼峰式命名:除第一个单词外后面的单词首字母都要大写,其余小写,如navOne。

    帕斯卡命名:每个单词之间用“_”连接,如nav_one。

     

    下面列举网页中常用的一些命名。

    常用命名
    模块命名模块命名
    头部header标签页tab
    内容content/container文章列表list
    尾部footer提示信息msg
    导航nav小技巧tips
    子导航subnav栏目标题title
    侧栏sidebar加入joinus
    栏目column指南guild
    左右中left right center服务service
    登录条loginbar注册register
    标志logo状态status
    广告banner投票vote
    页面主体main合作伙伴partner
    热点hotCSS文件命名
    新闻news主要的master.css
    下载download模块module.css
    菜单menu基本共用base.css
    子菜单submenu布局,版面layout.css
    搜索search主题themes.css
    友情链接frIEndlink专栏columns.css
    页眉header文字font.css
    页脚footer表单forms.css
    版权copyright补丁mend.css
    滚动scroll打印print.css

     

    展开全文
  • jb51.net的CSS教程栏目中汇集了大量的CSS知识,这些知识...常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu标 志:
  • HTML,CSS的class与id命名规则

    万次阅读 多人点赞 2019-07-14 12:02:44
    外套 wrap - - 用于最外层 头部 header - - 用于...左侧 main-left - - 左侧布局 右侧 main-right - - 右侧布局 导航条 nav - - 网页菜单导航条 内容 content - - 用于网页中部主体 底部 footer - - 用于底部 ...
  • 在 Android Studio ...若要使用设计时属性,请首先确保您有在您的布局中定义工具命名空间: 这个工具命名空间是Android的工具专门公认的命名空间,所以你定义在视图元素上的所有的tool-namespace的属性,在应用程序
  • 抗击疫情致敬逆行者感人类题材网页设计作品采用DIV CSS布局制作,共8个页面:网站首页、感动人物、动人瞬间、感人视频、感动图集、感动新闻页面3个。页面整体宽度为1200像素,使用CSS设置了网页背景颜色,制作了导航...
  • 关于Html class id 命名规范

    千次阅读 2018-11-15 09:27:54
    CSS命名规则  头:header  内容:content/containe  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center  登录条:loginbar ...
  • 其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: DIV:主要用于页面内容逻辑上的分块,比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。...
  • 前端规范-布局和模块命名

    千次阅读 2014-09-25 07:27:52
    所有页面公用头部和尾部,这两部分拿出来公用,分别用#h和#f命名,主体部分每个页面都不同用#b命名。.w代表公用的宽度,如果是1280的就定义.w{width:1280px;margin:0 auto;}这样全部的都能居中。 2.
  • 网页命名规则

    万次阅读 2012-09-11 09:41:28
    CSS命名规则  头:header  内容:content/containe  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center  登录条:loginbar ...
  • 网页布局模板——直接使用

    千次阅读 多人点赞 2020-07-08 15:32:05
    1.命名 1.头部区域——header 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo。 2.菜单导航栏——topnav 菜单导航条包含了一些链接,可以引导用户浏览其他页面。 3.内容区域 column——专栏 ...
  • xml的变量命名布局

    千次阅读 2012-04-19 16:31:28
    先说变量名命名,也就是xml中的@+id/xxx的命名。 android中各个layout中的命名可以重复。其实仔细想想,如果不可以重复的话,命名空间就会比较混乱。findViewById()也是View干的,所以通过id来找View,只能通过这个...
  • CSS网页制作布局实例教程

    千次阅读 2008-12-20 13:25:00
    本教程最终效果如下(浏览示例页面):本教程素材及页面源代码下载教程的每个部分都有其侧重点,其中前三节都是关于素材制作与设计的,要求有一定的Photoshop操作基础,我想这也是网页设计必备的基础技能之一。...
  • web前端id/class命名规范

    千次阅读 2020-06-10 11:52:04
    前端命名规范1、页面结构的命名id/class)2、导航的命名id/class)3、功能命名id/class) 1、页面结构的命名id/class) 容器: container 页头:header 内容:content/container 页面主体:main 页尾:...
  • 网页设计

    千次阅读 2013-06-24 18:51:00
    简介 建站目标 Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,...网站制作设计和域名注册查询是根据它设定的目标在一个商业网站的情况下,网页设计的定义是根据它设定的目标:企业网...
  • 1、ID(Industry Design)工业设计 包含外观、材质、手感、颜色配搭,主要界面的实现与及色彩等方面的设计。 2、MD(Mechanical Design)结构设计 以手机为例: 前壳、后壳、手机的摄像镜头位置的选择、固定的方式、...
  • 11.1.1 登录页前台页面布局设计;6然后在第3个标签内部插入4-6三对标签分别设置4-6标签的id值为id=tpid=twid=text;8在第三对DIV标签结束标志的后面再插入第7对DIV标签并命名id=line然后在第7对DIV标签的后面再插入第8...
  • 谷歌浏览器怎么查看网页布局

    千次阅读 2014-11-30 16:36:18
    DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式。 一、直接观察div标签被设置什么样式 - TOP 比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置...
  • DIV+CSS网页布局实例

    千次阅读 2007-07-27 11:59:00
    网页制作中,有许多的术语,例如:CSS、...下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要
  • 使用各种 HTML 标记CSS 各种常用样式及简单的 JavaScript 技术完成的网页没有错误 首页设置导航栏命名为 index.html <3>利用 CSS技术对网站进行布局网站风格统一 灵活运用 JavaScript使网页生动 一 设计思路 ...
  • CSS 类和ID的常用命名

    千次阅读 2017-06-01 09:42:01
    CSS 类和ID的常用命名:   名称+盒子类型(img title nav logo)+盒子标签名称(Container  content box ) in代表进入 页头部分 header 页面主体main 页脚部分 footer  盒子第一层容器 container ...
  • 其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件。 一:Android用户界面布局管理 Android系统按照MVC(模型(model)-视图(view)-控制器(controller))设计模式将...
  • div+CSS ID命名规范和习惯

    千次阅读 2016-07-15 13:13:13
    大家都知道规范的css命名可以增强...根据自己的而写法习惯和网上的一些写法,我总结了一套适用自己的id命名写法.拿出来晒一晒。 CSS 类和ID的常用命名: 网站头部: head/header(头部) top(顶部)导航: nanv
  • 网页布局五之json方式的页面链接

    千次阅读 2014-03-13 19:38:58
    当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据 看看这个从服务器返回的数据 [{ " id ": 1 , " text ": "Node 1" ...
  • 五、布局页面——头部和导航  有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,395
精华内容 26,558
关键字:

网页设计布局id命名