新闻正文

网站DIV+CSS优化与布局

来源:菜鸟做站    菜鸟做站  2007-5-10 09:57:32 网友评论 0 条 字体:[ ] ~我要投稿!

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

字串1

字串1

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

字串6

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

字串8

字串1

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

字串4

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

字串4

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

每个广告条分开后,色就跟着变了 字串1

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

字串5

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

下面讲到DIV+CSS,
CSS是什么,就是层叠样式表,那层叠样式表又是什么呢?

字串4

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

字串6

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。 字串6

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

字串1

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

字串1

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

字串6

字串6

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

字串1

字串6

把这个看完,看完应该就差不多了,花一天的时间去看完,好好看,不求能写,但求能看得懂先http://www.adsgg.cn/adsense/Index.html

字串6

字串9

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

字串3


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

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

字串7

字串9

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

字串8

字串4

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

字串5

比如这个
 

字串2

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

字串2

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

然后加上字,就成了。。

字串1

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

字串8

字串5

border:#939393 1px solid

字串3

字串7

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

字串8

border:#939393 1px solid
这个对应的就是边框色,边框像素大小,边框类形

字串6

solid为实线。。。

字串4

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

字串5

一般都是这样的<table><tr></td><td><tr></table>
这时就只要在TD里<td style="border-bottom:#939393 1px solid; bgcolor="#f2f6fb" ;></td

字串7

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

字串7

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

字串4

字串5

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

字串6

字串1

看这个,

字串6

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

最外边是TABLE的框。

字串3

字串5

< border-bottom:#939393 1px solid; bgcolor="#f2f6fb" >回到这句,,
border-bottom就是下边框

字串9

字串8

#939393 1px solid;
这个就是对应的色,边框像素,线类型 字串4

等外边的框弄好了,

字串5

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

字串9

这样一个小的框就行了

字串1

字串4

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

字串6

字串4

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

字串9

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

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

字串3

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

字串4

字串1

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

字串7

字串9

<style type="text/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>

字串4

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

字串8

<img src="1.gif" width="176" height="46">
这里放内容这里放内容这里放内容这里放内容
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div> 字串7

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

字串8

<img src="1.gif" width="176" height="46">
这里放内容这里放内容这里放内容这里放内容这里放内容这里放内容
这里放内容
这里放内容

字串6

</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

字串5


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

字串6

字串6

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

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

字串2

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

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

字串2

字串3

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

字串4

像这个
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:

字串4

字串9

center
}
}

字串2

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

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

字串8

说了这么多,都好像还没见过DIV呢, 字串1

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

字串3

字串4

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

字串4

如果在CSS中是以.dsnazzy{} 这样的话
那么要引用 <table class="xsnazzy"></talbe>

字串2

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

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

字串2

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

字串4


一、从上往下渐变

字串3

 Example Source Code [www.adsgg.cn]
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变

字串3

 Example Source Code [www.adsgg.cn]
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}
三、从左往右渐变

字串3

 Example Source Code [www.adsgg.cn]
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}
四、从上往下渐变 字串3

 Example Source Code [www.adsgg.cn]
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

字串4

 

字串9

字串7

这个怎么用?

字串5

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

字串1

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

字串1

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

字串5

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

字串3

字串7

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

字串6

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

字串5

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

字串7

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

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

字串2

然后自己根据一个改了一下,和这差不多了。。
代码有点多,不贴出来了, 字串8

我放共享里。。我向大家介绍一个站,可以下CSS或去学,www.adsgg.cn 好好的 字串4

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

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

字串8

字串4

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

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

字串3

字串3

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

字串6





上一篇:网站建设的十点注意事项
下一篇:怎样最大程度宣传您的网站
用户名:新注册) 密码: 匿名评论 [所有评论]
评论内容:不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
本栏搜索

  • Google 17Admin.Net
推荐新闻
关于本站 网站地图 Friefox Picasa 网站赚钱 联系方式  
Copyright 2006-2008 www.17admin.net All Rights Reserved
免责申明:一起站长吧(www.17admin.net)上的所提供文章和资源大部分来源于网络,为方便本人
及广大新手站长学习而收集整理而来。如有侵犯你的版权,请立即联系本站,本站将在3个工作日内删除 。