HTML之界面简单分割布局
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学习网站进行了解这个属性的使用方法，在进行布局操作。
–入门的伙伴可以先把下方图片：
进行自己先敲代码来仿写，然后是在不会再瞄一眼进行参考，知道全部理解了再多敲几遍，这样做到经常敲写经常练习才会有代码累的效果。