上海建站,上海企业网站建设,品牌网站建设-(热线400-700-0251)

>>上海建站,上海企业网站建设,品牌网站建设,上海纵易网络科技有限公司www.1861web.com 电话:021-69106465 全国热线:400-700-0251

Apr 08 2010

新手站长做网站:网站建设几步走

Posted by admin

 

关键字:网站建设 网站 站长 新手 内容 信息 排版 整体 策划 用

现在想建站的人很多,做站长的人也很多,不仅企业要建站,个人也要建站。网站不是说建就能建好的,不是注册一个域名,做好几个页面,租用一个空间就完事了。要建好一个网站,从一开始就要做好多工作:

一、定位自己的网站

网站定位好比是考大学选专业,要审时度势,根据自身的条件、地域的条件等来决定网站的方向,比方说是做地方性餐饮类网站的,那就要充分了解你这个地区有没有类似的网站,要是没有,很好,你有了第一步成功的希望;要是有,那就要看你有没有这个信心做得比它更好。还要关心你这个地区的群众的需求,当然,需求量小的话,你做得再好得到的效果也是很小的。所以说做网站要先定位,从地域上、人群上、方向上、内容上去定位你的网站。

二、搜集各类信息

网站定位好了之后,就要搜集相关的信息。信息当然要多多益善,在多的基础上更要精益求精,搜集到差不多的时候还要进行几次的删选,因为你网站的初次内容基本上是要用这些信息去填充的。信息(也就是网站的内容)之所以重要,是因为它会为你带来和维持用户,游客通过一些渠道知道了你的网站,点击进入了你的网站,如果你的网站信息很少,他们只会浏览下后关闭了你的网站,之后基本上不会再上了,因为你的网站没有他想要的东西,对他而言没有吸引;换句话说,你的网站内容丰富,那游客很有可能就会经常上了,成为你的常客,当然,日常的维护和信息的更新是必不可少的。所以说内容是网站的血液,为你带来的是越来越多的流量和用户。

三、网站的整体策划

信息准备好之后就是网站的整体策划了。策划网站的整体风格、网站的前台内容、前台流程图、后台内容、后台流程图、网站开发工具、网站功能等。这里就可以参照一些你喜欢的,或者是相关的网站来整体策划。整体风格会给用户带来第一的印象,前台内容能吸引用户浏览你的网站,流程图可以理顺首页和内页的连接,有更加好的用户体验。网站的整体策划能更好为网站建设服务。

四、网站的内容排版设计

网站的内容排版包括首页的排版、频道页的排版和内页的排版,按照网站内容的主次、特色为重点来排版设计自己的网站,这个在这里就不详说了,每个人都有自己的独特想法和见解。

五、网站的主体建设

网站的主体建设就是网站的制作了,按照前面做好的工作来制作你的网站。

六、网站的推广优化

包括关键词的优化、在其他已具有相当知名的网站上的推广和交换连接、和其他站长的经验交流都是非常经济实惠的前期推广,可以有助于比较高地提高在搜索引擎上的排名。毕竟相当多的用户都会去搜索平台上搜索他感兴趣的东西,然后有选择性地点击。网站的日常维护也是要花费相当多的时间和精力的。当然如果是要大力推广的话,花钱去买点搜索上的排名服务,会让你的网站在相关的搜索上排名首页或者非常靠前。

一个成功的网站有很多成功的因数,必须要考虑周全,策划和推广则极其重要。

Feb 21 2010

网站建设专家-上海纵易网络科技有限公司

Posted by admin

上海纵易网络科技有限公司注册资本100万元成立于2006年,是一家专业致力于为企业信息化提供互联网应用服务的高新技术型企业。历经四年多时间的摸爬滚打,从失败中总结经验教训,脚踏实地,一步一步完善自己,时至今日,可以说纵易网络现在在网站建设、域名注册、虚拟主机、服务器租用与托管、企业邮局、网站推广等全系列互联网服务方面可以满足不同企业不同的需求,让企业在信息时代稳握无限商机。

  诚信是这个热血的团队对您的唯一承诺。作为专业的电子商务基础及增值服务商,纵易网络为提供更加高效的服务以及最佳的网络产品,积极开发相关的先进技术与产品,在众多的网络服务及网络产品中,纵易网络一直秉持一个观念:我们只提供最高效的产品和服务,我们相信最诚挚的服务,会换来最坚固的合作伙伴,请相信纵易网络就是您上佳的选择。
