网站公告列表

  没有公告

加入收藏
设为首页
繁體中文
您现在的位置: 五月雪电脑教程网 >> 网络技术教程 >> 网站制作 >> 正文
[组图]网页设计基础入门:Div+CSS布局入门教程        ★★★
网页设计基础入门:Div+CSS布局入门教程
作者:佚名 文章来源:本站原创 点击数: 更新时间:2007-4-14 17:29:50
关键字信息载入中...
广告载入中...
>

  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>

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

文章录入:lwyx    责任编辑:lwyx 
【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
网 络 热 门
网络热门信息载入中...
最 新 热 门
最新热门信息载入中...
最 新 推 荐
最新推荐信息载入中...
相 关 文 章
相关文章信息载入中...
相 关 评 论
相关评论信息载入中...

Copyright @ 2005 2006 五月雪电脑教程网
中华人民共和国信息产业部ICP备案号: 闽ICP备 05014026
教程网技术支持:QQ:75484101 友情提供
统计进行中...统计进行中...

文字环绕图片在CSS中的高…
滑动门技术在CSS中的高级…
如何兼容IE和Firefox浏览…
DIV+CSS常见错误汇总
CSS:简化CSS中属性的示例…
IE7对css选择器的改进
css布局实例:网页布局的…
多种浏览器下CSS控制DIV…
一句css代码实现黑白素色…
使用DreamWeaver编写CSS…
 姓 名:
 评 分:
1分 2分 3分
4分 5分
 内 容: