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

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

}

我们用一个ID符号建立我们的网页头的容器DIV，一个ID符号总是对应仅有的一个网页上的元素。一个对此ID

的CSS描述必须是唯一的伴随这个文件，我们的header是需要居中的，所以我们用到了"text-align:

centered;"，这段代码就是添加header的内容的。
以下内容为程序代码

<div id="header"><img src="http://www.QQread.com/web-standard/images/header.jpg"
alt="My blog" width="692" height="90" /></div>

你可能注意到这时预览结果时的图像没有在最顶上，所以我们在body标签里还要加上 "margin: 0"

and"padding: 0"
以下内容为程序代码

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

观看结果：点这里
如果以上讲的这些对你非常陌生的话，那么你最好阅读一下这个

完整的关于CSS的介绍以便有一个更好的了解对

我们现在做的事情，祝你好运！

在我们以前的几个部分里，我们做过了一些很基本的CSS代码，如果是第一次来这儿的朋友可以先看看前几部分的内容：第一部分、第二部分、第三部分、第四部分，今天我们的教程里将来实现左侧导航栏的制作。
但在开始之前，当建立一个网页的时候，我们必须总是尽可能让人容易理解的写语法，如果你看了第四部分内容的评价的话，你可能注意到有人提出了一个建议是，使用h1标签元素是更好的对于网页头部分，因为那是更容易理解的代码并且它使一个站点更具有亲和力容易更好地被搜索引擎收录。想当然这些更重要一些，所以我已经把我们的代码按照这种方法来修改了。

图片更换的技术
这个技术实际上叫做图像替换技术，意思是我们用一个文本来替换真实的图片在我们的html代码中。页面头的图片在支持CSS（当我们使用“ background: url(images/header.jpg);”来设置背景图片时）的浏览器里将会显示出来，并且文本是隐藏的（因为代码：“text-indent: -9999px;”），因为我们的CSS代码将文本定位到了我们可见区域之外。在旧的浏览器上或是在盲人用的屏幕阅读器上你将会看到文本的替代，我们用这种更易理解的代码。
以下内容为程序代码

h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}

网页头的背景图像的宽和高是必须定义一些空间的。为了确保我的们的图像是很精确的置于我们的页而后顶部位置 margin: 0; padding: 0;也是必须的，此外，我在body标签中放置text-align: center;是因为所有的内容都将要是居中的。然后，有些内容是不居中的，所以我们要添加text-align: left;在那里。我们的这个容器margin: 0px auto;意思是它将出现在一个最顶端（0px）和居中的（auto）。
上一页 [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

特别推荐