使用CSS进行简单的网页布局

原创 2016年08月30日 22:37:34

       Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面。但是这种基本的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,所以,本文来介绍最简单的几种网页布局方法。


一、一列布局

一列布局一般就是从上到下,采用固定的宽度或者一定的比例,一列布局类似与百度的这种形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列布局</title>
    <style type="text/css">
        body{margin: 0;padding: 0}
        .main{width:800px;height: 300px;background: blue;margin: 0 auto;}
        .top{height:100px;background: rebeccapurple;}
        .foot{width: 800px;height: 100px;background: grey;margin: 0 auto}
    </style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
</body>
</html>



二、两列布局

两列布局一般是左右两列的布局方式

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



三、三列布局

这个布局中的middle没有加宽度,也就是一个自适应宽度,可以随着内容而调整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局自适应宽度</title>
    <style type="text/css">
        body{margin: 0;padding: 0;}
        .left{width: 200px;height: 800px;background: red;position: absolute;left: 0;top:0;}
        .right{width:200px;height:800px;background: red;position: absolute;right: 0;top:0;}
        .middle{height: 800px;margin: 0 200px 0 200px;background: grey;}

    </style>
</head>
<body>
    <div class="left">200</div>
    <div class="middle">这个休赛期NBA最大的新闻,莫过于凯文-杜兰特的决定了,他与斯蒂芬-库里及其勇士军团一起,组成了一支超级强队。随着杜兰特的加盟,下赛季的勇士目标很明确,即再度拿下总冠军。

        其他一些影响力稍弱的自由球员,也同样期待着能站在明年的冠军领奖台上。和杜兰特一样,大卫-韦斯特也加入了勇士,不过他签的是老将底薪合同。同样情况还有“鸟人”克里斯-安德森,他选择了克里夫兰骑士。

        同时,不仅只有现役球员渴望得到总冠军戒指,退役球员同样如此。拉里-桑德斯想要加入勇士……也可能是骑士……其实任何队都行,41岁的雷-阿伦也期待着另一个总冠军,甚至前勇士球员斯蒂芬-杰克逊和拜伦-戴维斯,都表达了复出的意愿,尽管已经没人看好他们了。

        关于组建超级强队、追逐总冠军戒指以及退役球员复出,这一系列字眼让我脑海里冒出了一个有趣的假设:要是迈克尔-乔丹在2001年第二次复出时,所加入的是一支超级强队会怎么样?他能发挥举足轻重的作用,帮助一个竞争对手打败2002年的湖人或是2003年的马刺吗?他能赢下第七枚总冠军戒指吗?

        在你认为退役后的乔丹已经“风光不再”之前,让我们先仔细看看他职业生涯最后阶段的数据统计吧。</div>
    <div class="right">300</div>

</body>
</html>





四、混合布局

混合布局就是融合了上面的三种布局既包含了一列布局,又使得中间的分为多列布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列混合布局</title>
    <style type="text/css">
        body{margin: 0;padding: 0;}
        .top{height:100px;background: red;}
        .main{width: 70%;height: 800px;background: yellow;margin: 0 auto;}
        .foot{width:70%;height: 100px;background: grey;margin: 0 auto;}
        .left{width:50%;height:800px;background: pink;float: left;}
        .right{width:50%;height:800px;background: purple;float: left;}
    </style>
</head>
<body>
<div class="top"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="foot"></div>
</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

利用DIV/CSS进行网页布局

  • 2015年01月20日 08:43
  • 34.24MB
  • 下载

第 1 章 如何用 CSS 进行网页布局

网页布局 一列布局 用法 清除默认样式 二列布局 三列布局 混合布局 网页布局1:网页布局:又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有...

[练习]如何用CSS进行网页布局

如何用CSS进行网页布局 (最终解释权归原作者所有,侵权必究) 1、版式布局:网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性化地表现出来,是一种具有个人风格和艺术特色的传达方式...

一个简单的网页布局案例(DIV+CSS)

  • 2010年04月26日 21:44
  • 2.43MB
  • 下载

实现CSS网页布局的简单原理

DIV+CSS布局   用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。   你可以把这一页面的各个部分当作独立的版块来看...

HTML5 使用结构元素进行网页布局

使用结构元素进行网页布局 .main{ width: 1000px; margin: 40px auto; } .main nav{ width: 1000px; h...
  • LQSLM
  • LQSLM
  • 2017年03月07日 17:55
  • 199

Web基础入门(表格)-使用表格嵌套的形式制作一个简单的网页布局

因为公司业务需要,从上周开始我便开始研究web前端开发,目的就是为公司开发出一个相对比较完善的管理平台,那么下面我们来详细的说一下怎样使用表格嵌套的形式开发一个简单的网页布局。程序效果如图所示: ...

HTML与CSS教学-第十一章 使用CSS样式完成网页布局

第十一章 使用CSS样式完成网页布局 本章要点 网页居中的实现方式 基于FLOAT的网页布局的实现方式 图文混排复杂布局的的实现方式 目录: 11.1  CSS网页布局介绍 11.2  ...

css3 rem的用法——网页布局

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of th...

【CSS】关于div的对齐与网页布局

div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内, 各行的规格分布根本就没法调, 例如下面的一段非常简单的代码: 无标题文档 1111...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用CSS进行简单的网页布局
举报原因:
原因补充:

(最多只允许输入30个字)