拥有高素质的核心管理层和经验丰富的技术团队。凝聚了一批行业内最优秀的年轻人,他们来自IT技术的前沿阵地,富有创造力和奉献精神,是我们领先的前提保证,也是我们最重要的财富。
质量和信誉是企业存在的基石。我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好服务,我们努力开拓更好的视野,通过不懈的努力,我们赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务于客户。
为了使消费者权益、意志得到最完整的体现,一方面,纵易网络科技通过核心技术、24/7技术支持;另一方面,通过契约化承诺经营,使消费者权益得以在法规、制度层面得到终极保障。
纵易网络将继续用自己独特的创意和专业的眼光为客户提供服务,欢迎您与我们携手合作!
我们的理念:专业服务 诚信经营 做最好的产品 做最好的自己
我们的定位:全方位的高端网站解决方案专家
我们的优势:多年的互联网经验·先进的设计理念·专业的设计开发团队·完整的售后服务体系·广大的客户群并且有良好的声誉!

Feb 18 2010

经典音乐

Posted by admin

经典音乐

2006年08月14日 星期一 11:49 A.M.

  1,马修连恩--汇流confluence(当萧遇见爱尔兰笛,琵琶揉和班鸠,二胡交织小提琴。。。这是中西乐器合璧的经典之作)

  2,绵雪 绝对优美的轻音乐好听(钢琴曲)
  
  3,cold play - beautiful world(珍藏很久的一首曲子,这张专辑叫《环球之旅》,全部都是大师级人物的超级作品,这首曲子就《美丽的世界》,听听就知道意境了~! )
  
  4,和兰花在一起 (懂音乐的朋友应该对它耳熟能详了吧,这首很飘逸的曲子,来自Yanni的With an Orchid。 专辑:If I Could Tell You)
  
  5,Peace of Mind (凄美的音乐,如同一位少女正在述说一个悲伤的爱情故事。有位朋友说,每次听到这首曲子就想落泪。)

  6,Secrets of Life (一开头那几句男声真的是很打动人心,空旷,清新。。。。。。)

  7,i miss you(一首非常纯净的钢琴曲 专辑:dreaming)

  8,森林中的一晚(一尘不染的音符,超凡脱俗的音色,带你进入空虚缥缈的音乐世界。。。)

  9,Je m'appelle Hélène[我叫伊莲娜]-- 法国连续25周冠军单曲(法国人对艺术的期许,是举世有目共睹的,法语歌曲在近年大放异彩,尤其是法语流行歌曲第一代言人Hélène 「伊莲」清纯健康的外型,低沈浪漫的嗓音,不仅风靡了整个欧洲大陆,从巴黎到东京,从台湾、香港到中国,也弥漫在一股「伊莲」旋风里。“伊莲”是法国音乐界 近25年来炙手可热的代名词,法语歌曲代言者。她低沈浪漫的嗓音配合法文的咬字嚼音, 体验超乎想像的音乐 美感。 她在法国当地的地位,如同我们听见“邓丽君”般,其歌词中带有法式生活哲学以及民谣式曲风营造出歌曲的耐听~!)

  10,that's why you go away 歌手的嗓子真是棒!

  11.班得瑞乐团bandari-日光海岸6-childhood memory(让你怀念童年,让你的心沉静,在喧嚣的城市中给你的心灵一丝宁静)

  12.蒂朵dido-06-thank you(不多说了,强烈推荐)

  13.hiphop - eminem(阿姆) - stan ft dido(音乐和第12首是有一些重复的,但是这首更是我喜欢的,更震撼)

  14.艾微尔~超复杂complicated(个人认为戴上好的耳机听起来更有感觉)

15.感人配乐 kiss the rain-夏日香气(钢琴曲)

16 韩语歌曲--不可不信缘(假如爱有天意)主题歌曲 (听完这首歌才发现原来真正的伤感歌是这样的,同志们,该爬出井沿看看外边了)

