css框架网页设计

个人总结了一些开发CSS框架的经验，很丑. 希望每个人的讨论都能使我们共同进步. : ）

1，css框架

中国的互联网行业已经发展了10年，浏览器也从最早的NS增长到了现在的FF3.IE7等. 前端开发工程师的职位也已诞生. 近年来，在Web开发中，有一个非常热门的词-“框架”. 在开发网站时，诸如YUI，JQuery和Prototype之类的JavaScript框架确实已成为前端开发工程师手中的武器. 为什么？因为该框架包含工具，函数库，约定，并尝试提取可从常见任务中重用的通用模块，所以设计人员和程序员可以避免重复开发. 用外行的话来说，它节省了大部分重复工作的时间.

从最初的文本颜色和内容布局定义到所有演奏的定义，编写CSS也是一样. css框架也逐渐受到重视，因为每个人都意识到: 从图形表示形式抽象化抽象模块到重用是减少用户下载并促进团队和个人发展的最重要手段.

2. CSS框架的开发顺序

a）格式化reset.css

格式化CSS的真正好处是能够快速开始工作. 您可以在新的HTML文件中引入框架，而不必处理重置的填充和边距，并在浏览器下实现统一的布局和相同的性能.

b）layout layout.css

定义页面是两栏还是三栏，全屏或1024×768 ......

一个网站的设计可能有很多布局，但是大多数都是由几种可重复使用的布局组成. 选择性地引入所需的布局可以快速应用所需的页面布局.

c）基本样式type.css

定义正文的字体大小和颜色h1-h6，a: 链接a: 活动字体css控制网页框架中间距，p等.

基本样式的Css参考，例如将ul定义为“ ul-text”以显示相同的图标，行距和链接颜色.

也可以这样应用: class =“ ul-text square”，在li之前显示正方形图标.

d）餐桌装饰table.css

定义表格，tr，td，th，thead，tfoot，tbody，标题和其他标签.

与基本样式相同，但是现有网站上表格的形式几乎是所有处理数据，因此引用分别存储. 例如，在表上应用table-style-1是具有黑色边框的表，而table-style-2是具有边框的表.

e）表单修改form.css

定义字段集，标签，按钮，输入，选择，文本区域的性能.

大多数网站上的表单，按钮和输入框几乎相同. 引入此CSS的原因是为了促进在各种浏览器中的统一显示. 在各种浏览器中，默认按钮，输入框等的显示方式有所不同. 尽管格式化的CSS最初已经统一，但是需要在此CSS中定义输入框的边框和按钮的样式. 令人沮丧的是选择不能统一. 如果您考虑使用js，则费用太大.

f）打印装饰print.css

修改打印的输出页面.

g）包含其他CSS的CSS

frontpage.css，list.css，detail.css，register.css等

根据各种参考文献介绍相应的CSS. 例如，如果列表页面上没有表修饰，则不会引入table.css. 保存代码.

3. 创建CSS框架文件夹

a）核心主体

存储reset.css，layout.css，type.css，print.css

b）芽模块

存储CSS，例如table.css，form.css，album.css等.

c）花瓣的具体用途

存储打包的CSS. Frontpage.css，llist.css，detail.css，register.css和其他CSS. 直接存储在此文件夹中的css.

文件夹的命名基于个人喜好！我也想用电子命名它们，质子等. 嘿！

4. CSS框架的优点

a）提高开发效率.

b）标准名称定义，易于维护.

c）规范项目开发流程

d）CSS代码更清晰，更简单. html代码更合理.

5. CSS框架的缺点.

a）学习费用较高. 您需要了解整个框架，需要阅读框架的文档.

b）对于一个小项目和其他页面，css框架is肿. 框架中可能有大部分您不使用的代码.

c）可能无法帮助您改进技术. 过于依赖框架，很难消除错误. 包括框架固有的错误.

d）选择所需的框架和开发框架很痛苦. 写作后，我发现自己变得越来越僵硬和肿胀. 后果-_-

6. 开发和使用CSS框架时遇到的常见问题.

1. 页面外参考样式太多.

例如，对于ul的margin定义在格式CSS中将声明为0，并且在基本样式CSS中可能会声明为margin: 5px 10px:

因此Yslow中将有多个定义.

2. 考虑组件的可重用性.

例如，表单定义中定义的CSS定义了所有表单修改，并且假定在注册页面中只需要30％的CSS. 我们应该切掉不必要的70％吗？

结合以上两个问题，我个人认为解决方案是封装，因此应该有一些，而不应该有. 尝试减少http连接的数量和CSS的大小. 但是，如果完全做到这一点，css的可重用性将变得很差，并且后期的手动包装将非常痛苦. 只能使用Pony的短语“特定情况，特定分析”. 生活真的很矛盾...

3. 我应该支持他们吗？

可以看出css控制网页框架中间距，如果要支持em，最大的目的就是能够根据浏览器中用户的分辨率自由缩放，这对于大显示器用户和小显示器用户非常有用. . 但是，在收集了我们用户的浏览器数据之后，发现只有极少数的用户可以区分这两个目标. 可以想象，这部分用户花费比正常开发时间多一倍的成本是不划算的. 开发tbsp时，我们的团队决定不支持em. 当然，这是一个建议，我们也希望使用em来为用户提供最佳体验

作者:

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-178008-1.html