css三栏布局

最新推荐文章于 2023-10-25 20:45:03 发布

shuoxi666

最新推荐文章于 2023-10-25 20:45:03 发布

阅读量98

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/shuoxi666/article/details/102787262

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一：flex布局实现三栏布局

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局</title>
    <link rel="stylesheet" href="../css/三栏布局2.css">
</head>
<body>
    <div class="wapper">
        <div class="left">
            <span>春天来了！美丽的春天已经来到了我们的身边！春天是一个令人遐想的季节，它不像夏天炎热逼人，而是气温适宜；不像秋天草木都枯黄了，而是勃勃生机，一片绿意；也不像冬天大雪纷纷，而是微风阵阵。我喜欢春天的遐想，更喜欢春天的故事。

                    小草有着这样一段令人感动的故事，春天到了，它在泥土中经过多次痛苦的挣扎，破土而出，迎接第一天的阳光雨露，它微笑着，在微风中尽情地摇摆，好像在向大家不停的呼喊着：“春天来了！春天来了！”它洒脱自如，嫩嫩的绿叶点缀着大地，因为它看到了世界是如此美丽，它也想为草原尽一份责任。不管风吹雨打，它都尽自己最大的努力为春天送上最美的祝福与欢笑。小草的坚强令人感动，它的不怕吃苦的精神令人振奋。“野火烧不尽，春风吹又生”古往今来，有多少诗人、词人、作家赞美过小草，它的一生虽然短暂却毫不犹豫地把自己奉献给了春天，它是伟大的、坚强的！</span>
                
        </div>
        <div class="center">
            <span>小河有这样一段美丽的故事：随着小河周围的景物不断复苏，于是它也想展示一下它最美丽的一面。奶奶家门前就有一条小河叮咚地流淌着，声音比以前响亮了许多，在灿烂的阳光的照射下，它发出耀眼的光芒，好像穿上了一件闪装，光彩夺目。河水清澈极了，人一站在河边就可以自己的身影，还有甜甜的味道与散发出来的纯净的水。听奶奶说，她小时候就是喝着这条小河的水长大的。小河啊！小河啊！没想到你还真有一的套。春天还有许多有趣的事，等待着我们去发现呢！</span> 
        </div>
        <div class="right">
            <span>春姑娘乘着清风，带着温暖翩翩而来。她张开双臂舞着钎细的手，把碧绿洒满了大地把百花齐放地插在枝头上，花儿争芳斗艳散出诱人的清香，鸟儿舒畅自由地向蓝天高歌：“春天来了。”

                    春天来了万物醒了，在姑娘的呼唤下一株株小草醒了，小树也醒了，小溪流着，激了浪花。河边一排排树发芽了。春风如透明的丝巾，看着滴滴晨露，飘飘然然地沐浴着万物。
                    
                    春天来了一只只活泼的小鸟飞来了，它带着一身乌黑光亮的羽毛，一对俊俏轻快的翅膀，加上一对剪刀似的尾巴，凑成活泼机灵的小鸟啊！可爱的小鱼也探出了小脸来了。
                    
                    学校的花发芽了，木棉花开了，有一次我在木棉树的下面玩突然一多木棉花落在我的面前像一个羽毛球一样，我听过老师说过木棉花是英雄的花。木棉花下面有很多野菊花，绿叶，黄的花，都像赶聚似的聚龙一样。
                    
                    春雨蒙蒙，像落叶一样轻，像针尖一样细，多么迷人的春雨啊！
                    
                    你门看，那些七星瓢虫的冬眠已经结束了，来到了春天呼吸着清新的空气了。太阳公公也露出了笑脸来了。
                    
                    啊！多么美丽，多么迷人的春天啊！
                    
                    美丽的春天来了。</span>
        </div>
    </div>
</body>
</html>

css代码：

*{
    margin:0;
    padding:0;
}

body,.left,.right,.center{
    padding:20px;
    background-color:#fff;
}

.wapper{
    padding:20px;
    background-color:#eee;
    display:flex;
    justify-content:space-between;
}
.left,.right{
    width:160px;
    border: 1px solid black;
}
.center{
    width:850px;
    border: 1px solid black;
}

flex布局学习：https://www.cnblogs.com/dreamperson/p/9367008.html