DIV+CSS网页布局常用的一些基础知识整理
CSS命名规范
一．文件命名规范
全局样式：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书写规范及方法
一. 常规书写规范及方法
1. 选择DOCTYPE：
XHTML 1.0 提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：
为文档指定语言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：
常用的语言定义：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.0″ encoding=” utf-8″?>
针对老版本的浏览器的语言定义：
<meta http-equiv=”Content-Language” content=” utf-8″ />
为提高字符集，建议采用“utf-8”。
3. 调用样式表：
外部样式表调用：
页面内嵌法：就是将样式表直接写在页面代码的head区。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
4、选用恰当的元素：
根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；
避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；
尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；
5、派生选择器：
可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、辅助图片用背影图处理：
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、结构与样式分离：
在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写：
页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>
/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/
9、鼠标手势：
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”
二．注释书写规范
1、行间注释：
直接写于属性值后面，如：
.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}
2、整段注释：
分别在开始及结束地方加入注释，如：
/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/
三．样式属性代码缩写
1、不同类有相同属性及属性值的缩写：
对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
两个不同类的属性值有重复之处，刚可以缩写为：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一属性的缩写：
同一属性根据它的属性值也可以进行简写，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、内外侧边框的缩写：
在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
则可缩写为：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
缩写为：
.btn {margin:10px 5px;}
而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
缩写为：
.btn{margin:10px;}
4、颜色值的缩写：
当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
.menu { color:#ff3333;}
可缩写为:
.menu {color:#f33;}
四．hack书写规范
因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。
1、 IE6、IE7、Firefox之间的兼容写法：
写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS hack可写为：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}
写法三：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/
屏蔽IE浏览器：
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/
IE6可识别：
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
select { display /*IE6不识别*/:none;}
IE的if条件hack写法：
所有的IE可识别：
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以识别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以识别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可识别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可识别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可识别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
2、清除浮动：
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
轻轻松松学习div＋css布局
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align=left等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。
HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考
首先要学习什么是结构，一些作家也称之为语义。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来，类似这样：
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=shop></div>
<div id=footer></div>
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。
根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。
使用选择器是件美妙的事
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。
另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。
一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离.)
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width=80% cellpadding=3 border=2 align=left>，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。
亲自实践一下结构化
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到container层中又有其它层，结构类似这样：
<div id=navcontainer>
<div id=globalnav>
<ul>a list</ul>
</div>
<div id=subnav>
<ul>another list</ul>
</div>
</div>
嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
用CSS替换传统方法
下面的列表将帮助你用CSS替换传统方法：
HTML属性以及相对应的CSS方法
HTML属性 CSS方法 说明
align=left
align=right float: left;
float: right; 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等
当你使用float属性，必须给这个浮动元素定义一个宽度。
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
bgcolor=#FFFFFF background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
bordercolor=#FFFFFF border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left
border=3
cellspacing=3 border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。
你可以使用 table, td or th 这些选择器.
如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;
<br clear=left>
<br clear=right>
<br clear=all>
clear: left;
clear: right;
clear: both;
许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.
cellpadding=3
vspace=3
hspace=3 padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。
align=center text-align: center;
margin-right: auto; margin-left: auto;
Text-align 只适用于文本.
象div，p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中
DIV+CSS中浏览器兼容方法及div+css的使用技巧
相信很多的朋友在div+css的页面制作当中都会遇到这个问题，由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别，所以在制作页面的时候经常会出现一些小BUG，和网页错位等现象，下面站长好站为大家讲解一写，在div+css中如何兼容各大浏览器。
首先我们先要检查相应的HTML标签，如果你的标签错误，无论你如何修改CSS样式，都不会解决问题，即使是老手也经常会犯标签嵌套错误。CSS样式是否有错误，比如你是否少了“;”分号分割，是否忘记了“}”结束大括号。HTML中是否忘记了DOCTYPE声明。
CSS样式要注意，float元素需要指定固定宽度，并且要清除浮动，另外float元素不能指定margin属性，因为在IE6浏览器下存在BUG，float浮动元素的宽度总合要小于100%，也就是父级层的盒子的宽度。在我们新建一个css的时候要把所有的标签都归于默认形式，也就是padding和margin都要设置为0，可以用“*”号来还原默认样式，因为在各大浏览器中对于默认的div、li、ul等标签的内外间距解释不同，所以我们要全部设置为0，需要的时候在单独设置。
但是如果不管如何的检查，HTML和CSS都没有问题，但是就是不兼容，那么就可以用各各浏览器之间的hack来解决兼容上的问题，下面我给出我个人比较常用的一些浏览器hack。
1、!important
!important是针对于火狐等标准浏览器特有的hack，IE6不支持该声明，使用时要提前声明。例(.div{ width:100px !important;} .div{ width:50px;})，火狐等标准浏览器的DIV就是100像素的宽度，而IE6则是50像素的宽度。
*html *+html /9
这三样分别为IE6、IE7、IE8的特有标签，这样就可以分别为IE6、IE7、IE8分别设置不同的样式，如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 这样设置的话，那么IE6的宽度是100像素，IE7的宽度为90像素，IE8的宽度为80像素，这样如果在结合上面的!Important，那么就可以彻底的把IE6、IE7、IE8、火狐等标准浏览器进行分别设置样式了，从而达到浏览器兼容。
上面说了各大浏览器的hack，如果你全部掌握了，制作出一个兼容主流浏览器的网页是非常容易的，唯一的区别就是CSS的代码多一些而已。下面介绍一些在div+css中使用的一些技巧。
在CSS中写div{ width:100px; margin:0 auto;}可以使DIV块在整个网页中横向居中。
在CSS中写div{ height:20px; line-height:20px;}这样写可以使这个DIV中的内容在20像素的高度之中进行垂直居中，但是需要注意的是，该内容不可以换行，否则在火狐等浏览器下内容会重合，而在IE浏览器中会换行。
如果需要给内联元素，如span、a等标签设置宽度和高度，必须给它们设置成块元素，a,span{display:block或inline-block;}前一个是把a和span标签改变成块元素，第二个是把a和span改成内联块元素。
ul、li等元素在各大浏览器中都有样式和padding，所以在使用前，应该进行事先声明。
清除float，可以用.clear{ clear:both;}这个需要在浮动结束位置进行设置，也可以在父标签中设置 div{ height:1%; overflow:hidden; }这样也是可以清除浮动的，但是有的时候不好使，还是得用第一种方法。
分析div+CSS对SEO优化的细节
最近我自己的网站在进行改版，准备加强网站布局方面与关键字的优化。还记得在去年我有一份属于自己的网站的时候，就是用表格做的，但是感觉蜘蛛爬行实在是不敢恭维，这次进行一次全新的改版，希望大家也能够重视SEO中，这个小细节。
那么这个细节到底可以为你的网站带来什么，或者给你的用户带来哪些感受呢?在SEO中有一个相当重要的内容是“关于网站内部结构的优化”，主要就是通过对网站的内部链接、网站的结构、标签、对内容的分布排版等各方面的优化，使SE更容易抓取网站的内容，同时也方便用户更快的打开网站。而我们现在所说就是div+css的影响。
CSS布局经验分析：如何避免走误区
为什么我会写这篇文章呢，其实自己在学习div+css的时候没太多去看前人的经验，只是看了书了盲目的实践,能够把布局布出来就感觉自己真的学会了div+css布局,其实很久之前就要写的了，一直没有时间，今天拿出来跟大家分享下如果避免走误区。
自己在开发css也半年多了,其实div+css的真实名字叫XHTML+CSS，为了方便跟html区别我将写成div+css，自己刚开始写css的时候也是跟一些刚学的同学一样，感觉table比div快，在网页上随便拉拉几个框加上图片出OK了，但是如果你真的学习了div+css后你就会觉得它的好处和方便了，下面说入正题，我今天所说的误区就是选择对的游览器将是对你学习div+css的一个转折点。
浅谈Div+css页面布局对seo的影响
Div+css是网站标准的常用术语之一，现在已经普遍不再使用table表格布局，而是采用div+css的方式实现各种定位。
而Seo的思想就是用搜索引擎的理念来搭建网站，而不是单一的在网站建设好后，通过一些技巧和手段来使得网站被搜索引擎来喜欢进而达到很好的排名效果。不管是思想指导实践，还是实践填充了思想，都是一个好的开始。
使用div+css设计网站对seo影响是非常大的，所以要引起足够的重视，由于结构简单，符合标准，所以深受搜索引擎的喜欢，要合理的利用div+css正确的布局网站，来达到自己网站长期更好的发展。
XHTML+CSS布局中兼顾SEO的建议
XHTML+CSS布局模式因其表现和内容相分离，提高搜索引擎对网页的索引效率，代码简洁、提高页面浏览速度，易于维护和改版等众多优点而在广泛地被人们所接受。以下笔者结合手机商务类网站，对XHTML+CSS布局中兼顾SEO进行一些总结，希望能给站长同仁一些有益的参考。
一、做好网页的架构分析工作，是设计好网页的前提
一个拥有高访问量的网站是成功网站的一个衡量因素，我们在设计网页时要根据主题的不同进行合理的板式选择和色彩配，将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣，促使他们来访问我们的网站。
第一，分析页面板式架构
“手机商务网站”主要以网上宣传新款手机和销售为主，这种类型网站的特点就是主要让人感觉到商品丰富而又美丽大方此在选择色彩是主要以蓝色、绿色为主，小图标、小按钮、边框线等点缀小图形以红、橙为主，显得页面绚丽多彩、活泼、大方，视觉冲击力较强;另外，“手机商务网站”主页面主要包括网站BANNER、导航栏、站内搜索、新产品图片宣传、最新新闻、网站服务、产品信息、版权信息等。
第二，分析页面排版架构
整个网页的框架比较简单，包括Banner图片、导航条、搜索栏、页面主体及版权信息等。因此，采用了基本的网页框架结构。清晰准确的架构设计是下一步布局的基础和关键。
第三，依据XHTML+CSS布局网页的模式特点实现页面各模块的制作，凸显布局优势
页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合，这是设计制作网站的通常步骤，养成良好的设计习惯便可熟能生巧。
1、利用DIV标记对页面进行分块，确定好各块以及子块之间的关系依据前边分析的排版结构对页面进行分块，另外制作过程注意利用注释语句，以便让页面代码清晰、易读。
2、定义CSS样式实现对各块效果的设计与美化
页面各模块划分好之后，接下来就是定义CSS样式对其进行定位和美化工作了，具体操作之前先做好整个网站的样式分析与规划工作，这是有效使用CSS样式表的前提。
1)对整个网站中要用到的CSS样式表进行统一规划。从网站效果一致性原则出发，对整个网站的样式进行系统的分析和规划，详细罗列各样式的名称和样式内容。特别要善用属性简写，尽可能地减少冗余代码，例如：
margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以写成这样的格式：margin:0 10px。
2)统一规划CSS样式的应用范围。对网站中各个页面都要使用的样式效果(例：各页面中的普通文本信息采用统一的大小、字体、行高、颜色等)统一定义在外部样式表文件中，方便各页面的调用，而对某个页面中要单独使用的效果则以内嵌式样式表的形式直接在相应页面中进行定义。
3)基于SEO的样式命名规范
搜索引擎是通过抓取网站源代码来进行亲密接触的，如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关性，增强网站的搜索优化?可能从最基本的命名规则入手会有意想不到的收获，下面从前端设计的角度整理了一些常用的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做到让搜索引擎明白，从而达到我们的设计目标。
3、对页面效果进行整体调整，保证页面的协调和美观
经过上边的步骤页面已经基本成形，在制作完成的最后，往往还需要对页面根据效果做一些细节上的调整。例如各个块之间的Padding和Margin的值是否与整体页面协调，各个子块之间是否协调统一等等。另外对于固定宽度且居中的板式，需要考虑给页面添加背景，以适合大显示器的用户使用等。
二、考虑浏览器兼容处理，保障不同的用户查看到最好的页面效果
在设计网页时，经常碰到在IE中制作的页面换到Firefox预览时，发现页面效果变化很大。针对这样的问题，我们在设计网页时就要进行相应的处理。常用的方法有：从空白页面开始，每做一小步，就同时在各种浏览器中查看，一旦发现显示效果不同，立即查找原因，寻找解决办法;也可以通过软件工具模拟网页在各种不同的浏览器中的效果，例如目前大家用的IETester v0.2.3，这样可以边做边修改;另外，大家在制作过程中要善于总结一些经常出问题的标记的处理办法。例如：边界重合时利用padding或border来避免。您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来，如果您有用到margin，那么很容易产生边界的重合。又如有时候某些错误会使50%+50%成为100.1%，使网页出现问题，这时请尝试将这些值改为49%，甚至49.9%，往往这样的做法才解决了问题等等。
浅谈网站优化如何做好内部布局
网站优化，内部布局很关键的环节，其流程：定位-选择合适的程序-内容的多少选择网站的结构-站内的每个功能利用seo元素，所以重点在于思路，站内优化应当由网站结构，站内链接出发思考。
一、网站结构
1、扁平式
这种结构比较合适内容比较少的网站，比如：博客、企业站等等，很多做单页优化，基本都是扁平式结构，有利于搜索引擎蜘蛛的抓取和收录。内容比较多的网站因为内容比较多，把网页生成静态在根目录下会很乱，同时也不好维护。
2、垂直式
主页布局优化：用户和搜索引擎的完美恋爱
主页是网站的门面，需要每个站长精心的进行设计，获得搜索引擎及用户的喜爱，完成我们与用户和搜索引擎的完美恋爱(seo的需求，现实中本人倡导专一的爱情观)。下面我来讲讲怎样通过爱情观实现网站主页的布局优化。
1、以貌取人型布局技巧
现实中第一印象很重要，互联网上亦是如此。因为seo的根本是用户体验，在网站上停留时间的长短就说明了用户对网站喜爱程度的高低，拥有完美的页面能吸引用户的眼球，所以现在的网站在追求内容的同时还在为网站的整体做着美容，请了很多的网站美容师即美工，足见网站美化的重要程度。我们从另一方面想其 实原因很简单，美观的网站布局显得网站专业正规，能给用户带来安全感，不会过于担心网站上挂了木马等 危险程序，用户可放心浏览。
浅析主页布局与网站排名的关系
大家好，今天给大家分享的是主页布局与网站排名的的关系，在写这篇文章的时候，思考了很久，到底该怎么下笔，写文章嘛，应该要有一个清晰的思路，才好下笔。在说主页布局与网站排名的关系之前，先要讲一下主页布局有哪些技巧以及有哪些需要注意的。
一、首页的头部布局
网站首页的头部布局，是很重要的，这里说的布局，有点过了，应该说是头部的设置，头部设置主要有三大块：
1、title(标题)设置，如果你的网站想要在搜索引擎上有好的排名，那么你的标题就要写的符合搜索引擎的标准，一般不超过25个字以内，也就是50个字符，但不是说写多了不可以，只是在搜索引擎上显示不全，那这个和写没写又有什么区别呢?