css框架代码(css外边框代码)
其实css框架代码的问题并不复杂，但是又很多的朋友都不太了解css外边框代码，因此呢，今天小编就来为大家分享css框架代码的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！
怎么可以最简单的使用div+css制作网页框架
1、布局先把大框架确定，再逐步把内部的细节构建出来，从层级关系来看就是由外往内布局；
2、如果你对divcss不是很熟悉，那么你可以先以图片作为背景图片代替
3、如果对布局定位不是很熟练，那么可以暂时以绝对位置来布局
4、自己不熟悉的情况下，在设计平面页面的时候就要先考虑到自己是否有能力写出这个页面的布局出来，或者说自己写出来的不出问题；比如圆角、阴影、半透明效果、模块错位叠加等等；
其实页面布局是否简单只是相对而言的，精通的人和新手的看法肯定不同，从长远来看，新手还是不要取巧，写divcss代码的时候不要怕出错，不要怕难，碰到了问题就去寻找解决的方法，针对问题然后去解决问题是最好的解决方式，当你不再碰到问题或者很少碰到问题的时候，就说明你已经精通或者离精通不远了
还有一点要说一下，学习得有一个喜欢的态度，不要当做负担或者任务来学习，当你对一个东西感兴趣的时候你会学习的很快；就好比读书的时候某些学生某一科的成绩一直很好，绝大部分人其实都是感兴趣才会学的那么好
怎么去找到好的响应式css框架
这些前端框架能为您提供以下好处：
跨浏览器：前端框架都在不同的浏览器测试通过。
一致性： UI组件，如导航，按钮，标签，表单，下拉菜单，表格...他们的风格都相互统一。
快速开发：您可以轻松，快速的构建一个布局。他们通常有代码片段和优秀的文档。
响应式：所有 CSS组件和 Javascript插件能够从桌面扩展到移动端。
InK
Ink是一个用于快速开发 Web界面的 UI套件，简单易用和。它通过整合 HTML，CSS和 JavaScript来提供现代化的解决方案，构建布局，显示通用的界面元素，为你的用户实现内容为中心的和用户友好的互动功能。
HTML& CSS组件：布局，导航，排版，图标，表格，提醒，表单。
JavaScript组件：画廊，模态窗口，表格，可排序的日期选择器，选项卡，表单验证，行为（停靠，折叠，关闭）。
其它特性：支持 Sass混入。
GroundworkCSS
GroundworkCSS灵活的网格系统使你能够快速开发，并能够适应任何屏幕尺寸，从手持设备到大尺寸的显示屏。GroundworkCSS构建在强大的 CSS预处理器 Sass的基础上。Sass是对 CSS3的扩展，并添加了嵌套规则，变量，混入，选择器继承等等众多特性。使用命令行工具或 Web框架插件可以转换为标准的 CSS代码。
HTML& CSS组件：网格，布局，排版，按钮，瓷砖，表格，表格，图示，社会的图标，响应文本，消息，警报。
JavaScript组件：导航，标签，工具提示。
其它特性：支持 Sass混入。
Ivory
灵活，强大的响应式 Web框架，使 Web开发更快，更容易。支持 1200像素到 320px区间的响应式布局。
HTML& CSS组件：网格，排版，表单，按钮，提醒，分页，面包屑，列表，表格。
JavaScript组件：工具提示，选项卡，切换开关，手风琴。
Foundation
Foundation是由加利福尼亚州的产品设计公司 Zurb推出的。这是目前最先进的响应式前端框架，它有很多的模板布局，UI组件的 CSS样式，也收录了很多他们自己的 JavaScript插件。
HTML& CSS组件：网格布局模板，图标，字体，响应式表格，SVG社交图标，分页，面包屑，边栏导航，按钮，字体，标签，提醒，面板，价格表，进度条，表格，缩略图。
JavaScript组件：下拉按钮，分割按钮，开关，自适应视频，灯箱，下拉列表，导航，显示模态窗口，选项卡，工具提示。
其他特性：自定义皮肤的表单，SCSS混入。
Grumby
Gumby 2基于强大的 Sass构建，Sass是一个功能强大的 CSS预处理器，这使我们能够快速的开发自己的 Gumby，并为您提供新的工具，让你能够在 Gumby的框架基础上快速定制。
HTML& CSS组件：网格，表单，按钮，导航，标签，Entypo图标。
JavaScript组件：切换开关，下拉框，选项卡，模态窗口。
其他特性：自定义皮肤的表单，SASS& Compass。
HTML KickStart
超精益的 HTML5，CSS& JS模块，用于快速网站制作。它有一个全面的 UI组件，也有一些有用的 JavaScript插件，它的目标是成为设计师的朋友。
HTML& CSS组件：网格，排版，按钮，按钮条，列表，表格，图标，面包屑，图像，表格。
JavaScript：菜单，工具提示，语法高亮，选项卡，幻灯片，表单验证。
其他特性：额外的 CSS工具。
Maxmertkit
这个框架是由 Vetrenko Maxim Sergeevich创建的，使程序员的生活更轻松。Maxmerkit是基于部件修改器编码风格的一个 CSS框架。
HTML& CSS组件：网格布局，typograpghy，徽章，按钮，插入符，表格，图标，标签，菜单，进度表，下拉菜单，工具提示。
JavaScript组件：按钮，转盘，模态窗口，通知，弹出层，选项卡，滚动侦测。
其他特性：支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap是基于 HTML，CSS和 JavaScript的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter在2011年8月开源的整套前端解决解决方案。Bootstrap有非常完备和详尽的开发文档，Web开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
HTML& CSS组件：网格，布局，排版，代码，表格，表单，按钮，图像，图标，按钮组，导航，面包屑，分页，选项卡，徽章，缩略图，提醒，进度条。
JavaScript组件：过渡，模态窗口，下拉框，滚动检测，标签，工具提示，弹出层，警报，按钮，手风琴，旋转木马，自动补齐。
其它特性：支持定制， LESS CSS。
Skeleton
Skeleton是一个小集合的 CSS文件，可以帮助你迅速开发任何尺寸，外观漂亮的网站，例如用于 17寸笔记本电脑屏幕或 iPhone屏幕的。Skeleton建立在三个核心原则之上：兼容移动端的响应式网格，快速入门，风格无关。Skeleton对于大多数开发者是一个相当不错的选择，因为它是轻量级的且易于使用。
HTML& CSS组件：网格，排版，按钮，表单，媒体查询。
Kube
Kube是由 imperavi（他也是著名的 Redactor编辑器的作者）发布的前端框架，以使设计者/开发者的生活更轻松。简约而不简单，适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体，没有任何强加的样式。
HTML& CSS组件：排版，表单，网格，表格，按钮，导航，图标。
JavaScript组件：按钮，标签。
其它特性：支持 LESS CSS。
Helium
Helium是一种前端响应式 Web开发框架，用于 HTML5和 CSS3项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap和 ZURB Foundation相似。然而，不同于这两个框架的是，Helium的目的是要更轻量，更容易更改。把它看成是一个典型的汽车，在那里你可以打开引擎盖，容易对发动机进行改装。
HTML& CSS组件：网格，按钮，排版，表格。
JavaScript组件：下拉框，表单验证，模态窗口。
其它特性：支持 SASS& Compass。
Markup
Markup框架是一个布局，窗口小部件，排版样式和其他的 UI组件的集合，可以根据自己的需要进行整合。
HTML& CSS组件：布局，网格，排版，表格，按钮，标题，面包屑，消息，导航列表，导航菜单。
JavaScript组件：无 Javascript，纯 CSS。
Topcoat
Topcoat是一个 CSS集合，用于简洁和快速的 Web应用程序开发。它是一个开源库，不需要任何 JavaScript内置的用户界面元素。
HTML& CSS组件：图标，字体，按钮，面包屑，按钮栏，表格，下拉列表，滑动开关，标签，切换按钮，选择，滑块
JavaScript组件：无 Javascript，纯 CSS
PureCSS
Pure是一组轻量的，响应式的 CSS模块，您可以使用在任何的 Web项目中。充分考虑了移动设备中的使用，保持文件体积尽量小，每行 CSS都进行了仔细的考虑。Pure基于 Normalize.css构建，并提供布局以及原生 HTML元素的风格，加上最常见的 UI组件。相信这些都是你需要的。
HTML& CSS组件：网格，排版，表格，按钮，表格，菜单。
JavaScript组件：无 Javascript，纯 CSS。
其它特性：皮肤制作器，YU库。
如何写出较好的css
较好的css在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题,虽然这么说，也不是如此简单的。
一、可读性
有人认为CSS不是程序，不需要可读性，有人认为CSS只要写出来就有可读性，因为很简单。抛开各种预处理器不说，原生CSS结构确实简单，没有需要编程的部分，但仍然可能导致混乱。原因有二，一是CSS可以层叠，其中涉及到了优先级和作用范围，如果写的不好，人很难读出其中的意义，二是CSS属性众多，加上CSS3引入了很多用法独特的属性，一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码：
span{
-webkit-box-shadow: 6px 4px 4px red;
-moz-box-shadow: 6px 4px 4px red;
box-shadow: 6px 4px 4px red;
}
div span{
border-width: 4px;
border-style: dotted;
border-color: blue;
}
#box{
border-left: 2px solid red;
border-bottom: 2px solid red;
}
乍一看也没什么，都是border，大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的，你可能会说这太傻了，看不到吗。是的，当这3部分散落在上万行的CSS中时，肯定看不到。于是有人很自然的想起了我们可爱的浏览器，没错，在浏览器中可以快速找到作用于目标的CSS样式，但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的，因为你是靠浏览器找到它的。然后剩下两种可能，不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%，后者悲剧的可能性是90%，因为你已经掉坑里了，很快我们会发现要修改它还牵扯到了另外的地方，接着在浏览器中探索到另一个莫名其妙的样式，当你弄懂全部的时候，你应该已经把上万行的代码弄了个一清二楚了，也许最幸运的是，浪费了几个小时的时间发现只需要修改一行就能达到目的。
当然，我们可以天真的认为，只要把他们写在一起就可以了，这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。
维护性
所谓物以类聚是很有道理的，人们习惯将事物归类，但问题是分类标准，样式并不关心业务，无论是什么文字内容，还是功能有何不同，它在乎的只是样式，比如文字的尺寸，间距和宽高，颜色等等。如果简单的将一个组件的样式放在一起，势必带来的就是小段代码的重复书写。不觉得有多严重？我来举个栗子。
aside{
box-shadow: 6px 4px 4px#AA3343;
}
nav{
box-shadow: 6px 4px 4px#AB3633;
}
.item{
box-shadow: 6px 4px 4px#AA3732;
}
.item.otherStatus{
box-shadow: 6px 4px 4px#AA3132;
}
继续说上面的例子，box需要阴影，但如果这个项目的UI统一风格，包括sidebar，navigator以及item都需要这样的阴影呢？再如果，明天客户或者UX一拍脑袋，这个阴影应该是灰色的不该是红色的呢？不要继续天真的认为全局替换是救命稻草。首先，没有几个网站会用red，blur做色调的，你用的应该是#AA3333，这样的代码，然后你发现sidebar用了#A43433，而navigator是#AB3633，等等，item有两个状态，而两个状态对应的颜色是不一样的。这怎么可能？但当你打开浏览器的时候你会发现本来就相差无几的颜色，在阴影中变得一模一样了，谁看的出来呢，当初使用的时候可能也不过是随意的在mockup中取的一个颜色。
大量的重复带来的不仅仅是代码的冗余，我们必须靠人力去同步它们，而人很难保证它们的修改是完全一致的，尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS，其后果就是进度和人力的压力，后面就是PM有没有读过《人月神话》的事了。
肯定有人在想，谁让你当初要写成这样呢。我们在读代码的时候最喜欢问，当初为什么要这么写？但慢慢的你会读出它的历史，有时候它是身不由己的。这就涉及到了下一个要讨论的内容。
二、扩展性
扩展性是一个具有欺骗性的东西，所谓的扩展性其实就是在现有基础上再次开发新东西的性能，但我认为它还必须有前提条件，那就是保持可读性与维护性。
简单的追求可维护性是自取灭亡，原因很简单，将新旧代码完全分离的时候扩展性最高，因为不必担心对以前的部分有影响，新的样式可以随意发挥。是不是很神奇，这样想的我们写下的代码，肯定就是前面我们追问的代码。所以自己回答自己吧，当初没考虑可读性和维护性，只想着快点增加新的样式，就这么写了。
那什么才是一个好的扩展性呢，简单来说，就是多功能产品。比如一个box，也许它的样式就时
三、复用性
似乎我一直在说的就是重复，那我们就来说说复用性，如何才能复用CSS代码是一个很大的问题，比如粒度，是一两个属性进行复用还是一大组选择器进行复用呢，再比如对象，是为了class复用属性，还是为了html复用class呢。这些选择不算太重要，但是带来的影响却很重大，可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。
.shadow{
-webkit-box-shadow: 6px 4px 4px#A93334;
-moz-box-shadow: 6px 4px 4px#A93334;
box-shadow: 6px 4px 4px#A93334;
border-left: 2px solid#A93334\9;
border-bottom: 2px solid#A93334\9;
}
这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了，但这导致了一个复用的问题，和上面那段捣乱的CSS样式一样，如果item已有另外2个border了，那这个class是无法去除的。所以复用时不仅要考虑需要什么，还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的，因为user agent的原因，很多属性是隐藏在element中的。
关于css框架代码到此分享完毕，希望能帮助到您。