设计一个基于CSS的网页模板

日期：2007年8月10日作者：查看:[大字体中字体小字体]

提供一些有用的资源下载的网站链接：
Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from Emigre
Adobe ornamental fonts
free Dingbats fonts
总结：
这一部分我们就已经把网页顶部logo和Banner的设计做了一个小的示范了，最主要的几个要点就是色彩的搭配和背景的选取以及小装饰图片的添加和滤镜的运用，大家不妨也按照这个思路去进行一些尝试，也欢迎大家大胆的不要吝啬的贴出自己的链接！

现在油漆桶和铅笔刷应该扔到一边了，我们进行第四部分的内容，在这一章节中，将要集中讲一下DIV这个容

器的设计。
你需要问的问题是，我们设计的不同部分是什么？一个页面由哪些不同的部分组成？报着这个想法，我将在

这里回答这些问题讲解一下如何为网页进行切片，如果你是一个网页设计师，这可能对你来说是很简单的问

题，因为你已经在过去的日子里把表格运用的如火如荼，但现在你要思的是如何不用表格而用DIV容器及CSS

和Xhtml来控制实现一个不但文件体积小而且内容和页面更具亲和力的效果。
这是通常的我们见过的网页构成：
页面头（the header）
页左栏（the left）
页主体内容（the content）

导出需要的gif和jpeg图像
这些是用到你需要导出为gif或jpeg图像不同

的素材
* 1. 页面头文件header
* 2. 导航按扭背景bg_navbutton
* 3. 导航按扭bg_navbutton_over
* 4. 普通小图标bullet_extlink
* 5. 标题前小图标bullet_title
好了，你大概会想，“背景图片怎么办？”，不错，它没有在这儿列出来，这需要一点儿说明，我们想要一

个严格的解决方案，因为我们仍然想要在窗口大小变化的时候内容居中，

这就是你将导出的背景，这是一个1600像素宽，5像

素高的图片（这已经是足够了，除非你是一个富人，用着30英寸的苹果机显示器）。

使用CSS设置背景
这就是我们要使我们的背景居中的CSS
以下内容为程序代码

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}

我们的背景图是一个5像素高的“线条”，它在垂直方向上延伸重复就铺满了整个页面。在水平方向是以浏览

器窗口的50%水平方向开始平铺线条，上边距为0。Background-attachment: fixed,意思是背景将不随着内容

的滚动而变化，是固定的。我们Body标签作为我们的放置这些参数的容器，是因为它要应用到整个页面。
观看这时的结果：点这里

添加我们的第一个DIV
现在我们就要依次添加我们的DIV了。
这是我们的网页头的CSS
以下内容为程序代码

#header {
text-align: center;
上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] 下一页
设计一个基于CSS的网页模板相关文章：
·路由器安全设置详解
·ADSL猫路由设置方法
·校园网网络方案设计及分析
·某大学校园网设计方案六(组图)
·VB+Access设计图书管理系统
·宽带共享该怎样设置无线路由器
·综合布线系统工程设计参考大全
·如何进行局域网设置
·静态路由的设置及相关命令
·VB设计有语音报时和报警功能的闹钟
设计一个基于CSS的网页模板相关软件
·天下第一签个性签名设计系统 V1.2
·AUTOCAD经典设计作品 V2.0
·局域网共享设置梦想吧专用版
·C/C++程序设计学习与实验系统 V2008.2
·《经典FTP服务器架设》教学视频录象
·机械设计手册 V3.0
·星智名片设计系统 V1.1
·经典的地产广告设计欣赏一（PSD分层)
·施工组织设计软件(标书制作系统) V6.2
·WIN98启动盘启动USB设备程序 V1.0

上一篇:XML配置文件的读取处理

下一篇:CSS:word-spacing

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

设计一个基于CSS的网页模板

精品推荐

热点TOP10

特别推荐