使用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>



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

相关文章推荐

利用 CSS 进行网页布局

这里主要主要介绍如何利用 CSS 来进行网页的一栏,两栏,三栏和混合布局1. 一列布局 body{margin:0;padding:0} .t...

使用div+css进行页面布局

本人不是做网页前端开发的,由于之前有学过网页的技术,如html标签,css样式,javascript等。。在今年的公司做维护,该网站采用的是div+css,所以难免要会理解div+css.凭着我的爱好...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

简单的CSS网页布局

一列布局小案例 body{margin:0;padding:0} .main{width:700px;height:200px;background:#F06;margin:0 auto} .top{...

CSS网页布局

今天对网页布局div+css进行了学习与回顾,在这里做一个总结吧。CSS表现标准语言是前端开发W3C标准的三大标准之一(另外还有html结构化语言,ECMAscript行为语言),网页开发的结构,样式...

css网页布局

文章是讲网页布局的一些基础的样式。主要是一列布局,两列布局,三列布局以及混合布局。

CSS网页布局

网页布局有各种各样的方式,这里简单说几种典型常用的布局。 单列布局 单列布局的话,一般为一个header 一个Main 和一个footer组成。通常用作网站的主页。 代码实现: <meta h...

(css)网页布局

本篇主要记录的网页布局方式有:一列布局,两列布局,三列布局,以及混合布局。

网页布局

1.网页布局之浮动两列布局(关键词:float) .main{ margin:0 auto; wi...

CSS selector选择符 进行CSS网页布局的基础

CSS selector 选择符是我们进行CSS网页布局的基础。CSS selector到底有哪些,如何合理的运用呢?选择符可以分为三类,除了第一类HTML selector之外,其它两类我们是可以自...

简单的应用型网页布局

我个人理解应用型网页,就是一些用户的个人操作页面,比如说邮箱,博客,后台系统等...          这一类的网页据我观察,貌似都是自适应宽度,在整个网页显示的,这一类网页验证方式(按住ctrl键...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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