《
网页制作技巧 DIV宽度100%DIV居中》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234I42013.htm
01.<div class="pagelist_b">
02. <div class="page">
03. ,网页制作必须注意的10个元素; <span class="totlerecord">5</span>
04. <span class="totlepages">1/5</span>
05. <span class="current">1</span>
06. <a href="#">2</a>
07. ,网页制作实例 图片真正居中的方法; <a href="#">3</a>
08. <a href="#">4</a>
09. <a href="#">5</a>
10. <a href="#">></a>
11. </div> ,网页制作中的CSS布局规则;
12.</div>
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
02.<html xmlns="
03. <head>
04. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05. <meta http-equiv="Content-Language" content="utf-8" />
06. <title> new document </title>
07. <meta name="robots" content="all" />
08. <meta name="generator" content="editplus" />
09. <meta name="author" content="hayden@yeah.net,hayden" />
10. <meta name="keywords" content="" />
11. <meta name="description" content="" />
12. <link rel="stylesheet" rev="stylesheet" href="" type="text/css" media="all" />
13. <script type="text/javascript" src=""></script>
14. <style type="text/css">
15.* { word-wrap: break-word; margin: 0; padding: 0;}
16.
17..pagelist_b {width:100%;height:80px;text-align: center; }
18..page {position:relative;left:50%;float:left;}
19..page span {position:relative;left:-50%;border: 1px solid #ddd;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}
20..page span.totlerecord{}
21..page span.current{cursor:pointer;}
22..page a:link,.page a:visited {border: 1px solid #ccc;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;text-decoration: none;position:relative;left:-50%;color:#666}
23..page a:hover {border:1px solid #666;}
24.
25. </style>
26. </head>
27. <body>
28.
29.
30.<div class="pagelist_b">
31. <div class="page">
32. <span class="totlerecord">5</span>
33. <span class="totlepages">1/5</span>
34. <span class="current">1</span>
35. <a href="#">2</a>
36. <a href="#",网页制作中版权信息的书写标准;>3</a>
37. <a href="#">4</a>
38. ,网页制作中如何精确还原设计稿的几个步骤; <a href="#">5</a>
39. <a href="#">></a>
40. </div>
41.</div>
42.
43. </body>
44.</html>
在这个构造中，“.pagelist_b”是外部框架，100%宽度。而目标，是为了让“.page”块可能居中显示。可是由于“.page”块中的节点并不固定，无法确认其终极宽度，再者，“.page”块中的内容须要定义特别的款式，而被附上“display:block;”属于将其块元素化，而导致“.page”中的内容无奈完善的居中。
这两天忽然无意中看到网上的相干文章，想起了position:relative;（绝对浮动）的弄法。大抵十分艰深的阐明一下这里的思路：“.page”向右浮动50%，是以外层“.pagelist_b”的宽度为标准的；内层（如A,SPAN）向左浮动50%，是以层“.page”的宽度为尺度的，这里无需定义内层的宽度。这样算是一个小技巧，让“.page”居中了。也补足了float不center属性的缺点。假如无法畸形显示，记得在page_b加多一句overflow:visible;
Tag：技能 网页制造
--> [
网站建设之]
网页制作技巧:DIV宽度100%DIV居中
(责任编辑：网站建设)
网页制作技巧 DIV宽度100%DIV居中相关文章