`
svygh123
  • 浏览: 123124 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

CSS设计网页时常用规范 1

阅读更多
一.文件命名规范

全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;

二.常用类/ID命名规范

页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright 
导 航:menu
主导航:mainMenu
子导航:subMenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
……

常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……

分享到:
评论

相关推荐

    CSS设计网页时的一些常用规范.pdf

    在CSS设计网页的过程中,遵循一定的规范能够提升代码的可读性、可维护性和团队协作效率。以下是关于CSS命名规范和书写规范的一些详细说明: 一、CSS命名规范 1. 文件命名: - 全局样式:global.css - 框架布局:...

    CSS网页布局的常用规范.pdf

    《CSS网页布局的常用规范》 CSS(Cascading Style Sheets)是网页设计中的核心技术,用于控制网页元素的样式和布局。遵循一定的规范可以提升代码的可读性、可维护性和网页性能。以下是对CSS网页布局规范的详细解读...

    CSS设计网页时的一些常用规范

    以下详细介绍了在设计网页时,CSS中的一些常用规范,包括文件命名、类/ID命名以及书写规范等。 首先,我们来谈谈文件命名规范。CSS文件的命名应当简洁明了,并且反映出该样式表的作用。通常,我们可以按照以下方式...

    中华传统文化题材网页设计主题:基于HTML+CSS设计放飞青春梦想网页【学生网页设计作业源码】

    通过CSS可以实现网页的响应式设计,让页面在不同设备上都能获得良好的视觉体验。 - **JavaScript**:JS是一种轻量级的编程语言,常用于增强网页的交互性。比如动态效果、表单验证、AJAX数据请求等。 ### 2. DIV+...

    网页设计css规范

    ### 网页设计CSS规范详解 #### 一、网页设计规范手册概述 网页设计规范手册是为了确保网页设计的一致性和高效性而制定的一套规则。这套规则涵盖了从目录结构到CSS样式的各个方面,旨在帮助开发者创建高质量且易于...

    HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx

    本章的学习目标主要是了解网页上常见的基本元素及其特点,了解网页的布局结构,掌握编辑HTML5网页常用的编辑软件,了解HTML5发展、优势、浏览器支持情况,掌握HTML5文档的基本格式和语法规范,掌握创建和浏览网页的...

    网页设计制作规范

    ### 网页设计制作规范知识点详解 #### 一、页面设计制作基本要求 ##### 1. 文件及目录命名及文档要求 **1.1 设置项目文件目录** 项目文件目录的组织是确保项目清晰可维护的关键。根据描述,项目文件目录通常按照...

    DIV+CSS_网页布局常用基础知识.pdf

    网页布局是构建网站界面的关键部分,而`DIV+CSS`技术是现代网页设计中的主流布局方式。本资料主要讲解了`DIV+CSS`在网页布局中的基础知识,包括常见元素的命名规范、CSS书写规范和方法。 首先,网页的组成部分通常...

    css常用定义词

    描述中提到的"规范命名和定义词"是指在编写CSS选择器时,为了保持一致性,通常会遵循一定的命名规则。例如,使用描述性单词或短语来表示页面元素,如`header`表示页头,`loginbar`表示登录条,`sidebar`表示侧栏等。...

    DIV+CSS 网页布局常用基础知识

    下面我们将深入探讨`DIV+CSS`网页布局的基础知识和规范。 **CSS命名规范**是确保代码可读性和维护性的关键。文件通常按照功能划分为不同的样式表,例如: 1. `global.css`:全局样式,适用于整个网站。 2. `layout....

    网页设计CSS快速参考

    9. **Dreamweaver与CSS**:Adobe Dreamweaver是一款常用的网页设计工具,它支持直接编辑和预览CSS,帮助设计师快速构建和调试样式。 10. **代码组织**:了解如何编写整洁、有组织的CSS代码,如使用注释、遵循命名...

    div+css网页模板

    10. **最佳实践**:在使用div+css时,应遵循语义化HTML,合理使用类名,保持CSS代码简洁和模块化,以及利用最新的CSS规范如Grid和Flexbox,以实现更高效、更灵活的布局。 通过深入学习和实践这个"div+css网页模板...

    css网页设计.pdf

    ### CSS在网页设计中的核心知识点 #### 一、CSS简介与作用 - **定义**:CSS,即层叠样式表(Cascading Style Sheets),是一种用于描述HTML或XML(包括SVG、MathML等衍生技术)文档样式的语言。 - **功能**:不仅...

    学生HTML个人网页作业作品 HTML+CSS+JavaScript环保页面设计与实现md

    - **CSS3**: 用于美化页面,提供了强大的选择器、变形、动画等功能,让设计师能够创造出视觉效果更加丰富的网页。比如使用`@media`查询来实现响应式设计,确保网页在不同设备上都能正常显示。 - **JavaScript**: ...

    CSS编码规范.docx

    在网页设计中,CSS(Cascading Style Sheets)的编码规范是确保代码可读性、可维护性和团队协作效率的关键。以下是一些核心的CSS编码规范: 1. **文件命名规范** - 基础样式:base.css - 全局样式:global.css -...

    DIV+CSS课件

    尽管W3C并没有强制要求浏览器厂商遵循这些规范,但主流浏览器如Internet Explorer和Firefox已经支持了大部分CSS特性,使得设计师可以针对这些浏览器设计出显示一致的页面布局。 接下来,本章介绍了DIV+CSS的概念。...

    基于HTML、CSS、JavaScript的现代网页设计指南

    接着,探讨了 CSS 如何控制网页样式和布局,包括常用的布局技术和响应式设计方法。最后,介绍了 JavaScript 的交互功能和动态效果实现,并提到了一些常见的框架和库。同时,文中提供了一些实际的设计建议和最佳实践...

Global site tag (gtag.js) - Google Analytics