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

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

因为导航栏浮在左侧，我们需要添加一个“float: left;”到我们的“left”ID里，但同时我们需要添加它到我们的“content”ID里，因为它也浮在我们的主ID容器左侧：
以下内容为程序代码

#left {
width: 178px;
float: left;
}

我们填加这个到我们的Xhtml代码里：http://css.maxdesign.com.au/floatutorial/introdUCtion.htm
以下内容为程序代码

<div id="content">this is the right</div>

如果上面的这些讲解使你感觉有一定难度，我敢保证这些将会对你很有用：
* 更多的关于Float basics
* 关于Float的教程
当然，我们的内容现在是紧贴着左边的导航栏的，而我们想要的效果是空出一些空隙的，所以我们要填加一些内容容器的样式：
以下内容为程序代码

#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}

我们也可以用下面的简短的代码来实现：
以下内容为程序代码

#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}

这样写同样是严密的，第一个值是定义了上端空隙，第二个定义了右端空隙，第三个定义了底端空隙，第四个定义了左端空隙。如果我们添加了空隙，我们需要编辑我们的容器的宽度了，因为实际的宽度是随着这20像素（左边20像素，右边0像素）的空隙而变化的。所以我们需要改一下容器的宽为494，但同时因为我也想要右边出现一些空白，那样文件看上去不是紧贴着右边，于是再扣除15像素，就得到了现在的值479。
可能这时有朋友会说了：“喂，你为什么不只用一个紧靠的"width: 494px"再结合一个"padding-right: 15px"？”呵呵，不错的想法，其实开始时我也是这样做的，而且在 Safari, Firefox and Mozilla浏览器上都能显示的很正常，但在IE浏览器上就不行了，在IE浏览器上显示时，整个内容跳到了我的导航栏的下面（即left ID容器的下面）。显然在IE中它没有留下足够的空白区来使右边正好适合。目前我只能这样解释。通过这样的小技巧同样是完美的在各个浏览器上显示。

添加标题
要添加标题，我们要添加一个header 标签在我们的Xhtml代码里面：
以下内容为程序代码

<h2>This is the title</h2>
上一页 [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

特别推荐