web四种布局方式

最新推荐文章于 2023-04-14 16:53:28 发布

剽悍六杯茶

最新推荐文章于 2023-04-14 16:53:28 发布

阅读量2k

点赞数 3

分类专栏：前端文章标签：布局

本文链接：https://blog.csdn.net/nikita1995/article/details/52071281

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一：一列布局

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>一列布局</title>
        <style type="text/css">
        body{margin:0;padding:0;}
        .top{height:100px;background:blue;}
        .main{width:800px;height:300px;background:#ccc;margin:0 auto;}
        .foot{width:800px;height:100px;background:#900;margin:0 auto;}
        </style>

    </head>
    <body>
    <div class="top"></div>
    <div class="main"></div>
    <div class="foot"></div>
    </body>
</html>

二：两列布局

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>二列布局</title>
        <style type="text/css">
        body{margin:0;padding:0;}
        .main{width:800px;margin:0 auto;}
        .left{width:20%;height:500px;float:left;background-color: #ccc;}
        .right{width:80%;height:500px;float:right;background-color: #ddd;}
        </style>

    </head>
    <body>
    <div class="main">
    <div class="left"></div>
    <div class="right"></div>
    </div>
    </body>
</html>

三：三列布局

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>三列布局</title>
        <style type="text/css">
        body{margin:0;padding:0;}
        .left{width:200px;height:500px;background-color: #ccc;position:absolute;left:0;top:0;}
        .middle{height:500px;background-color: #999;margin:0 300 0 200;}
        .right{width:300px;height:500px;background-color: #ddd;position: absolute;right:0;top:0;}
        </style>

    </head>
    <body>
    <div class="left">200</div>
    <div class="middle">随着互联网的发展速度迅猛，前端工程师职业越来越火热，想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练，一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效，为您打开WEB前端工程师大门。还在等什么？快来学习吧!
    </div>
    <div class="right">300</div>
    </body>
</html>

四：混合布局

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>混合布局</title>
        <style type="text/css">
        body{margin:0;padding:0;}
        .top{height:100px;background:blue;}
        .head{height:100px;width:800px;background:#299;margin:0 auto;}
        .main{width:800px;height:600px;background:#ccc;margin:0 auto;}
        .left{width:200px;height:600px;background-color: yellow;float:left;}/*不能忘记float*/
        .right{width:600px;height:600px;background-color: #369;float:right;}
        .foot{width:800px;height:100px;background:#900;margin:0 auto;}
        </style>

    </head>
    <body>
    <div class="top">
        <div class="head"></div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="foot"></div>
    </body>
</html>

剽悍六杯茶

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
web四种布局方式

一：一列布局<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>一列布局</title> <style type="text/css"> body{margin:0;pad
复制链接

扫一扫

专栏目录