初学者简单学习CSS网页布局

作者佚名技术来源 CSS技术浏览发布时间 2012-03-03

;

padding:0px;

}

#all{width:75%;

height:200px;

background-color:#eee;

border:1px solid #000;

margin-left:auto;

margin-right:auto;

}

</style>

</head>

<body>

<div id="all">布局页面内容</div>

</body>

</html>

为了更方便看到div的表现，笔者给div设置了浅灰色背景色和黑色边框，在浏览器地址栏输入http://localhost/div_align.htm，浏览效果如图11.5所示。

是不是很简单？设置外边距的CSS代码可以进一步简化，使用margin属性，编写方法为：

margin:0px auto;

图11.5 设置div水平居中

margin属性值前面的0代表上边距和下边距为0像素，auto代表左边距和右边距为auto，即自动设置。读者注意，0px和auto之间使用空格符号分隔，而不是逗号。还有一种方法是使用html或body的text-align属性，设置其值为center，即所有对象将居中。这样将导致页面文本居中，所以不作推荐，其编写方法为：

html,body{text-align:center;}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS网页布局教程:绝对定位和相对定位下一篇: CSS初学福音:解决你对英文单词的不理解

关于初学者简单学习CSS网页布局的所有评论

随机推荐