精华内容
下载资源
问答
  • 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

    展开全文
  • 头: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

    展开全文
  • 其中XHTML主要用来表示网页结构和显示内容,而CSS则是定义结构布局和修饰内容样式。 常用于布局的XHTML一般有: DIV:主要用于页面内容逻辑上的分块,比如一张网页一般包括头部、导航、侧栏、内容和版权等责任分区。...
  • 11.1.1 登录页前台页面布局设计;6然后在第3个标签内部插入4-6三对标签分别设置4-6标签的id值为id=tpid=twid=text;8在第三对DIV标签结束标志的后面再插入第7对DIV标签并命名id=line然后在第7对DIV标签的后面再插入第8...
  • 常用类/ID命名规范 页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu标 志:logo标 语:banner标 题:title侧边栏:sidebar图 ...
  • 一.文件命名规范 全局样式:global.css;...常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright  导 航:menu 主导航:mai...
    一.文件命名规范

    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;

    二.常用类/ID命名规范

    页 眉:header
    内 容:content
    容 器:container
    页 脚:footer
    版 权:copyright 
    导 航:menu
    主导航:mainMenu
    子导航:subMenu
    标 志:logo
    标 语:banner
    标 题:title
    侧边栏:sidebar
    图 标:Icon
    注 释:note
    搜 索:search
    按 钮:btn
    登 录:login
    链 接:link
    信息框:manage
    ……

    常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……
    展开全文
  • div+css命名参考

    千次阅读 2006-11-20 14:15:00
    原文:http://www.jluvip.com/blog/article.asp?id=40div+css命名参考 用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作...

    原文:http://www.jluvip.com/blog/article.asp?id=40

    div+css命名参考 

    用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还是有个标准比较好啊!
    在网上看到的一个相关的参考,再加上平时也研究别人的代码,发现这样的命名使用很广泛!我再加上自己的经验,希望对看到这篇文章的人能有用!

    命名参考

    常用的CSS命名规则:

    头:header
    内容:content/container
    尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    左右中:left right center

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

    常用代码结构:

    div:主要用于布局,分割页面的结构
    ul/ol:用于无序/有序列表
    span:没有特殊的意义,可以用作排版的辅助,

    例如

    <li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

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

    h1-h6:标题
    h1-h6 根据重要性依次递减
    h1位最重要的标题

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

    例如:

    <label for="user-password">密 码</label>
    <input type="password" name="password" id="user-password" />

    fieldset & legend:fildset套在表单外,legend用于描述表单内容。

    例如:<form>
    <fieldset>
    <legend>title</legend>
    <label for="user-password">密 码</label>
    <input type="password" name="password" id="user-password" />
    </fieldset>
    </form>


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

    例如<dl>
    <dt>什么是CSS?</dt>
    <dd>CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。<dd>
    <dt>什么是XHTML?</dt>
    <dd>XHTML是一个基于XML的置标语言,看起来与HTML有些想像,只有一些小的但重要的区别。可以这样看,XHTML就是一个扮演着类似HTML的角色的XML。 本质上说,XHTML是一个桥接(过渡)技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。</dd>
    </dl>

    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}

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

    另外又整理一些文档。真有需要的朋友可以留下邮件

    web标准指南.doc

    css命名参考.doc

    web规范.doc

    展开全文
  • CSS网站布局实录 (第二版)PDF版

    热门讨论 2012-12-10 18:46:01
    《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要: 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...
  • ASP.NET的网页代码模型及生命周期

    热门讨论 2009-07-28 14:22:11
    第4章 ASP.NET的网页代码模型及生命周期 从本章开始,就进入了ASP.NET应用程序开发的世界。在了解了C#的结构,以及面向对象的概念后,就可以从面向对象的思想开发ASP.NET应用程序。在ASP.NET中,能够使用面向对象的...
  • 2.1.3 设计网页 21 2.2 visual studioide 26 2.2.1 解决方案资源管理器 28 2.2.2 文档窗口 29 2.2.3 工具箱 29 2.2.4 错误列表和任务列表 30 2.2.5 服务器资源管理器 31 2.3 代码编辑器 32 2.3.1 ...
  • 2.1.3 设计网页 2.2 Visual StudioIDE 2.2.1 解决方案资源管理器 2.2.2 文档窗口 2.2.3 工具箱 2.2.4 错误列表和任务列表 2.2.5 服务器资源管理器 2.3 代码编辑器 2.3.1 添加程序集引用 2.3.2 ...
  • 标签的id属性是自由命名的,如果id的名称与网页架构无关,这就会造成别人很难去判断你写的网页的架构了,而过多的&lt;div&gt;会让代码看起来很凌乱、不易阅读。 而HTML5新的结构标签带来了网页布局的改变,...
  • HTML开发王

    2013-01-03 11:33:09
    16.1 使用表格进行网页设计布局的方法 16.1.1 了解布局模块 16.1.2 表格布局的方法 16.2 在dreamweaver中使用表格 16.2.1 在“布局”模式下使用表格进行网页布局 16.2.2 在“布局”模式下修改网页布局 16.2.3 设置...
  • [HTML开发王].张亚飞.扫描版

    热门讨论 2011-09-13 12:45:04
    16.1 使用表格进行网页设计布局的方法 16.1.1 了解布局模块 16.1.2 表格布局的方法 16.2 在dreamweaver中使用表格 16.2.1 在“布局”模式下使用表格进行网页布局 16.2.2 在“布局”模式下修改网页布局 16.2.3 设置...
  • table2.htm 用表格布局网页示例(Dreamweaver)。 table3.htm 完整的数据表格示例。 table4.htm 表格整体设置示例。 table_bg.htm 表格整体设置示例。 table_border.htm ...
  • asp.net知识库

    2015-06-18 08:45:45
    新控件、管理外观、布局及其它用户体验 ASP.NET 2.0 缓存技术 (原创) asp.net 2.0中的theme主题覆盖问题 asp.net 2.0中利用app_offline.htm功能 .NET 2.0中的字符串比较 小试ASP.NET 2.0的兼容性 为 asp.net 2.0 ...
  • http://fian.my.id/Waves animate.css http://daneden.github.io/animate.css 全局CSS的终结(狗带 [译] http://www.alloyteam.com/2015/10/8536 Angularjs 地址 Angular.js 的一些学习资源 ...
  • <div><p>这是很久很久之前想写的东西,拖了五六个月,没有动笔,现今补齐,内容有些多,对初学者有用,错误之处,望指出。 理解作用域 理解作用域链是Js编程中一个必须要...

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

网页设计布局id命名