汉景源的博客

good good study,day day up

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

       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>



阅读更多
版权声明:本文为博主原创文章,你要是想转载可以随意转载。 https://blog.csdn.net/lucahan/article/details/52373819
上一篇Edius7下载,安装,破解完整
下一篇【SSH框架搭建】Spring,Struts2,Hibeinate终极攻略(一)
想对作者说点什么? 我来说一句

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

2010年04月26日 2.43MB 下载

css网站布局之十步实录.doc

2009年05月28日 388KB 下载

没有更多推荐了,返回首页

关闭
关闭