17.劲舞团-英文经典歌曲-o'zone-dragostea din tei欧洲酒吧近期最流行(相必这首歌听的人就多了)

18.天籁之音-veni redemptor gentium(心境)-- 藏北草原 满天繁星 风中 飞舞的优美的女声

19.法语-helene segara-encore une fois----强烈推荐,绝对经典-----(专辑:Humaine法国当红歌手Helene Segara 专辑,她的音乐和她的人一样别有风情。她的嗓音并不是十分突出,但声音中有一种魅惑迷离的特质,喜欢她唱带有些异域感觉的歌曲,和她的声音气质相符;也喜欢听她用软糯的法语唱都会爵士,情不自禁的就醉过去。。。。。。)

20.孙楠-拯救 (关于小南,就喜欢他这一首呵呵,比较通彻)

21.我对于你你对于我(经典伤感韩国电影《假如爱有天意》插曲--------听听就知道了~

22.月光女神 (这是我哥非让我打上去的,我嘛,还可以! 相信有许多人一听就很耳熟,是的,非常经典的)

23.dj-we will rock you经典慢摇.超好听 --这是别人介绍我的,很经典的歌曲

24.ginkgo tree 银杏树 --- (那一首首诗,一声声Ginkgo Tree,Ginkgo Tree......在天空象鸟儿一样低低地盘旋。)

25.让风去安抚他们受伤的心灵MTV (必须是MTV,看看舒鑫大哥的吉他水平,让许多吉他高手汗颜的.......真好听)

26.2004大韩剧--我的女孩-爱在阳光里(韩国歌曲,还不错)

27.Don't lie(最好去下后舍男生的MTV,歌曲确实很棒,不多说)

28,陶喆-melody (陶喆的也就喜欢这一首,我兄弟第一次听就哭了,大家听听,不错)

29.Bressanone 专辑:BleedingWolves[狼]要讲述MatthewLien其人其事,必须首先提及1995年。这一年,音乐史上诞生了一张具有重要意义的专辑《BleedingWolves》(狼)。这张以保护野生动物为主题的新世纪音乐作品,是在MatthewLien的一手操持下,由30位音乐家共同参与打造而成的。而其中的主题曲“BleedingWolves”则是MatthewLien在1994年创作的。《BleedingWolves》为MatthewLien辉煌的音乐生涯下了定义:那是在音乐旷野里发出的空灵而又厚重的寂静之声。
这首歌是整张专辑里少有的由他亲自演唱的,令我惊讶的是,Matthew的感情投入之深,叫人意外;他的声音带着一丝哀伤,略有些沙哑,不声嘶力竭,却充满力量,歌词往往流露出宁静安详的意境。。。。。。

30.songs from a secret garden
这是神秘园〔Secret Garden〕95年发表的一张专辑,在我印象里这是最经典的一张。
这首曲子异常伤感,凄美,舒缓,充满了思忆,不经意之间流露出些许多的忧愁,令人不得不沉醉于其中,堪称经典~!!!

Feb 18 2010

web2.0中流行的设计元素:颜色

Posted by admin

web2.0中流行的设计元素:颜色

2006年12月23日 星期六 08:29 P.M.

颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户为中心,群体智慧,分享等等,等等.同时顺应这些需求,一些顶尖的设计师和开发者赋予并领导了一些色彩流行趋势.我凭感觉做了部分归纳和收集,心理没大有底,把能想到的列出来希望跟大家一起探讨>>再做补充吧!

★淡淡的浅色系及延伸应用

此类颜色似乎最早被应用在一些文档处理软件比如word,和操作系统里(比如MacOSX)用于分类归档,标记,或者突出显示使用.此类颜色给人的感觉很环保,不伤眼睛,而且对比度恰到好处,既可以有效区分,又不会显的太过突兀.
google,Yahoo更为成熟的运用了这些颜色.MSN在新版网站中也设置了Simple White主题选择,并且新的LIVE系列产品更是对那种淡淡的兰色与1PX线条情有独忠~另外一些新兴的WEB-base办公软件也大量选用了此类颜色!事实证明,这些颜色的运用取得了大部分用户的认可并领导了趋势!
例子:GMail,yahoo360,live.com,start.com,netvibes,rember the milk

★柔软舒适的过度色

此类颜色不知道跟WEB标准的流行有没有关,包括一些优秀的CSS陈列馆网站,还有著名的simplebit的设计作品,都大量运用了这种柔软的过度色,包括blog的一些优秀THEME 也会经常看到.这让人想到苹果水晶效果的转变,从最新的TIGER系统中我们可以发现,苹果在逐渐弱化那种清澈通明的水晶和金属拉丝效果,而向更直观硬朗的过度色做转变!说白了就是越来越simple而不是玩那么多花样.
例子:rollyo odeo

Feb 18 2010

Div CSS布局入门教程

Posted by admin

Div CSS布局入门教程

2006年12月23日 星期六 08:19 P.M.

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。

下面,我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:

  1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;
  2、内容部分又可分为侧边栏、主体内容;
  3、底部,包括一些版权信息。
  有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。

  DIV结构如下:
  │body {} /*这是一个HTML元素,具体我就不说明了*/
  └#Container {} /*页面层容器*/
     ├#Header {} /*页面头部*/
     ├#PageBody {} /*页面主体*/
     │ ├#Sidebar {} /*侧边栏*/
     │ └#MainBody {} /*主体内容*/
     └#Footer {} /*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。

接下来我们在桌面新建一个文件夹,命名为“DIV CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。

下面,我们在<body></body>标签对中写入DIV的基本结构,代码如下:

<div id="container">[color=#aaaaaa]<!--页面层容器-->[/color]
  <div id="Header">[color=#aaaaaa]<!--页面头部-->[/color]
  </div>
  <div id="PageBody">[color=#aaaaaa]<!--页面主体-->[/color]
    <div id="Sidebar">[color=#aaaaaa]<!--侧边栏-->[/color]
    </div>
    <div id="MainBody">[color=#aaaaaa]<!--主体内容-->[/color]
    </div>
  </div>
  <div id="Footer">[color=#aaaaaa]<!--页面底部-->[/color]
  </div>
</div>

为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:100%}

/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。

关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):

1、请养成良好的注释习惯,这是非常重要的;

2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;

3、讲解一些常用的CSS代码的含义:

font:12px Tahoma
这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;

margin:0px
也使用了缩写,完整的应该是:

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

margin:0px 0px 0px 0px

顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,

另外还有以下几种写法:
margin:0px auto;
说明上下边距为0px,左右为自动调整;
我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。

text-align:center
文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。

background:#FFF
设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
background:#ccc url('bg.gif') top left no-repeat;
表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
top left
表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素,Y座标为100像素的精确定位;
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

4、如何使页面居中?

大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
是因为我们在#container中使用了以下属性:
margin:0 auto;
按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。

5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册。

当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了。

在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式代码:

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}

样式说明:

a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}

这两项分别是控制页面中超链接的样式,具体我就不说明了,请大家参阅手册。

#container {width:800px;margin:10px auto}

指定整个页面的显示区域。
width:800px指定宽度为800像素,这里根据实际所需设定。
margin:10px auto,则是页面上、下边距为10个像素,并且居中显示。
上一章中我们讲过,对层的margin属性的左右边距设置为auto可以让层居中显示

接下来,我们开始制作TOP部分,TOP部分包括了LOGO、菜单和Banner,首先我们要做的就是对设计好的图片进行切片,以下是在FW下完成的切片:

我将TOP部分切片为两部分,第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色,这里我于是将这一部分保存为GIF格式,调色板选择为精确,选择Alpha透明度,色版为白色(此处颜色应与背景色相同),导出为logo.gif,图像宽度为800px。

到这里,有的朋友就说了,* 为什么要使用GIF格式?使用JPEG不是更好吗?
因为GIF格式的图片文件更小,这样能使页面载入的速度更快,当然使用此格式之前必须确定图片并没有使用太多的颜色,当我们使用了GIF格式时,从肉眼上并不能看出图片有什么太大的变化,因此这是可行的。

* 接下来的Banner部分还能使用GIF格式吗?
答案是不能,因为Banner部分是一个细致的图片,如果使用GIF格式颜色会有太大的损失,所以必须使用JPEG格式,将文件导出为banner.jpg。

* 合理的切片是非常之重要的,因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

切好片后,我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下:

  <div id="menu">
   <ul>
    <li><a href="#">首页</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">博客</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">设计</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">相册</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">论坛</a></li>
    <li class="menuDiv"></li>
    <li><a href="#">关于</a></li>
   </ul>
  </div>
  <div id="banner">
  </div>

为什么要这么写呢,因为对菜单使用列表<li>形式,可以在以后方便对菜单定制样式。

而为什么要添加以下代码呢?
<li class="menuDiv"></li>
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式,例如预览图中的竖线分隔。

然后我们在css.css中再写入以下样式:

/*页面头部*/
#header {background:url(logo.gif) no-repeat}

样式说明:
#header {background:url(logo.gif) no-repeat}
给页面头部分加入一个背景图片LOGO,并且不作填充。

这里,我们没有指定header层的高度,为什么不指定呢?

因为header层中还有菜单和banner项,所以层的高度暂时是未知的,而层的属性又可以让层根据内容自动设定调整,因此我们并不需要指定高度。

使用列表<li>制作菜单

开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。

这一节我将告诉大家如何用列表<li>来制作菜单。

<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
</ul>
</div>

以上是这部分的结构,有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧,它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

还有一点需要大家一定要分清楚的,当在HTML中定义为id="divID"时,在CSS对应的设置语法则是#divID{} ,如果在HTML中定义为class="divID"时,则在CSS中对应的设置语法是.divID。

如果id="divID"这个层中包括了一个<img></img>,则这个img在CSS中对应的设置语法应该是#divID img {},同样,如果是包含在class="divID"这个层中时,则设置语法应该是.divID img {},这一点希望大家要分清楚了。

另外,HTML中的一切元素都是可以定义的,例如table、tr、td、th、form、img、input...等等,如果你要在CSS中设置它们,则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

按照上面的介绍,我们先在css.css中写入以下代码:

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

解释一下:

#menu ul {list-style:none;margin:0px;}
list-style:none,这一句是取消列表前点,因为我们不需要这些点。
margin:0px,这一句是删除UL的缩进,这样做可以使所有的列表内容都不缩进。

#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示,因此使用了浮动属性(float)。

到这一步,建议大家先保存预览一下效果,我们再添加下面的内容,效果如下:

这时,列表内容是排列在一行,我们在#menu ul li {}再加入代码margin:0 10px

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左:10px,右:10px),预览的效果如下:

现在,雏形已经出来了,我们再来固定菜单的位置,把代码改成如下:

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px}

这时,位置已经确定了,可是构思图中,菜单选项之间还有一条竖线,怎么办呢?
别忘了,我们早就已经留好了一个空的<li class="menuDiv"></li>,要想加入竖线就使用它了。
按照上面说的方法,我们再添加以下代码:

.menuDiv {width:1px;height:28px;background:#999}

保存预览一下,竖线是否已经出来了?关于这段代码就不多讲了,应该是很容易理解的。

不过,菜单选项的文字却在顶部,我们再修改成以下代码:

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

关于display:block;line-height:28px大家可以去参阅一下手册,我就不多讲了。

效果基本上已经实现了,剩下的就是修改菜单的超链接样式,在css.css中添加以下代码:

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

这个也不多说了,没什么好说的了,最后的效果如下:

这一节到这里就完毕了,顺便把素材提供给大家:
构思图:点击下载
HTML和CSS源文件:点击下载

这一节里面,主要就是想告诉大家如何使用好borderclear这两个属性。

首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:
<div style="border-bottom:1px dashed #ccc"></div>

大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。

<div id="banner"></div>

以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}

通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。

<div id="pagebody"><!--页面主体-->
<div id="sidebar"><!--侧边栏-->
</div>
<div id="mainbody"><!--主体内容-->
</div>
</div>

以上是页面主体部分,我们在css.css中添加以下样式:

#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}

为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:

border:1px solid #E00;
height:200px

保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160 2(border) 570 2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。

而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。

CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。