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學習網站進行了解這個屬性的使用方法,在進行佈局操作。
–入門的夥伴可以先把下方圖片:
進行自己先敲程式碼來仿寫,然後是在不會再瞄一眼進行參考,知道全部理解了再多敲幾遍,這樣做到經常敲寫經常練習才會有程式碼累的效果。