快切——响应css框架之布局结构命名

2019独角兽企业重金招聘Python工程师标准>>>

　头：header

　　内容：content/container

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：col

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

　　左右中：left right center

　　登录条：loginNar

　　标志：logo

　　广告：banner

　　页面主体：main

　　热点：hot

　　新闻：news

　　下载：download

　　子导航：subNav

　　菜单：menu

　　子菜单：subMenu

　　搜索：search

　　友情链接：friendLink

　　页脚：footer

　　版权：copyright

　　滚动：scroll

　　内容：content

　　标签页：tab

　　文章列表：list

　　提示信息：msg

　　小技巧：tips

　　栏目标题：title

　　加入：joinus

　　指南：guild

　　服务：service

　　状态：status

　　投票：vote

　　合作伙伴：partner

　　(二)注释的写法:
　　/* Footer */

　　内容区

　　/* End Footer */

　　(三)id的命名:
　　(1)页面结构
　　容器: container

　　页头：header

　　内容：content/container

　　页面主体：main

　　页尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：col

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

　　左右中：left right center

　　(2)导航
　　导航：nav

　　主导航：mainNav

　　子导航：subNav

　　顶导航：topNav

　　边导航：sidebar

　　左导航：leftSidebar

　　右导航：rightSidebar

　　菜单：menu

　　子菜单：subMenu

　　标题: title

　　摘要: summary

　　(3)功能
　　标志：logo

　　广告：banner

　　登陆：login

　　登录条：loginBar

　　搜索：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)标题栏样式,使用"类别+功能"的方式命名,如
　　.barNews { }

　　.barProduct { }

　　(2)模块结构css定议
　　模块标题 .module

　　模块标题 .moduleHead

　　模块包装 .moduleWrap

　　模块内容 .moduleContent

　　注意事项:

　　1.一律小写;

　　2.尽量用英文;

　　3.不加中杠和下划线;

　　4.尽量不缩写，除非一看就明白的单词.

　　主要的 master.css

　　模块 module.css

　　基本共用 base.css

　　布局，版面 layout.css

　　主题&nbs

来源 kuai.qietu.com

转载于:https://my.oschina.net/cloveflower/blog/108602

快切——响应css框架之布局结构命名相关推荐

发现2017年最好的CSS框架
如今,无数的框架出现在定期而少数人喜欢自助,Foundation和angular.js主宰了整个世界的发展. CSS代表用于描述HTML(或XML)文档表示的样式表语言.一个框架被定义为一个包,它由一 ...
2020年面向前端开发人员的10个最佳CSS框架
" NASA已将机器人降落在火星上,并且一些开发人员仍在他们网站中div的中心对齐方面苦苦挣扎." 这个笑话包含很多真相.对于UI / UX设计人员来说,要制作一个在每个浏览器上看 ...
10个前端开发人员必须知道的CSS框架
对于UI / UX设计人员而言,要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事.在创建网站布局并使其美观时,开发人员必须考虑所有Web浏览器和移动视图. 恐惧始终存在于内部,如果设计在 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略
所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直在不断地推陈出新.其中网格布局( ...
美工效果图大小 html,六、DIV CSS实战之布局美工图分析与切图
DIV CSS实战之布局分析与切图美工图到DIV CSS制作成HTML中间必不可少的步骤为对美工图的分析和美工图的切图.平时大家说切图也是从这个步骤捡取的一个词语来代表css完整制作的代名词,就像d ...
15 个优秀的响应式 CSS 框架
官网:http://foundation.zurb.com/ [](()5. Material Design for Bootstrap (MDB) MDB 建立在 Bootstrap 之上,并提供了 ...
php前端响应式框架,响应式css前端框架有哪些
响应式css前端框架有:1.Semantic UI Framework:2.Less Framework:3.Foundation Framework:4.UIkit Framework:5.YUI ...
【简报】kube框架结构-一个小型响应式CSS框架
为什么80%的码农都做不了架构师?>>> 日期:2012-9-28 来源:GBin1.com 当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是 ...
html响应式布局 ace,.NET Core基于Ace Admin的响应式框架
原标题:.NET Core基于Ace Admin的响应式框架转自:netnr cnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace A ...

快切——响应css框架之布局结构命名

快切——响应css框架之布局结构命名相关推荐

最新文章

热门文章