css选择的样式（三）：常用的css样式命名

最新推荐文章于 2024-06-26 15:47:19 发布
最新推荐文章于 2024-06-26 15:47:19 发布
阅读量166 收藏
点赞数
分类专栏： web前端开发 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42012782/article/details/116332243
版权

常用的CSS样式命名

1）页面结构 

页头：header  页面主体：main页尾：footer 内容：content/container

容器: container   导航：nav侧栏：sidebar栏目：column

页面外围控制：wrapper左右中：left right center

2）导航

导航：nav  主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar

左导航：leftsidebar右导航：rightsidebar菜单：menu

子菜单：submenu标题: title摘要: summary

3)功能

标志：logo 广告：banner登陆：login登录条：loginbar注册：register

搜索：search功能区：shop 标题：title

 

橙子吖21
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
史上最全CSS命名规范
qq_39155611的博客
04-21 6715
CSS样式命名 说明 命名规则说明： 所有的命名最好都小写,不可以用纯数字命名，不可以用数字或“_”开头命名 属性的值一定要用双引号("")括起来，且一定要有值如class=“box”,id=“box” 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgCol...
CSS常用命名规范及写法详解
wph_1129一直为改变|技术blog:wph4u.net
10-11 862
由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTMl和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范： 一、CSS样式命名规范 建议：用字母、“_”（下划线）、“-”号、数字组成，必须以字母开头，
css常用样式命名
最新发布
CSDN_lyy93的博客
06-26 176
banner，广告，推荐，热门，最新，猜你喜欢，横幅，巨幕，轮播图，海报。
web前端基础：CSS样式命名
qq_37014633的博客
11-14 278
CSS样式命名规则 • 采用英文字母、数字以及“-”和“”命名 • 以小写字母开头，不能以数字和“-”、“”开头 • 命名形式：单字，连字符，下划线和驼峰 •使用有意义命名 常用的CSS样式命名 1）页面结构 页头：header 页面主体：main 页尾：footer 内容：content/container 容器: container 导航：nav 侧栏：sidebar 栏目：column 页面...
CSS样式命名规则
qq_38229938的博客
07-01 1563
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单...
常用css样式大全以及css属性代码大全
热门推荐
qwqc262的博客
10-09 3万+
常用css样式大全 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-va
CSS语义化命名方式及常用命名规则
12-13
根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器...
div+css样式表的id和class常用命名规则
01-19
所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下： 　首先讲一下div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar ...
CSS 样式命名规则
09-25
在CSS样式设计中，命名规则是一项至关重要的任务，它直接影响代码的可读性、可维护性和团队协作效率。本文将详细解析如何遵循有效的CSS样式命名规则。 首先，我们需要理解命名规则的基本原则。一个好的CSS类名应该...
css命名规范
u010381707的专栏
08-19 836
作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 业务类的CSS是指和具
CSS设计栏目
petterp的博客
08-22 927
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css设计栏目</title> <style type="text/css"> body{ /*页面初始化*/ background-co
前端开发中CSS常用的样式命名
请叫我二狗哥
04-02 439
CSS开发过程中class和id命名需要遵循一定的规则，令其具有可读性，提高阅读效率，一般采用驼峰命名法。 CSS常用的样式命名： （1）页面结构 页头：header 页面主体：main 页尾：footer 内容：content/container 容器：container 导航：nav 侧栏：sidebar 栏目：column 页面外围控制：wrapper 左右中：lef...
CSS样式命名规则及参考命名标准
01-24 233
(一)常用的CSS命名规则<br />头：header<br />内容：content/container<br />尾：footer<br />导航：nav<br />侧栏：sidebar<br />栏目：column<br />页面外围控制整体布局宽度：wrapper<br />左右中：left right center<br />登录条：loginbar<br />标志：logo<br />广告：banner<br />页面主体：main<br />热点：hot<br />新闻：news<br />下
014-样式文件中使用 @别名路径
李观杰的博客
05-08 1046
在vue项目中，&lt;script&gt;&lt;/script&gt;代码块中可以使用&lt;script&gt; import xxx from "@/comment/xxx.vue" &lt;/script&gt;@别名这样的路径，你是否有过想再&lt;style&gt;&lt;/style&gt;代码块中也使用这样的一个@路径别名的，其实也是可以的&lt;style&
用css实现header/footer/aside/main布局
朱登凯的专栏
08-19 5430
对于程序员来讲，布局可把人给难为坏了。他们可能会求助于像element-ui、antd之类的UI框架，也可能会求助于position: absolute;之类的大招。 本篇来谈一下如何通过flex实现最常见的那种header/ footer/ aside/ main之类的布局。 实例代码 html代码： <body> <div id="app"> <div id="header"></div> <div id="content">
整理css（二）动态效果样式
farmerXU的博客
11-23 2800
样式一：触摸，线朝两端拉长 #newslist .newstitem .newsbody .date:after { content: ''; display: block; width: 10%; height: 2px; background: #4a4a4a; position: absolute; left: 0; top: -16px; transition: all 0.6s cubic-bezier(0.215, 0.
CSS — 导航栏篇（一）
畅谈、
01-04 1万+
CSS 和 HTML 综合应用之导航栏。让你初步了解导航栏的组成和写法
CSS实例(五)：简洁的栏目实现方式
无名指的约定
08-19 1735
今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么： 　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。 　　HTML文件： Html代码   xml version="1.0" encoding="UTF-8" ?>  >  html xmln
css_属性选择器（根据属性名或属性值设定指定样式）
qq_39181017的博客
06-23 8424
1.[属性名] 选择含有指定属性的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
理解CSS语义化命名：构建可维护的网页样式
以经典的三栏布局为例，我们可以采用以下语义化命名： ```css #container { ... } /* —— Top Section —— */ #header { ... } /* 顶部区域 */ #navbar { ... } /* 导航栏 */ /* —— Main —— */ #menu { ... } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值