1.一列布局

　　(一)一列自适应

　　自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>一列布局自适应</title>

    <style type="text/css">

        body{

            margin: 0;      /*清除浏览器默认样式*/

            padding: 0;

        }

        div{

            text-align: center;  /*字体居中*/

            font-size: 30px;

            font-weight: bold;

        }

       .head,.middle,.foot{

            width: 50%;          /*百分比宽度*/

            margin: 0 auto;      /* 典型的设置居中*/

        }

        .head{

            height: 200px;

            background: #F0B6CF;

        }

        .middle{

            height: 500px;

            background: tan;

        }

        .foot{

            height: 200px;

            background-color: #57A9D1;

        }

    </style>

</head>

<body>

        <div class="head">head</div>

        <div class="middle">middle</div>

         <div class="foot">foot</div>

</body>

</html>

　　(二)一列固定

　　顾名思义，固定布局的宽度，设置固定的PX值。

　　只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。

2.二列布局

　　(一)二列自适应

　　　二列的自适应，这时候要用到float属性。

　　

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>二列自适应</title>

    <style type="text/css">

        body{

            margin: 0;      /*清除浏览器默认样式*/

            padding: 0;

        }

        div{

            text-align: center;  /*字体居中*/

            font-size: 30px;

            font-weight: bold;

        }

        .left{

            width: 30%;

            background-color: #CCFF00;

            height: 500px;

            float: left;         /*先左浮动，使之靠浏览器左侧*/

        }

        .right{

            width: 70%;

            height: 500px;

            background-color: bisque;

            float: right;       /*先右浮动，使之靠浏览器右侧*/

        }

    </style>

</head>

<body>

        <div class="left">left</div>

        <div class="right">right</div>

</body>

</html>

注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。

　　(二)二列居中自适应

　　在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>二列居中自适应</title>

     <style type="text/css">

         body{

             margin: 0;      /*清除浏览器默认样式*/

             padding: 0;

         }

         div{

             text-align: center;  /*字体居中*/

             font-size: 30px;

             font-weight: bold;

         }

         .main{

             width:80%;

             height: 500px;

             margin: 0 auto;      /*居中*/

         }

         .left{

             width: 30%;

             background-color: #CCFF00;

             height: 500px;

             float: left;         /*先左浮动，使之靠浏览器左侧*/

         }

         .right{

             width: 70%;

             height: 500px;

             background-color: bisque;

             float: right;       /*先右浮动，使之靠浏览器右侧*/

         }

     </style>

 </head>

 <body>

     <div class="main">

         <div class="left">left</div>

         <div class="right">right</div>

     </div>

 </body>

 </html>

　　(三)二列居中固定

　　

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>二列居中固定宽度</title>

     <style type="text/css">

         body{

             margin: 0;      /*清除浏览器默认样式*/

             padding: 0;

         }

         div{

             text-align: center;  /*字体居中*/

             font-size: 30px;

             font-weight: bold;

         }

         .main{

             width:960px;

             height: 500px;

             margin: 0 auto;

         }

         .left{

             width: 360px;

             background-color: #CCFF00;

             height: 500px;

             float: left;         /*先左浮动，使之靠浏览器左侧*/

         }

         .right{

             width: 600px;

             height: 500px;

             background-color: bisque;

             float: right;       /*先右浮动，使之靠浏览器右侧*/

         }

     </style>

 </head>

 <body>

     <div class="main">

         <div class="left">left</div>

         <div class="right">right</div>

     </div>

 </body>

 </html>

　　

简单的CSS网页布局--一二列布局的更多相关文章

  1. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  3. [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  4. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  5. css布局之一列布局

    在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...

  6. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  7. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  8. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  9. css布局之三列布局

    网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. 如何有效地配置基于Spring的应用系统

    Spring为应用系统的开发提供了极大的方便,其IoC反向注入(或DI依赖注入)的概念也彻底地改变了旧的编程方式,让我们只需关注如何使用对象,而创建对象交给Spring去完成,即把使用对象和创建对象分 ...

  2. 网易云课堂_艾叔：零基础一站式C语言|C程序设计精讲_章节12:指针

    课时63指针操作数组 二维数组 #include <stdio.h> #include <stdlib.h> int main() { int age[2][4] = { 1, ...

  3. Life is short, you need Python

    今年四五月份的时候我打算学一门计算机语言. 计算机语言实在是很多,选哪一个? 其实这个选择就和去市场买菜类似,想明白了自己的需求才能做好决定.你想做什么饭,就去买什么菜.想做南瓜粥,就要去买南瓜,想要 ...

  4. 【类克鲁斯卡尔做法+枚举最小边】【HDU1598】【find the most comfortable road】

    题意:  给你一个图,有边权,K个询问:u到v 的路径中   边权最大值-边权最小值的最小值是多少 http://acm.hdu.edu.cn/showproblem.php?pid=1598 题解( ...

  5. 《JavaScript 闯关记》之简介

    简介 JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScript 解释器. 这使 ...

  6. IE6、7下获得offset值跟其他浏览器不一样问题

    大家都知道,offset是元素的位置坐标,那位置坐标又和文档流有关系.如果position默认不设置的话,其值是static.static是个什么东东呢?下面我详细介绍一下: 语法: position ...

  7. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  8. Sql遍历数据库

    Sql遍历数据库 set nocount on ) ) ) set @str='ad' Declare cur_Depart Cursor For select name,id from syscol ...

  9. Java日志管理

    首页 资讯 精华 论坛 问答 博客 专栏 群组 更多 ▼ 您还未登录 ! 登录 注册 JavaCrazyer的ItEye(codewu.com)技术博客   博客 微博 相册 收藏 留言 关于我   ...

  10. Excel 用row()函数 在Excel中自动添加序号,

    1.如图 2.用if条件根据产品名称判断是否有值进而序号自动添加 If(G9="","",Row()-8)