CSS设计三栏伸缩页面

最新推荐文章于 2023-05-24 15:10:51 发布

冯晓如

最新推荐文章于 2023-05-24 15:10:51 发布

阅读量327

点赞数

分类专栏： Web前端文章标签：设计三栏伸缩页面

本文链接：https://blog.csdn.net/honeygirl_/article/details/102876902

版权

本文介绍如何利用CSS的Flexbox布局设计一个兼容多种设备和浏览器的三栏页面，包括20%、60%、20%的网格布局。详细讲解了如何设置伸缩容器和伸缩项目，以及新旧语法的混合使用，以确保在不同浏览器中的正确显示。同时，文章提到了布局顺序调整的方法，并提示在实现过程中可能出现的问题。

摘要由CSDN通过智能技术生成

下面主要写了使用不同版本语法，设计一个兼容不同设备和浏览器的弹性页面。
主要代码如下:

<style type='text/css'>
.page-wrap {
    display:-webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.main-content{
    -webkit-box-ordinal-group:2;
    -moz-box-ordinal-group:2;
    -ms-flex-order:2;
    -webkit-order:2;
    order:2;
    width:60%;
    -moz-box-flex: 1;
    background:white;
}
.main-nav{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 20%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #CCC;
}
.main-sidebar{
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order:3;
    -moz-box-flex:1;
    width: 20%;
    -ms-flex: 1;
    -webkit-flex: 1 ;
    flex: 1;
    background: #cCC;
}
.main-content, main-sidebar,.main-nav{padding:lem;}

body {
    padding: 2em;
    background: #79a693;
}
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}
h1,h2 {
    font: bold 2em Sans Serif;
    margin: 00 lem 0;
}
h2 { 
    font-size: 1.5em;
}
P { 
    margin:00 lem0;
}
</style>
<div class='page-wra'>
    <section class='main-content'>
    <h1>水调歌头.明月几时有</hl>
        <p>苏轼
        <div>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
        明月几时有?把酒问青天。不知天上宫阙，今夕是何年。我欲
        乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在
        人间?
        转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆?人有
        悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共
        婵娟</div></p>