巧用DIV+CSS做站 - 王朝网络

4月12晚8点：巧用DIV+CSS做站主讲海欧-东莞(110153877)

SEO学院(27971958)

做站的都知道，做站，大体从这几个面来达到做站的目的。

1内涵，就像一个人的才学。这站是做什么的，要放些什么，这是主要的。

2外表，也叫长相，当别人一个站来这里，就觉得有种归属感，就像美女看到帅哥，帅哥看到美女一样，都不免要回头的。。

3身材，也就是站的布局，也是我要讲的重点，现在一个好看的网站，如果光是用图片做出来，然后再就是把图片切片，用背景，通常新人都这样做，我之前也是这样做的。不过这样太不好了，打开速度慢，另一个是对优化不好。现在都在用DIV+CSS做站。这DIV+CSS是啥东本。等下说。。

4打扮。这个应该都知道，三分长相，七分打扮。想从丑小鸭变天鹅,就从这步开始。这也是我们常说的

SEO。呵呵。优化，把优化进行到底。。。

这内涵，打扮，都差不多都有人讲过，今天就主要就外表+身材来讲。

先说外表吧，外表，一般就个人站来说，都喜欢弄的花花绿绿，他们的目的就啥，就是显呗，让人家说，哇，你的站真漂亮，目的不同，想要的就不同。

先讲下网站美化，等下再讲CSS

而一般做大站，不喜欢弄太多图片，也用不着花花绿绿，中看就行。

一般站的色调搭配好了，网站一般色不要用太多，三种色就够了，总的来说，就是黑+白，红+黄，兰+青。差不多就是邻比色来组合。

不然成对比色的话，让人感觉刺眼，第一感觉就不好。不同的色彩用在不同的网站上，比方说，做黑客方面，一般着突出“黑”这方面。

做娱乐站，化妆品什么的，主要突出在红黄方面，做点严肃点的站，就要用兰色。

不过也有在自己站用多点色的，比方大家看下edu.qq.com

QQ的教育站，他的色就用得有点多，这站它就用到FLASH广告条来分割。

这样可以多种色共同搭配。。而又让人感觉不到乱的效果。。

每个广告条分开后，色就跟着变了

大家再看下www.6688.com这个站，我很喜欢这个站的，其一，色彩单调，内容丰富，布局更是蛮贴切的，没一点乱的样子。。

这样看起来，才像大站，大气。。。好了，这外表方面，总体说到这。。

下面讲到DIV+CSS，

CSS是什么，就是层叠样式表，那层叠样式表又是什么呢？

呵，这个，网上是这么定义的：CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。

DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

上面的都是网上COPY下来的。。不懂也没关系，概念上的东西。。

用我的方法来理解，就是用最少的图片就达到最好的美感效果，或者就是用代码去实现美工。。OK。

有些人说，我对这个一点也不会，不会，好说，先学点基础，

把这个看完，看完应该就差不多了，花一天的时间去看完，好好看，不求能写，但求能看得懂先http://www.52css.com/article.asp?id=185。

我们不一定要都会写，那没必要，只要会改，就OK，把别人的东西拿来自己用。

我在这就不讲CSS程序了，一个我自己也不太会，另一个网上多的是。我只讲我们要用到的.

前面的不算重点，所以都一笔带过。。

下面的大家都仔细看看。。

一般用到的就是一个框，然后把很多框组合起来，就成了整个页面。框一般是框上顶上面加上自己做的图片，或都加个色，这种很容易实现。

比如这个

差不多都是这样的框的。。先分析一下，

这个由一个外框，加上上面顶部的小图标。小图标下面是一个渐变。。

然后加上字，就成了。。

外边边框在CSS中这么定义

比方在TD里要加上个为灰色的框<td style="border:#939393 1px solid; ></td>就OK了

border:#939393 1px solid

这个就是外框，不过这个是四连形的，不是上面我们所看到的圆角的。

border:#939393 1px solid

这个对应的就是边框色，边框像素大小，边框类形

solid为实线。。。

刚才的TD也可以放在table里，有时候有是一个TABLE表里，套一个TD，这时候，如果在TABLE和TD里加这句的话，那边框就会重叠，

一般都是这样的<table><tr></td><td><tr></table>

这时就只要在TD里<td style="border-bottom:#939393 1px solid; bgcolor="#f2f6fb" ；></td

如果TABLE的框，加上TD的框，就会重叠起来

<td style="border-bottom:#939393 1px solid; bgcolor="#f2f6fb" ；></td>那么把TABLE的边框

border:#939393 1px soliD是这个的

那TD里就只取下边框就行。。

看这个，

这个今日话题的下面的那根线就是TD的下面的那根线

最外边是TABLE的框。

< border-bottom:#939393 1px solid; bgcolor="#f2f6fb" >回到这句，，

border-bottom就是下边框

#939393 1px solid;

这个就是对应的色，边框像素，线类型

等外边的框弄好了，

然后在上面那个TD中加个色彩，或者渐变，，

这样一个小的框就行了

我以前做的话，就是把这个先做好图片，在设这个图片为背景图片，再在上面加字，这样太不实在了。。

不过这些，我想大多数都会用，在这现丑了

注意，CSS中，属性和属性值间是用冒号(:)分开，而结尾都用分号(;)，这点要记住。

好了，方框这个容易会了，那么有人会问，那有些是圆角边框的，应该怎么实现呢。

这个说实在的，要我写，我也不会，不过我到网上找了个，自己改了一个。

/*改变边框色，只要把#08c替换为相应的色就可以了*/

#xsnazzy {background: transparent; margin:0.1em; width:178px;}/*这是框架宽度*/

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#ccc;/*这是上面下一点点线的色*/ border-left:1px solid #08c;/*这是左边圆角色*/ border-right:1px solid #08c;}/*这是右边圆角色*/

.xb1 {margin:0 5px; background:#08c;}/*这是上下线条色*/

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:1px; margin:0 1px;}

.xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;}/*这是两边线条色*/

</style>

这里放内容这里放内容这里放内容这里放内容

</div>

</div>

这里放内容这里放内容这里放内容这里放内容这里放内容这里放内容

这里放内容

</div>

</div>

大家先把这个放到一个页面中，去运行下，看看是什么样的。。然后自己再作相应的修改。。

要改的部分我都作了说明，关键看自己怎么去用。

大家把CSS部分保存到一个专门的以CSS为后辍的文件中。

然后用<link href="../css.css" rel="stylesheet" type="text/css" >把CSS文件包含进来。。。

然后在<table class="xxx"></table>应用。。就行了。这个TABLE可以是其它的你用应用CSS的地方。

也有不要应用的，直接把CSS文件包含进来就行

像这个

BODY {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: center

}

那么他声名的，就是这个页面所有的BODY里CSS样式都是这样的。。。

相应的，一般都会把tr,td都先CSS化。。

说了这么多，都好像还没见过DIV呢，

那么看到那个上面的<div id="xsnazzy"></div>没，

先自己定义一个#xsnazzy，在那里把这个名用ID引用就行了

如果在CSS中是以.dsnazzy{} 这样的话

那么要引用 <table class="xsnazzy"></talbe>

class可以放在TD TR等不同的地方。。

有的会问，有的方框上面是的渐变的，是用图还是用CSS实现的，这个当然用CSS也可以实现。

有这在网上下了代码，不过这个我没改，直接用就行了。

一、从上往下渐变

Example Source Code [www.52css.com]

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);

}

二、从左上至右下渐变

Example Source Code [www.52css.com]

body{

FILTER: Alpha( style=1,opacity=25,finishOpacity=100,

startX=50,finishX= 100,startY=50,finishY=100);

background-color: skyblue;

}

三、从左往右渐变

Example Source Code [www.52css.com]

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);

}

四、从上往下渐变

Example Source Code [www.52css.com]

style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

这个怎么用？

你放到一个页页先自己运行下。。。

然后看看是哪里渐变了，就自己怎么用了。。

最上面的那个TABLE里发生渐变，，那么你就可以把BODY里的CSS样式COPY出来，

再声明一个自己想要渐变的地方，比方说TD，然后放进去就行了。。

会用了圆角和方框，我想，基本上你的网页就不用太多图片了，除了个LOGO，BANNER外，都可以实现了。

关键看你自己怎么样把这些组合起来。。。

下面讲一个特殊效果，大家看一下网易的www.163.com

这个效果，就是CSS做出来，怎么样，你也可以把这个应用到你自己的网站上去。。。

我在网上找了很多，不过都没这样的效果好

然后自己根据一个改了一下，和这差不多了。。

代码有点多，不贴出来了，

我放共享里。。

说一点，那下面放内容的地方，你们最好是用一个<!---#include file=”new.asp”->这样的实现，每个新闻页面用一个，刚好布局我是这样做的，

如果说include对SEO有影响的话，那就只有想其他办法了。。。

最后大家看一下www.taobao.com最下面的那一漂亮的样式，告诉你，那个不是用图片的，全是CSS实现的。

就上面这个，这个不是图片做出来，都是用CSS实现的

我就讲这么多吧，讲得很表面，有可能对一些人没什么用，不过也希望能给大家带来一点点好处。。

我向大家介绍一个站，可以下CSS或去学，www.52css.com 好好的

如果有要做网站的，网站修改，网站美化，可以找我，QQ：110153877 海欧

出自SEO学院(27971958)