2021前端最新DIV+CSS规范命名大全集合

简介: 2021前端最新DIV+CSS规范命名大全集合

image.png

一、命名规则说明: - TOP

  • 所有的命名最好都小写
  • 属性的值一定要用双引号("")括起来,且一定要有值如class=“divcss5”,id=“divcss5”
  • 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
  • 空元素要有结束的tag或于开始的tag后加上"/"
  • 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  • <h1><h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  • 给每一个表格和表单加上一个唯一的、结构标记id
  • 给图片加上alt标签
  • 尽量使用英文命名原则
  • 尽量不缩写,除非一看就明白的单词

DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。

二、相对网页外层重要部分CSS样式命名: - TOP

外套 wrap ------------------用于最外层

头部 header /top----------------用于头部

主要内容 main/content ------------用于主体内容(中部)

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

三、DIV+CSS命名参考表: - TOP

以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合:

image.png

image.png

image.png

image.png

image.png

image.png

image.png

CSS命名其它说明:

image.png

DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。

CSS样式文件命名如下

主要的 master.css

布局,版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

目录
相关文章
|
9天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
19 4
|
28天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
132 1
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
50 2
|
1月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
16 0
|
1月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
17 0
|
1月前
|
Web App开发 存储 前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)2
【前端基础篇】CSS基础速通万字介绍(下篇)
18 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0
|
28天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章