网站前端设计，从960框架开始

一个网站进入到前端设计阶段，第一步肯定是为全站搭建一个统一的，基础的HTML模型，在这里推荐一下我刚学习的960框架。
960是一个CSS框架，你肯定在想，这个世界肯定是疯了，连CSS都有框架了吗，没错，有，而且不止一个，960CSS是一个轻量级的布局框架，此外还有很多，诸如ElementsCSS ,Blueprint等等，对其他CSS框架感兴趣的朋友请看这篇文章。
首先了解一下在软件开发领域，什么叫框架。在代码界，框架的定义是：一种能够为你的项目的整体或局部功能提供统一代码组织的结构，并且这种结构是符合大众标准的，能够提高开发效率，提高产品质量，方便项目移植的。
960CSS正是这样一种轻巧的组织结构，这套框架将页面定义成一个960像素宽度的一个容器，将容器分成12或者16列，每列的宽度由框架计算，用户只需关心自己页面上每个子容器的大概占比即可。960是一个优美的定义，无论是twitter还是facebook，不管是个人博客还是企业展示型网站，它们的前端设计都是使用的960网格模型，也就是页面容器的宽度都是960像素。经过实验，960像素的宽度也确实是比较适合现代屏幕阅读的。到官网上将ZIP下载回来便可以直接使用，压缩包里有几个CSS文件就是这个框架的核心了。

首先在HTML里引入960.css（如果你将你的页面定义成12列，你也可以只引入960_12_col.css）然后就开始编写基础的HTML的布局结构了。


<div class="container_12"><h2>12 Column Grid</h2><div class="grid_12"><p>一整排空间，比较适合做导航条</p></div><div class="clear"></div><div class="grid_1"><p>侧边栏</p></div><div class="grid_11"><p>主容器</p></div></div>

根据960CSS的规范，上面这段HTML将页面定义成12列，首先出现了一行12列满空间的DIV，然后在下面出现了一个1列的DIV，与其并排布置了一个11列的DIV。从代码规范来看，整个容器是一个以container_12命名的DIV，在这个容器里，以grid_1到grid_12定义了一系列CSS类，用户只需要估算好自己每个容器所占比例就好。按照这种方式布局的网站，组织结构清晰，布局优美规范，正统严谨，保证了页面上下每个子容器的边框能够对齐，不错位。
有朋友会说，如果这样定义HTML会显得毫无条理，以前每个DIV的class都有明确的含义，比如nav或者footer之类的字眼，现在用container和grid来为class命名会导致代码无意义。其实我们更应该学会利用CSS的多属性来写HTML，W3C允许也提倡我们为标签定义多个class类，最主要的好处就是能够降低代码重复率，提高浏览器解析效率，在960CSS的基础上，我们完全可以为不同的子容器继续定义更加个性化的CSS样式，并为其命名，不过要注意的是，自定义的容器样式不要出现有关宽度和边距的定义，以免破换960框架为我们设计好的页面布局。

转载于:https://www.cnblogs.com/newflypig/archive/2012/03/04/2861980.html

网站前端设计，从960框架开始相关推荐

Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档
Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档 Java计算机毕业设计体育网站前端设计源码+系统+数据库+lw文档本源码技术栈: 项目架构:B/S架构开发语言:Java语言开 ...
宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘要本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
网站前端设计中解决不同分辨率电脑测量尺寸不同的问题
在刚接触前段的时候,通常最先接触的是HTML+CSS的开发模式,有的时候需要借鉴别的网站的设计效果,这就需要用到截图工具(PrtSc键),但是不同分辨率的计算机截图实际测量结果是不同的.比如,我的电脑 ...
计算机课程设计前端设计,网站前端设计课程设计报告书.pdf
下载可编辑前端技术课程设计报告海贼王主题学院:计算机与控制工程学院班级: : 学号: 指导教师: .专业 .整理 . 下载可编辑一.目的与要求参考给出 ppt 容进行填写,不可以照抄 pp ...
基于Web html的“我的家乡”网站前端设计
目录 1.各板块的静态页面,参考实验一和实验二 1 3.家乡所在位置的地图显示,参考实验七 1 大屏幕尺寸下 3 index.html 3 利用了link设置了标签栏图标 4 大屏幕尺寸下 4 cus ...
从零打造视频播放网站(3)-前端设计篇
前端设计篇 1.框架: 2.项目体验: 3.代码: 3.说明: 1.框架: vue.js 官网:https://cn.vuejs.org/v2/guide/ iview(一套基于 Vue.js 的高质 ...
ssm基于JAVA的求职招聘网站的设计与实现计算机毕业设计
最新200套计算机专业原创毕业设计参考选题都有源码+数据库是近期作品如果题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,站内私我或add用户名,有时间看到机会给您发 1 2100 ...
java计算机毕业设计宠物救助网站的设计与实现源码+数据库+系统+lw文档+部署
java计算机毕业设计宠物救助网站的设计与实现源码+数据库+系统+lw文档+部署 java计算机毕业设计宠物救助网站的设计与实现源码+数据库+系统+lw文档+部署本源码技术栈: 项目架构:B/S架构 ...
基于SSM框架的旅游网站的设计与实现
1 简介今天向大家介绍一个帮助往届学生完成的毕业设计项目,*基于SSM框架的旅游网站的设计与实现 *. 计算机毕业生设计,课程设计需要帮助的可以找我 2 设计概要 1.1.研究背景随着互联网技术的 ...

网站前端设计，从960框架开始

网站前端设计，从960框架开始相关推荐

最新文章

热门文章