彻底弄懂CSS盒子模式之一(DIV布局快速入门)(4)
作者:唐国辉 来源:蓝色经典 发布时间:2007-05-11 17:03:00
标签:css,div,盒子
内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。其样式代码如下:
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
最后回到样式开头大家会看到这样的样式代码:
* {
margin: 0px;
padding: 0px;
}
这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>
结构代码是这样的:
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^
本文完全为个人原创作品,转摘请注明作者,作者:唐国辉。感谢经典论坛网页标准化专栏斑竹blankzheng指点优化几处
0
投稿
猜你喜欢
- asp代码 如下:读取注册表信息使用了对象WScript.Shell<%Dim strPath strP
- 也许光从字面上来说,版式设计中的“亲密性”似乎不太好理解,正常的情况下,我们都会把“亲密性”理解为人与人之间的关系的一种表现,事实上在版式设
- ASP中从数据库读取二进制文件数据代码:<%driver_name1="DRIVER={Microsoft&n
- ACCESS数据库中Field对象的caption属性(也就是标题)是用来设置数据字段的标题,在正常的数据库设计中为了保持维护的便利性,许多
- 完美的渐变透明效果。支持IE,Firefox渐变,自己写的JS框架中用的东西,发出来了。修正完全隐藏时,偶尔不display = "
- SQL语句参考及记录集对象详解1. ASP与Access数据库连接:2. ASP与SQL数据库连接:建立记录集对象:set rs=serve
- 前两天在做一个站内版的企搜引擎,发现某些站点可以链接站点内容。。奇怪之下看了看,原来是按照数据库ID的自动编号规律进行链接的~~闲暇之余弄了
- 精妙的"SQL"语句:◆复制表(只复制结构,源表名:a 新表名:b)SQL: select * into b from
- 看到很多站长工具网,都提供了通过域名获取网站IP的方法。自己也想做一个,网上查了不少代码。有说用WSHSHELL,也有说用ASPPING组件
- Oracle中有多种方法可以向数据库或服务器文件系统上载文件,这里主要介绍如下三种:Oracle HTTP Server(OHS)的mod_
- ALTER DATABASE DATAFILEd:\ORANT\DATABASE\USER1ORCL.ORA RESIZE 10
- 以前在网上看到的最简单的拖动对象的代码,忘记作者叫什么了。原始代码在IE下有些小问题,并且声明了文档类型为xhtml 1.0后,在FF等非I
- 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时
- 内容摘要:MySQL易学易用,附带丰富的技术文档,这两个因素使之被广泛应用。然而,随着MySQL发展加快,即使一个MySQL老手有时也会为该
- 内容适应形式学习了死猫的文章,我今天也来说说有关内容和容器的关系。看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从
- 通过学习ASP明明白白你的If语句流程。If condition Then [statements1]E
- 如何在寸土寸金的首页上使页面的价值最大化,是每个网站设计者最关心的话题。用户关注的页面长度、宽度都是有限的。宽度自不必说,一般网站都会根据自
- SQL Server有几个版本都在使用中——4.2, 6.0, 6.5, 7.0, 2000,以及2
- IIS报错:msxml3.dll (0x80070005)拒绝访问解决办法:Set objSrvHTTP =
- 众所周知windows平台漏洞百出,补丁一个接一个,但总是补也补不净。我把我所知道的看asp源码的方法总结了一下,并且用c#写了个应用程序来