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 论坛

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css