HTML之介面簡單分割佈局
阿新 • • 發佈：2018-11-11
HTML之介面簡單分割佈局
CSS-Code：
<style> *{ margin: 0; padding: 0; } .top{ width: 100%; height: 60px; background: red; } .left{ width: 320px; height: 874px; background: yellow; } .main{ width: 1580px; height: 800px; background: blue; position: absolute; left: 320px; top: 60px; } .bottom{ width: 1580px; height: 86px; background: green; position: absolute; right: 0px; left: 320px; bottom: 0px; } </style>
HTML-Code：
<body>
<!--頭部樣式-->
<div class="top"></div>
<!--側欄樣式-->
<div class="left"></div>
<!--內容樣式-->
<div class="main"></div>
<!--底部版權樣式-->
<div class="bottom"></div>
</body>
以上沒什麼好分析的了，就是一個簡單到right（右） top（頭部，上） bottom（下，底部） left （左）進行給予相應的畫素，然後設計到相對定位於絕對定位的position屬性，這個屬性可以網上或者菜鳥程式設計，或者W3Cschool學習網站進行了解這個屬性的使用方法，在進行佈局操作。
–入門的夥伴可以先把下方圖片：
進行自己先敲程式碼來仿寫，然後是在不會再瞄一眼進行參考，知道全部理解了再多敲幾遍，這樣做到經常敲寫經常練習才會有程式碼累的效果。
