仲灏小栈 仲灏小栈
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

仲灏

诚意, 正心, 格物, 致知
首页
大前端
后端&运维
其他技术
生活
关于我
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《前端项目基础建设》
  • HTML&CSS

    • Scss语言学习实用心得
    • H5 标签使用场景
    • css常用命名单词
    • 项目基础建设 css与处理器scss
    • 项目基础建设 CSS公共样式
    • iframe
    • css 变量使用
    • css常见但不常用的属性
    • 躺着旋转动画
    • 边框渐变(圆形)
    • float 布局
    • 在 Javascript 和 Sass(或 CSS!)之间共享变量的方法
    • 看不见的html标签
    • 手写css预处理器
    • grid vs flex布局
  • JavaScript&TypeScript

  • Node

  • 构建

  • Vue

  • React

  • 小程序

  • 跨端

  • Electron

  • WebGL&GIS

  • 浏览器

  • 面经

  • 其他

  • 大前端
  • HTML&CSS
仲灏
2022-01-13

css常用命名单词

文本命名规范

index.css: 一般用于首页建立样式

head.css: 头部样式,当多个页面头部设计风格相同时使用。

base.css: 共用样式。

style.css:独立页面所使用的样式文件。

global.css:页面样式基础,全局公用样式,页面中必须包含。

layout.css:布局、版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中

module.css:模块,用于产品类页,也可与其它样式配合使用。

master.css:主要的样式表

columns.css:专栏样式

themes.css:主体样式

forms.css:表单样式

mend.css:补丁,基于以上样式进行的私有化修补。

页面结构命名:

page:代表整个页面,用于最外层。

wrap:外套,将所有元素包在一起的一个外围包,用于最外层

wrapper:页面外围控制整体布局宽度,用于最外层

container:一个整体容器,用于最外层

head,header:页头区域,用于头部

nav: 导航条

content:内容,网站中最重要的内容区域,用于网页中部主体

main:网站中的主要区域(表示最重要的一块位置),用于中部主体内容

column:栏目

sidebar:侧栏

foot,footer:页尾、页脚。网站一些附加信息放置区域,(或命名为 copyright)用于底部

导航命名:

nav, navbar, navigation, nav-wrapper:导航条或导航包,代表横向导航

topnav:顶部导航

mainbav:主导航

subnav:子导航

sidebar:边导航

leftsidebar 或 sidebar_a:左导航

rightsidebar 或 sidebar_b:右导航

title:标题

summary:摘要

menu:菜单,区域包含一般的链接和菜单

submenu:子菜单

drop:下拉

dorpmenu:下拉菜单

links:链接菜单

功能命名:

logo:标记网站logo标志

banner:标语、广告条、顶部广告条

login:登陆,(例如登录表单:form-login)

loginbar:登录条

register:注册

tool, toolbar:工具条

search:搜索

searchbar:搜索条

searchlnput:搜索输入框

shop:功能区,表示现在的

icon:小图标

label:商标

homepage:首页

subpage:二级页面子页面

hot:热门热点

list:文章列表,(例如:新闻列表:list-news)

scroll:滚动

tab:标签

sitemap:网站地图

msg 或 message:提示信息

current:当前的

joinus:加入

status:状态

btn:按钮,(例如:搜索按钮可写成:btn-search)

tips:小技巧

note:注释

guild:指南

arr, arrow:标记箭头

service:服务

breadcrumb:(即页面所处位置导航提示)

download:下载

vote:投票

siteinfo:网站信息

partner:合作伙伴

link, friendlink:友情链接

copyright:版权信息

siteinfoCredits:信誉

siteinfoLegal:法律信息

上次更新: 2022/06/05, 20:31:36
H5 标签使用场景
项目基础建设 css与处理器scss

← H5 标签使用场景 项目基础建设 css与处理器scss→

最近更新
01
vim日常使用记录
04-02
02
滑动窗口最大值
04-02
03
有效的字母异位词
04-02
更多文章>
Theme by Vdoing | Copyright © 2021-2025 izhaong | github | 蜀ICP备2021031194号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式