css3实现栏目(横向,纵向排列,)三等平均分配

2025-04-27 04:21:07

1、新建html文档。

css3实现栏目(横向,纵向排列,)三等平均分配

2、书写hmtl代艨位雅剖码。<!-- 横向排列 --> <div id="nav媪青怍牙"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div> <!-- 纵向排列 --> <div id="nav2"> <div id="box4">4</div> <div id="box5">5</div> <div id="box6">6</div> </div>

css3实现栏目(横向,纵向排列,)三等平均分配

3、初始化css代码。<style>*{margin:0;padding:0;font-size:12px;font-family:'Microsoft YaHei'} </style>

css3实现栏目(横向,纵向排列,)三等平均分配

4、书写css代码。<style>#nav,#nav2{display:-webkit-box稆糨孝汶;display:-moz-box;display:box;margin:auto;margin-top:30px;border:10px solid #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}#nav div,#nav2 div{-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>

css3实现栏目(横向,纵向排列,)三等平均分配

5、代码整体结构。

css3实现栏目(横向,纵向排列,)三等平均分配

6、查看效果。

css3实现栏目(横向,纵向排列,)三等平均分配
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
相关推荐
  • 阅读量:75
  • 阅读量:56
  • 阅读量:77
  • 阅读量:43
  • 阅读量:39
  • 猜你喜欢