第64天:CSS常用命名规范,有用!

简介: CSS常用命名,必须记住一、常用命名标题:title摘要:summary箭头:arrow商标:label网站标志:logo转角/圆角:corner横幅广告:banner子菜单:subMenu搜索框:searchBox登录:login登录条:loginbar工具条:toolb...

CSS常用命名,必须记住

一、常用命名

标题:title

摘要:summary

箭头:arrow

商标:label

网站标志:logo

转角/圆角:corner

横幅广告:banner

子菜单:subMenu

搜索框:searchBox

登录:login

登录条:loginbar

工具条:toolbar

下拉:drop

标签页:tab

当前的:current

列表:list

滚动:scroll

服务:service

提示信息:msg

热点:hot

新闻:news

小技巧:tips

下载:download

栏目标题:title

热点:hot

加入:joinus

注册:regsiter

指南:guide

友情链接:friendlink

状态:status

版权:copyright

按钮:btn

合作伙伴:partner

投票:vote

左/右/中:left/right/center

简介:profiles

评论:comment

二、页面结构

容器:container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

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

三、导航

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题:title

摘要:summary

四、功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:register

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的:current

小技巧:tips

图标:icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

五、看一些class命名

1、颜色:使用颜色的名称或者16进制代码,如:

.red{color:red}

.f60{color:#f60}

.ff8600{color:#ff8600}

2、字体大小,直接使用font+字体大小作为名称,如:

.font12px{font-size:12px}

.font9pt{font-size:9pt}

3、对齐样式,使用对齐目标的英文名称,如:

.left{float:left}

.bottom{float:bottom}

4、标题栏样式,使用类别+功能的方式命名,如:

.barnews{}

.barproduct{}

相关文章
|
14天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
5天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
9天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
17天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
23 2
使用html+css制作一个发光立方体特效