网页三列布局

最新推荐文章于 2023-02-02 19:09:05 发布

哪吒べ

最新推荐文章于 2023-02-02 19:09:05 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/dyz4001/article/details/80087118

版权

Html+css+jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

示例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-size:30px;
            font-weight:bold
        }
        div{
            line-height:50px
        }
        .left{
            width:200px;
            height:600px;
            background:#ccc;
            float:left;
            left:0;
            top:0
        }
        .main{
            height:600px;
            margin:0 200px 0 200px;
            background:#9CF;
        }
        .right{
            height:600px;
            width:200px;
            position:absolute;
            top:0;
            right:0;
            background:#FCC;
        }
    </style>
</head>

<body>

<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。</div>
<div class="right">right</div>
</body>
</html>

左右为固定宽高 , 中间部分自适应

优惠劵

哪吒べ

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页三列布局

示例 :&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