CSS布局原则

网站建设离不开页面设计与编程的结合,这里主要讲编程,下面就来看看关于DIV+CSS云南网站制作页面布局的九大原则:

原则一:一般要写兼容IE6,IE7和FIREFOX的网页,最省事的方法就先写适合IE7的样式,因为IE7和FIREFOX很接近,这样判断浏览器兼容的工作量就能减小到最少。

原则二:逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的CLASS命名。

原则三:从总到分。顺序应该是这样:总体需要用到的>>结构>>模块>>二级模块>>细节;并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。

原则四:尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。

1、 图片文件的总量会变小;

2、 利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;

3、 显而易见,这样做非常便于管理,替换或新增的时候工作量很小。

原则五:切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。不光要控制图片文件的多少,还要考虑到这样切会不会造成页面增加许多额外的代码。

原则六:图片的命名规则,定一个规则,准备用一辈子。这样以后你看CSS文档的时候,你只要看到某个图片名称的时候,你不需要看太多你就知道这个图片的用途、位置;这样可以最大限度的保证样式的重用性。

原则七:在该不该用表格的问题上,我的态度是,涉及多行多列的特别是列宽有不固定的,坚决用表格,这个没啥好讨论的,千万不要为了DIV而DIV,用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的,需要灵活处理,但千万别模仿什么表格。

原则八:尽可能不把样式直接写到元素的标签里(除非这个样式出现的机率特别小,有相当程度的偶然性),把样式直接写到元素标签里是一种工作范畴意义上的无政府行为,非常不负责。

原则九:尽量不要用ID来定义或索引样式,ID的唯一性比较高,且用ID索引样式效率非常低而且兼容性的问题也比较明显。

时间: 2024-08-26 03:37:15

CSS布局原则的相关文章

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

CSS布局基础汇总

常见布局种类 一列布局 两列布局 三列布局 CSS中的定位机制 网页简单布局之结构与表现的原则 CSS元素隐藏 CSS中清除浮动最优方法 DIVCSS规范命名集合 DIVCSS命名参考表 导入样式及脚本 传统方式 新规范 常见布局种类 一列布局 自上而下的,一般头部进行固定宽度,高度设置为自动 两列布局 自适应的两列布局:width用百分比+float: 固定宽度的两列布局:width:具体值/父级元素的宽度确定,width+百分比:+float; 如果没有加float的话,不能实现并排的两列布

熟悉HTML CSS布局模型

HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一点一点的改, 新手可以看看, 对于初学这块的人应该还是有点帮助的. CSS布局模型 以下全部是个人初学HTML的一点理解, 哪里错了欢迎指正, 我也会改, 因为全程自学, 只能摸着石头过河, 拜托大神们了. CSS布局模型在我看来是和盒模型一样的最核心的概念, 但是布局模型是依托盒模型的, 它并不是

DIV+CSS布局基本流程及实例介绍

都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局.下面我们先来看下学习DIV+CSS布局的基本步骤: 一.认清学习的要求 1.弄清目的,首先要认识为什么要学习CSS? 2.心态不能急,如果你很急躁,否则会很快丧失兴趣. 3.坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月). 二.基础

关于div+css布局

div的元素布局加上css的样式表布局知识:DIV+CSS布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称.div+css布局好处:便于维护制作div+css网页前思考布局:首先我们拿到一张网页美工图片我们将从上下.上中下.左右.上中(中包括左右)下布局框架来思考.(从大元素块到小元素块:从html上到下:从左至右) /*我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是 上.中.下结构,其中又包括了左右结构.由此我们就要写此页面

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

&lt;转载&gt;div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

&lt;转载&gt;Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

CSS篇之DIV+CSS布局

<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">