css3实现栏目（横向，纵向排列，）三等平均分配
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代艨位雅剖码。<!--横向排列--><divid="nav媪青怍牙"><divid="box1">1</div><divid="box2">2</div><divid="box3">3</div></div><!--纵向排列--><divid="nav2"><divid="box4">4</div><divid="box5">5</div><divid="box6">6</div></div>
3、初始化css代码。<style>*{margin:0;padding:0;font-size:12px;font-family:'MicrosoftYaHei'}</style>
4、书写css代码跷孳岔养。<style>#nav,#nav2{display:-webkit-box稆糨孝汶;display:-moz-box;display:box;margin:auto;margin-top:30px;border:10pxsolid#7f8c8d}#nav{width:300px;height:100px;-webkit-box-orient:horizontal;-moz-box-orient:horizontal;box-orient:horizontal}#nav2{width:100px;height:300px;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical}#navdiv,#nav2div{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;text-align:center;line-height:100px;font-size:36px;color:#fff}#box1{background:#1abc9c}#box2{background:#3498db}#box3{background:#9b59b6}#box4{background:#f39c12}#box5{background:#27ae60}#box6{background:#c0392b}</style>
5、代码整体结构。
6、查看效果。
