各种布局（一列，二列，三列，混合布局）

最新推荐文章于 2022-10-17 17:56:14 发布

oHayHay

最新推荐文章于 2022-10-17 17:56:14 发布

阅读量734

点赞数

分类专栏： css 文章标签：布局

本文链接：https://blog.csdn.net/oHayHay/article/details/51901872

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>一列布局</title>
    <style type="text/css">
    body{margin:0; padding: 0}
    .head{height: 80px;background-color: red;}
    .main{width: 500px;height: 500px;background-color: #ccc;margin: 0 auto;}
    .footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}
    </style>
</head>
<body>
<div class="head"></div>
<div class="main"></div>
><div class="footer"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
    <title>两列布局</title>
    <style type="text/css">
    body{margin:0;padding:0;}
    .left{width: 20%;height: 500px;background:#ccc;float: left;}
    .right{width: 80%;height: 500px;background:#cce;float: right;}
    .main{width:500px;height:500px;margin: 0 auto}
    </style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
    <title>三列布局</title>
    <style type="text/css">
    body{margin:0;padding:0;}
    .left{width: 200px;height: 500px;background:yellow;position:absolute;top:0;left :0;}
    .middle{height: 500px;background:red;float: left;margin: 0 310px 0 210px}
    .right{width: 300px;height: 500px;background:green;position:absolute;top: 0; right :0}
    </style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">一种是设计+CSS，关键词也就是Dreamweaver+Photoshop，这种人较多，但通常计算机知识薄弱。另一种是JS+CSS，偏重浏览器内的MVC, 这种人比较少，也是业界稀缺的</div>
<div class="right">300px</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>混合布局</title>
    <style type="text/css">
    body{margin:0; padding: 0}
    .head{height: 80px;background-color: red;}
    .top{height:80px;width: 500px;background-color:grey;margin: 0 auto}
    .main{width: 500px;height: 600px;background-color: #ccc;margin: 0 auto;}
    .left{width: 200px;height: 600px;background-color: yellow;float: left;}
    .right{width: 300px;height: 600px;background-color: pink ;float: left;}
    .sub_left{width: 100PX;height: 600PX;background: black;float:left;}
    .sub_right{width: 200PX;height: 600PX;background: purple;float: right;}
    .footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}
    </style>
</head>
<body>
<div class="head">
    <div class="top"></div>
</div>
<div class="main">
    <div class="left"></div>
    <div class="right">
        <div class="sub_left"></div>
        <div class="sub_right"></div>
    </div></div>
<div class="footer"></div>
</body>
</html>

oHayHay

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
各种布局（一列，二列，三列，混合布局）

<!DOCTYPE html><html><head> <meta charset="utf-8"></meta> <title>一列布局</title> <style type="text/css"> body{margin:0; padding: 0} .head{height: 80px;background-color: red;} .ma
复制链接

扫一扫

专栏目录