網(wǎng)站設計如何解決CSS定位？整理好頁面的框架后，就可以利用CSS對各個模塊進行定位，實現(xiàn)對頁面的整體規(guī)劃，然后再往各個模塊中添加內容。深圳網(wǎng)站設計公司提示首先對body標記與container父塊進行設置，CSS代碼如下所示。
body{ margin: 10px; text- align: center; } #container{ width: 900px; border: 2px solid #000000; padding: 10px; }
上面代碼設置了頁面的邊界、頁面文本的對齊方式，以及將父塊的寬度設置為900px。下面來設置banner板塊，其CSS代碼如下所示。
#banner{ margin- bottom: 5px; padding: 10px; background- color:# a2d9ff; border: 2px solid #000000; text- align: center; }
這里設置了banner板塊的邊界、填充、背景顏色等。下面利用float方法將content移動到左側，links移動到頁面右側，這里分別設置了這兩個模塊的寬度和高度，網(wǎng)站設計者可以根據(jù)需要自己調整。
#content{ float: left; width: 600px; height: 300px; border: 2px solid #000000; text- align: center; } #links{ float: right; width: 290px; height: 300px; border: 2px solid #000000; text- align: center; }
由于content和links對象都設置了浮動屬性，因此footer需要設置clear屬性，使其不受浮動的影響，代碼如下所示。
#footer{ clear: both; /* 不受 float 影響 */ padding: 10px; border: 2px solid #000000; text- align: center; }
這樣，頁面的整體框架便搭建好了，這里需要指出的是，content塊中不能放置寬度過長的元素，如很長的圖片或不換行的英文等，否則links將再次被擠到content下方。
如果后期維護時希望content的位置與links對調，僅僅需要將content和links屬性中的left和right改變。這是傳統(tǒng)的排版方式所不可能簡單實現(xiàn)的，也正是CSS排版的魅力之一。
另外，如果links的內容比content的長，在IE瀏覽器上footer就會貼在content下方而與links出現(xiàn)重合。好了，網(wǎng)站設計公司本文關于“網(wǎng)站設計如何解決CSS定位？”的實操步驟與方法就分享到這里，謝謝關注，博納網(wǎng)絡編輯整理。
