巧用DIV+CSS做站
|
4月12晚8点：巧用DIV+CSS做站 主讲 海欧-东莞(110153877)
1内涵，就像一个人的才学。这站是做什么的，要放些什么，这是主要的。 2外表，也叫长相，当别人一个站来这里，就觉得有种归属感，就像美女看到帅哥，帅哥看到美女一样，都不免要回头的。。 3身材，也就是站的布局，也是我要讲的重点，现在一个好看的网站，如果光是用图片做出来，然后再就是把图片切片，用背景，通常新人都这样做，我之前也是这样做的。不过这样太不好了，打开速度慢，另一个是对优化不好。现在都在用DIV+CSS做站。这DIV+CSS是啥东本。等下说。。 4打扮。这个应该都知道，三分长相，七分打扮。想从丑小鸭变天鹅,就从这步开始。这也是我们常说的 这内涵，打扮，都差不多都有人讲过，今天就主要就外表+身材来讲。
先讲下网站美化，等下再讲CSS 而一般做大站，不喜欢弄太多图片，也用不着花花绿绿，中看就行。 一般站的色调搭配好了，网站一般色不要用太多，三种色就够了，总的来说，就是黑+白，红+黄，兰+青。差不多就是邻比色来组合。 不然成对比色的话，让人感觉刺眼，第一感觉就不好。不同的色彩用在不同的网站上，比方说，做黑客方面，一般着突出“黑”这方面。 做娱乐站，化妆品什么的，主要突出在红黄方面，做点严肃点的站，就要用兰色。 不过也有在自己站用多点色的，比方大家看下edu.qq.com QQ的教育站，他的色就用得有点多，这站它就用到FLASH广告条来分割。 这样可以多种色共同搭配。。而又让人感觉不到乱的效果。。 每个广告条分开后，色就跟着变了 大家再看下www.6688.com这个站，我很喜欢这个站的，其一，色彩单调，内容丰富，布局更是蛮贴切的，没一点乱的样子。。 这样看起来，才像大站，大气。。。好了，这外表方面，总体说到这。。 下面讲到DIV+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中这么定义 border:#939393 1px solid 这个就是外框，不过这个是四连形的，不是上面我们所看到的圆角的。 border:#939393 1px solid solid为实线。。。 刚才的TD也可以放在table里，有时候有是一个TABLE表里，套一个TD，这时候，如果在TABLE和TD里加这句的话，那边框就会重叠， 一般都是这样的<table><tr></td><td><tr></table> 如果TABLE的框，加上TD的框，就会重叠起来 <td style="border-bottom:#939393 1px solid; bgcolor="#f2f6fb" ；></td>那么把TABLE的边框 那TD里就只取下边框就行。。 看这个， 这个今日话题的下面的那根线就是TD的下面的那根线 最外边是TABLE的框。 < border-bottom:#939393 1px solid; bgcolor="#f2f6fb" >回到这句，， #939393 1px solid; 等外边的框弄好了， 然后在上面那个TD中加个色彩，或者渐变，， 这样一个小的框就行了 我以前做的话，就是把这个先做好图片，在设这个图片为背景图片，再在上面加字，这样太不实在了。。 不过这些，我想大多数都会用，在这现丑了 注意，CSS中，属性和属性值间是用冒号(:)分开，而结尾都用分号(;)，这点要记住。 好了，方框这个容易会了，那么有人会问，那有些是圆角边框的，应该怎么实现呢。 好了，方框这个容易会了，那么有人会问，那有些是圆角边框的，应该怎么实现呢。 这个说实在的，要我写，我也不会，不过我到网上找了个，自己改了一个。 <style type="text/css"> <div id="xsnazzy"> <img src="http://www.admin5.com/article/20070413/1.gif" width="176" height="46"> <div id="xsnazzy"> <img src="http://www.admin5.com/article/20070413/1.gif" width="176" height="46"> </div>
要改的部分我都作了说明，关键看自己怎么去用。 大家把CSS部分保存到一个专门的以CSS为后辍的文件中。 然后用<link href="../css.css" rel="stylesheet" type="text/css" >把CSS文件包含进来。。。 然后在<table class="xxx"></table>应用。。就行了。这个TABLE可以是其它的你用应用CSS的地方。 也有不要应用的，直接把CSS文件包含进来就行 像这个 那么他声名的，就是这个页面所有的BODY里CSS样式都是这样的。。。 相应的，一般都会把tr,td都先CSS化。。 说了这么多，都好像还没见过DIV呢， 那么看到那个上面的<div id="xsnazzy"></div>没， 先自己定义一个#xsnazzy，在那里把这个名用ID引用就行了 如果在CSS中是以.dsnazzy{} 这样的话 class可以放在TD TR等不同的地方。。 有的会问，有的方框上面是的渐变的，是用图还是用CSS实现的，这个当然用CSS也可以实现。 有这在网上下了代码，不过这个我没改，直接用就行了。
Example Source Code [www.52css.com] Example Source Code [www.52css.com] Example Source Code [www.52css.com] Example Source Code [www.52css.com]
这个怎么用？ 你放到一个页页先自己运行下。。。 然后看看是哪里渐变了，就自己怎么用了。。 最上面的那个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) |
