DIV+CSS制作的网页如何让网页居中

 我写网页是包在一个叫 #container 的DIV中的,所以这里主要讲一下BODY与#container之间的关系。

    先看一下body的CSS样式:

    body{ margin:0;padding:0;text-align:center;}

    这里的body把margin与padding设置为0,这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中,这样就包括了#container也一起居中了。

    再来看一下#container的样式:

    container{width:760px;margin:0 auto;text-align:left;position:relative;}

    学问就在这个#container里了: 给这个容器设定了宽度,这里是760px,margin:0 auto; 这里的margin中的第一个0是上下、第二个auto是左右。上下为0左右让其自控。再加上定位为相对,只有定位为相对的元素才可以有位置移动!

时间: 2024-09-20 06:13:26

DIV+CSS制作的网页如何让网页居中的相关文章

使用DIV+CSS制作网页后,表格Table还有用吗?

css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很

HTML DIV+CSS制作通栏实例

通栏在网页中的概念想必大家都有所了解吧,下面本文通过HTML DIV+CSS简单实现下,喜欢的朋友可以参考下哦   HTML DIV+CSS制作通栏 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-

DIV+CSS制作网页心得

其实DIVCSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言). DIVCSS是目前互联网网页制作最热门的方法,但对于完全手写代码,许多网页设计师都望而止步. 其实DIVCSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言). 首先你要知道,当你开始学习DIVCSS的时候,你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话),然而这项技术更适合刚接触网页制作的人. 然后你要知道,DIVCSS是高

DIV CSS制作网页时浮动问题的解决方法

css|浮动|解决|网页|问题 前最常用的方法有两种︰ 方法一.使用块级clear,即声明一个块的类属性为 .clear {clear:both;} 方法二.使用内联元素清理,比如说在主浮动内容后跟一个内联元素. .inlineclear {clear:both;}<span class="inlineclear"></span> 方法三,使用双层div巢状 #pubpage {display:block;clear:both;}#main {display:b

用div+css制作扑克牌

css  用css制作扑克牌Quote 声明:此文章是我对Mike Hall 源代码的研究得到 了解更多请到http://www.brainjar.com,可自由转载第一步:分析扑克牌的结构,看看是由哪些元素组成的 它的布局都是很有规律的不说你也能看出来,左上有个扑克的大小码,卡片图形分布分左中右均匀排放,ASCII中能找到A-10的元素,然后给每个格子放上相应的图片就成了一张扑克牌了.至于是A J Q K那就更简单了,中间部分放一个大的元素就行!第二步:制作1.做一个card,定义卡片的大小和

初学者指导:如何来学习DIV CSS制作网页技术

css|初学|网页 我接触的很多人都问,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但是要看着代码写网页了.首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag.如<img/><br/>.建议看看一些html参考

如何学习DIV CSS制作网页

我接触的很多人都问,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但是要看着代码写网页了. 首先是xhtml代码,不是很多,知道他们如何使用,怎么正确书写,而且要记得封闭tag.如<img/><br/>.建议看看一些html参考手册,毕竟xhtm

DIV CSS制作网页过程中关于居中问题的总结

css|过程|网页|问题 1.DIV居中 body {text-align: center;} div {margin-right: auto; margin-left: auto;}说明: 对于IE,在父元素定义"text-align: center;"就可以了 对于FF等其他浏览器,仅这样不能居中,需在子元素中定义"margin-right: auto; margin-left: auto;". 2.背景居中 body {background:url(#) #f

DIV CSS制作网页之浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你