`

【笔记】DIV+CSS命名规则

CSS 
阅读更多
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:register
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight

1.CSSID的命名

外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车,收银台)
当前的current

2.样式文件命名
重置的:reset.css
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css 

 

分享到:
评论

相关推荐

    【DIV+CSS学习笔记】CSS样式命名规范

    良好的CSS命名规范是保证代码可读性、可维护性的关键,也是团队协作中必不可少的一环。以下是关于CSS命名的一些核心原则和建议: 1. **文件命名规范**: - 全局样式文件通常命名为`global.css`,用于定义通用的...

    div+css个人笔记

    理解层叠性(Cascading)意味着样式优先级的确定,特殊性(Specificity)规则决定了冲突样式的选择,而继承(Inheritance)则让子元素能继承父元素的部分样式。 4. **Web开发者扩展工具**:如Web Developers ...

    html+css学习笔记.pdf

    2. **CSS命名规范**:保持命名清晰,避免使用过于复杂的ID和类名,提高代码可读性。 3. **CSS盒子模型**: - **内容(Content)**:元素实际显示的文本或图像。 - **内边距(Padding)**:内容与边框之间的距离。...

    jQuery+CSS3全屏动画幻灯片图片切换代码.zip

    `statics`目录可能包含了项目的静态资源,如CSS样式文件(可能命名为`styles.css`)和图片文件。CSS文件用于定义幻灯片的布局、样式以及动画效果。图片资源则根据需求进行替换或添加,以满足不同的展示内容。 对于...

    css小知识特别适合新手

    最后,"常用的CSS命名规则 .txt"则是关于CSS代码规范的介绍。遵循良好的命名规则可以使代码更易读,更易于维护。文件可能涵盖了BEM(Block Element Modifier)、SMACSS(Scalable and Modular Architecture for CSS...

    js+css3卡西欧手表图形电子时钟特效.zip

    这个div元素的ID可以命名为"clock",方便JS和CSS3进行操作。例如: ```html <div id="clock"></div> ``` 接下来,我们使用CSS3来设计时钟的基本样式。CSS3提供了许多新的选择器、属性和过渡效果,使我们可以创建...

    vue.js+css3火箭发射飞行动画特效.zip

    在`css`目录中,我们可以找到样式文件,可能命名为`rocket.css`或`animation.css`。CSS3允许开发者创建复杂的动画效果,如变换(transform)、过渡(transition)和关键帧动画(@keyframes)。在这个例子中,可能会...

    splitting+css3制作的3D立体数字时钟滚动特效.zip

    CSS文件(可能命名为`style.css`)则是定义元素样式和动画的地方。为了实现3D效果,我们需要设置`transform-style: preserve-3d;`来保持子元素的3D空间。然后,通过`rotateX`和`rotateY`来调整每个数字的位置和角度...

    html网页css笔记

    CSS 声明用于定义 CSS 规则,可以分为以下几种: 1. **集体声明**:当多个元素具有相同的样式属性时,可以使用逗号(`,`)分隔的方式一次性声明多个元素的样式。 - **示例**: ```css h1, h2, h3, h4, p { ...

    CSS学习笔记-适合初学者

    【CSS学习笔记-适合初学者】 CSS,全称Cascading Style Sheets,即层叠样式表,是网页设计中用于控制页面布局和样式的语言。它与HTML或XML(包括SVG、XHTML等)等标记语言配合使用,使得网页内容表现更加丰富、美观...

    前端HTML/css笔记

    `<address>`用于表示地址信息,`<code>`用于插入代码片段,`<div>`作为容器元素,用于组织和布局内容。表格的结构包括`<table>`、`<tr>`(行)、`<td>`(单元格)和`<th>`(表头单元格),`<caption>`添加表格标题。...

    学习CSS过程中对于基础选择器、文本属性、字体属性的一些学习笔记和理解

    "CSS基础选择器、文本属性、字体属性学习笔记" CSS学习日记中,对基础选择器、文本属性、字体属性的一些学习笔记和理解。学习HTML网页知识的可以参考一下。 CSS基础选择器 根据不同需求把不同的标签选出来,简单...

    HTML&CSS学习笔记.pdf

    以下是基于给定文件内容的学习笔记,详细介绍了HTML和CSS的相关知识点。 **HTML的概述** HTML是用于创建网页的标准标记语言。它由一系列标签组成,这些标签通过尖括号包围并嵌套使用,以定义网页上的各种元素。...

    有条理、完整详细 前端笔记

    ### 有条理、完整详细的前端笔记知识点梳理 #### 第1章:HTML介绍 - **1-1 代码初体验,制作我的第一个网页** - HTML文档的基本结构。 - 如何编写并保存一个简单的HTML文件。 - 使用浏览器打开HTML文件的方法。 ...

    javascript学习笔记

    1. **命名规则**: - 变量名必须有意义且不能以数字开头。 - 区分大小写。 - 变量名和函数名遵循驼峰命名法(如 `firstName`)。 - 对象名则每个单词首字母大写(如 `MyObject`)。 - 执行语句末尾加分号,定义...

    jquery实现div上下左右居中显示的插件.zip

    它可能包含了div元素以及相关的CSS和JavaScript代码,用于演示居中效果。而"js"可能是指一个或多个JavaScript文件,这些文件包含了实现div居中显示的核心逻辑。通常,jQuery插件会有一个主文件,可能命名为"jquery....

    js视频笔记

    根据提供的“js视频笔记”内容,我们可以总结出以下几个关键知识点: ### JavaScript 概述 - **JavaScript** 是一种广泛使用的编程语言,主要用于网页开发中添加交互性和动态效果。与 HTML 和 CSS 不同的是,...

    基于Web的通用BBS系统的建立与维护毕业设计翻译

    在开发过程中,前端通常会采用DIV+CSS布局,如`.index-left-login`和`.index-slide`等CSS类,用于定义页面元素的样式和布局。CSS代码可以控制元素的宽度、边框、高度、浮动方式等,以实现响应式和美观的界面设计。 ...

    纯CSS3禁烟标志动画特效.rar

    4. **动画设计**:利用CSS3的`@keyframes`规则定义动画的不同阶段,如开始时标志的形状、颜色变化,然后可能是标志的旋转、缩放或其他动态效果。 5. **应用动画**:通过`animation`属性将动画应用到目标元素,指定...

Global site tag (gtag.js) - Google Analytics