DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁制作技巧:DIV寬度100%DIV居中
網頁制作技巧:DIV寬度100%DIV居中
編輯:CSS進階教程     

01.<div class="pagelist_b"> 
02.    <div class="page"> 
03.        <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> 
12.</div> 

在這個結構中,“.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;

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
02.<html xmlns="http://www.w3.org/1999/xhtml"> 
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> 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved