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

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

float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}

同样的，我们用一个class来设置它的样式，是因为我们将要能在我们的网页上多次应用这个样式。我们的图像是浮在我们的文本DIV里的，所以我们添加： "float:right"。然后我们设置一个7个像素的空隙在图像的四周，并设置了一个白色的背景，这样将颜色一个白色的区域围绕着图像。然后，我们添加了一个1像素的边，颜色为#bac1a3。你也可以再添加其它的Class为一个左对齐的图像，比如叫它“.imageleft”并用同样的属性和值，做为浮动的部分，你要修改"float: right" to "float: left".。
这是最后的结果

更正：在我们开始第七部分之前，我想纠正一个我的小错误，我告诉你们在DIV标签之间放那个文本的样式是不正确的语法，它应该是放在段落之间的。这样当CSS样式没找到的时候，看上去仍然还可以。这样做允许你使用顶部或底部的空白来调整垂直方向的段与段的间距。这种方法我们同样不需要再用换行标签了。
不用这种方法，在今天的这个第七部分，我们将填加一个紧贴着浏览器的底部的网页脚，我在这个部分还是不讲添加喜欢的链接的内容，因为它的内容太多了。总之，这将是一项坚具的工作，要进行大量的阅读。
首先，我必须告诉你，完全用CSS建立一个紧贴你的浏览器窗口的页脚和用表格来设计是相当有区别的。不幸的是，因为safari是如此的年轻的一个浏览器，有些东西仍然会丢失，就像我们需要为网页脚设置的min-width 和 min-height属性。不过一个好消息说在下一个版本的safari将支持这些。更多的关于垂直定位的和建立网页脚的知识可以看这篇文章,实际上，我推荐你先阅读一下再继续下面的内容，因为它把这一切解释的那样清晰，在这儿我只能讲到这么深入了。
阅读完那篇文章之后，你将知道我们需要建两个主要的容器来完成这个工作，1个容器存放所有的内容，另一个存放网页脚。我们的包括了整个内容的容器是"#container" id，这是非常靠前的一个DIV在代码里（在body标签之后），结束于body标签之前。换句话说我们的网页脚DIV应该放置在紧挨"#container" id的DIV下面。
以下内容为程序代码

<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>

这是我们为网页脚添加的CSS代码：
以下内容为程序代码

#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}

我们添加了一个网页脚，背景色为浓绿色，在顶部给它一个9像素的边框。与我们的框架是一个颜色，我们定义了宽度并添加了“clear: both;”，这意思是在网页脚的左右两边不允许浮动的元素！网页脚的对齐方法是和我们的container一样的，为“margin: 0px auto;”，这就出现了同样的居中效果。我们添加了5像素的空白在顶部和底部，为的是留一些空白在文本周围。网页脚的内容是相对的，关于元素的定位可以在这里(W3C的网站)看到更多的解释！
上一页 [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

特别推荐