关闭

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

413人阅读 评论(0) 收藏 举报

       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>



0
0
查看评论

CSS之使用float及position属性实现页面轻松布局

在css的学习过程中,相信有不少盆友会有跟我一样的疑问:就是在使用float属性来进行页面布局时div层会出现消失的情况,接下来我将会在此博文中简单分享一下我对float的理解使用,并使用position属性来实现相同效果的页面布局,不对的地方请大家指出~相互学习~ 我们要实现的页面布局效果...
  • qiuruolin
  • qiuruolin
  • 2017-04-24 23:55
  • 268

网站开发之DIV+CSS简单布局网站入门篇(五)

这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案例的方式进行介绍的,希望对你有所帮助。运行结果如下图所示:main.html主页面代码:主要通过di...
  • Eastmount
  • Eastmount
  • 2016-11-08 12:05
  • 4489

前端基础学习-常见CSS网页布局

常见的网页布局大致分为:一列布局,两列布局,三列布局以及混合布局一列布局<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • dingshuhong_
  • dingshuhong_
  • 2016-03-10 11:12
  • 1110

CSS进行简单网页布局(基础知识)

CSS进行简单网页布局
  • hyp520520
  • hyp520520
  • 2017-11-03 19:02
  • 180

简单的CSS网页布局

一列布局小案例 body{margin:0;padding:0} .main{width:700px;height:200px;background:#F06;margin:0 auto} .top{height:100px;background:blue;} .footer{width:700px...
  • qq_36370731
  • qq_36370731
  • 2017-05-21 15:38
  • 150

利用CSS进行网页布局~

今天花了一小点的时间大致浏览了yixia
  • coralinelee
  • coralinelee
  • 2014-06-02 23:00
  • 272

利用 CSS 进行网页布局

这里主要主要介绍如何利用 CSS 来进行网页的一栏,两栏,三栏和混合布局1. 一列布局<html> <head> <style type="text/css"> body{margin:0;padding:0...
  • cighao
  • cighao
  • 2016-01-22 13:33
  • 586

html+css布局的三种方式

1.自然布局。 没有任何修饰的布局是自动靠左的。 2.流动布局 上面讲的float:left的情况。 3.定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。由于外层是posit...
  • qilixiang012
  • qilixiang012
  • 2015-08-03 12:49
  • 1045

用CSS进行网页布局

经过两个月的颓废,前端没有怎么用功看,端午长假来温习一下   网页布局其实也是块与块的关系,可以分为三种:块挨着块、块嵌套着块、块叠压着块。 紧挨:float  嵌套:父子关系 叠加:z-index 分栏又称分列,常见的布局有:一列,二列,三列,混合布局。 一列用...
  • Vickyyyya
  • Vickyyyya
  • 2017-05-29 23:27
  • 75

html表格实战<<简单的网页布局>>

html> html lang="en"> head> meta charset="UTF-8"> meta name="keywords" content="网页布局,表格标签"...
  • pangqiandou
  • pangqiandou
  • 2017-07-11 16:51
  • 462
    个人资料
    • 访问:134502次
    • 积分:1637
    • 等级:
    • 排名:千里之外
    • 原创:49篇
    • 转载:5篇
    • 译文:0篇
    • 评论:37条
    文章分类
    最新评论