css 命名规则

一个有规则的命名 会提高代码的可读性

一、命名规则说明:

1)、所有的命名最好都小写

2)、属性的值一定要用双引号("")括起来

3)、给图片加上alt标签

4)、尽量使用英文命名原则

5)、尽量不缩写,除非一看就明白的单词

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

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

头部 header ----------------用于头部

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

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

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

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

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

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

三、 常用的样式命名

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

#container 或 #content 容器,用于最外层

#layout 布局

#head 或 #header 页头部分

#foot 或 #footer 页脚部分

#nav 主导航

#subnav 二级导航

#menu 菜单

#submenu 子菜单

#sideBar 侧栏

#sidebar_a 或 #sidebar_b 左边栏或右边栏

#main 页面主体

#tag 标签

#msg 或 #message 提示信息

#tips 小技巧

#vote 投票

#friendlink 友情连接

#title 标题

#summary 摘要

#loginbar 登录条

#searchInput 搜索输入框

#hot 热门热点

#search 搜索

#search_output 搜索输出和搜索结果相似

#searchBar 搜索条

#search_results 搜索结果

#copyright 版权信息

#branding 商标

#logo 网站LOGO标志

#siteinfo 网站信息

#siteinfoLegal 法律声明

#siteinfoCredits 信誉

#joinus 加入我们

#partner 合作伙伴

#service 服务

#regsiter 注册

#arr 或 #arrowr 箭头

#guild 指南

#sitemap 网站地图

#list 列表

#homepage 首页

#subpage 二级页面子页面

#tool 或 #toolbar 工具条

#drop 下拉

#dorpmenu 下拉菜单

#status 状态

#scroll 滚动

.tab 标签页

.left 居左

.right 居右

.center 居中

.news 新闻

.download 下载

.banner 广告条(顶部广告条)

.products 产品

.products-prices 产品价格

.products-description 产品描述

.products-review 产品评论

.editor_review 编辑评论

.news_release 最新产品

.publisher 生产商

.screenshot 缩略图

.faqs 常见问题

.keyword 关键词

.blog 博客

.forum 论坛

相关推荐
祝余呀6 分钟前
HTML初学者第三天
前端·html
就爱瞎逛22 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81625 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者40 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app