常用的css命名规则

这篇具有很好参考价值的文章主要介绍了常用的css命名规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、命名规则说明:
1)、所有的命名最好都小写
2)、属性的值一定要用双引号(“”)括起来
3)、给图片加上alt标签
4)、尽量使用英文命名原则
5)、尽量不缩写,除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名:
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

三、DIV+CSS命名参考表:文章来源地址https://www.toymoban.com/news/detail-697367.html

CSS样式命名 说明
#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 论坛

到了这里,关于常用的css命名规则的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2.css公共样式、LOGO SEO优化、常用模块和注册页类名命名、tab栏布局原理、Web服务器

    favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持favicon.ico图标。 favicon图标的制作分为3步: 1.制作favicon图标 2.favicon图标放到网站根目录下 3.HTML页面引入favicon图标 1.制作favicon图标 (1)把品优购图标切成png图片 (2)把png图片

    2024年02月16日
    浏览(54)
  • 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验

    目录 前言 一、正则是什么? 二、造轮子 三、轮子使用实例 总结 例如:随着前端的发展,很多功能都需要在前端填写时就先校验是否填写正确,则博主写了一些校验轮子供大家使用。 正则表达式(regular expression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有

    2024年02月09日
    浏览(43)
  • 前端常用js、css效果

    效果 主要整理了几个常用的,方便平时做项目的时候参考 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下滚动 樱花飘落效果 参考代码 文本横向滚动 文本无限滚动 无缝轮播 无缝滚动 盒子上下移动 樱花飘落 添加插件sakura.js就可以了,不用什么代码

    2024年02月02日
    浏览(41)
  • 【前端技巧】CSS常用知识碎片(四)

    CSS常用知识碎片(四) shape-margin属性:控制文字环绕图形时文字与元素边界的距离。 使用CSS Shapes布局实现圆形内排版效果示意

    2024年02月15日
    浏览(57)
  • 【前端技巧】CSS常用知识碎片(八)

    CSS常用知识碎片(八) background-blend-mode 属性用于混合元素背景图案、渐变和颜色; mix-blend-mode 属性用于元素与元素之间的混合; isolation 属性用在祖先元素上,限制 mix-blend-mode 属性设置的混合模式的应用范围。 mix-blend-mode:multiply 值multiply的混合效果是正片叠底,最终效果表

    2024年02月15日
    浏览(35)
  • 『 前端三剑客 』:CSS常用属性

    一 . CSS常用元素属性 1.1 字体家族和 字体大小 设置的字体需要是 windows 上自带的字体 , 要求是系统中已经安装了的字体 使用 css 设置字体为微软雅黑 和 宋体 , 字体大小为 30 px 和 40 px font - size 设置的是字体的字符框的高度的大小 . 设置效果如下所示 1.2 设置字体粗细 font-we

    2024年02月15日
    浏览(46)
  • 【前端技巧】CSS常用技巧碎片(一)

    CSS常用技巧碎片(一) 尺寸体系:内在尺寸:fit-content、min-content、max-content,尺寸表现和内容有关;外在尺寸:stretch、available、fill-available,尺寸表现和上下文有关。 可以用 inset: 0; 实现 left: 0; top: 0; right: 0; bottom: 0; 的效果。 渐变边框实现圆角效果可以用 clip-path: inset(0 ro

    2024年02月13日
    浏览(52)
  • 【前端技巧】CSS常用技巧碎片(二)

    CSS常用知识碎片(二) 常规渐变和CSS渐变角度方位关系对比表 角度 常规渐变 CSS渐变 0度 向右 向上 正角度 逆时针 顺时针 关于渐变断点,如 linear-gradient(30deg, red 50%, skyblue 50%); ,不同颜色位于同一断点位置时,两个颜色连接处可能会有明显的锯齿。可以在颜色连接处留1px的

    2024年02月12日
    浏览(61)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(58)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包