搜索
首页web前端html教程div+css命名规则_html/css_WEB-ITnose

div+css命名规则

2009-04-15 11:48

常用代码结构:

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)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。
    什么是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命名规则:

    头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar

    栏目:column  页面外围控制整体布局宽度:wrapper  左右中: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  主导航: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

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    HTML的多功能性:应用和用例HTML的多功能性:应用和用例Apr 30, 2025 am 12:03 AM

    HTML不仅是网页的骨架,更广泛应用于多种领域:1.在网页开发中,HTML定义页面结构并结合CSS和JavaScript实现丰富界面。2.在移动应用开发中,HTML5支持离线存储和地理定位等功能。3.在电子邮件和新闻通讯中,HTML提升邮件的格式和多媒体效果。4.在游戏开发中,HTML5的CanvasAPI用于创建2D和3D游戏。

    HTML文档中的根标签是什么?HTML文档中的根标签是什么?Apr 29, 2025 am 12:10 AM

    theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,确保properdocumentstrumentstrumentsureandbrowserparserparsing。

    HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

    文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

    < head>的意义是什么。 &<身体>在html中标记?< head>的意义是什么。 &<身体>在html中标记?Apr 28, 2025 pm 05:43 PM

    本文讨论了Lt; Head> &<身体> HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

    < strong>,lt; b>有什么区别标签和lt; em>,< i>标签?< strong>,lt; b>有什么区别标签和lt; em>,< i>标签?Apr 28, 2025 pm 05:42 PM

    本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

    请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

    文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

    HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

    本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

    HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

    本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    EditPlus 中文破解版

    EditPlus 中文破解版

    体积小,语法高亮,不支持代码提示功能

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    安全考试浏览器

    安全考试浏览器

    Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    将Eclipse与SAP NetWeaver应用服务器集成。