# css布局 #
---
bootstrap   详情请看官方文档
---
首先要按照相应的官方规范引入相应的css js fonts等

container相当于一个容器 一般设置一个 接下来设置行 用row

row里面套col col里面可以继续套row   row不能直接套row

<div class="container">
        <div class="row header">
            <div class="col-xs-1  "></div>
            <div class="col-xs-1  "></div>

</div>
        <div class="row">
            <div class="col-xs-6 c3">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>

</ul>
            </div>
        </div>
      </div>
    </div>

拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" //content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
        <style></style>
    </head>
    <body>
        <div class="container">
            <div class="row header">
                <div class="col-xs-1  c1"></div>
                <div class="col-xs-1  col-xs-offset-2 c2"></div>
    
            </div>
            <div class="row">
                <div class="col-xs-6 c3">
                </div>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.2-min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </html>

--------
负边距
----
    <div id="header">顶部区域</div>
    <div id="mainer">
    <div id="main">
        <div id="leftBar">
           
        </div>
        <div id="innerMain">
          
        </div>
    </div>
    </div>
    <div id="sideBar">
    </div>
    <div id="footer">底部区域</div>

//通过这样设置css样式就可以实现一部分区域自适应

<style>
        #header {
            background: red;
        }

#mainer {
            background: yellow;
            float: left;
            width: 100%;

margin-right: -250px;
        }

#main {
            margin-right: 250px;;
        }
        #innerMain{
            margin-left:200px;
        }
        #leftBar{
            width:200px;
            float:left;
            background: fuchsia;
        }
        #sideBar {
            background: blue;
            float: right;
            width: 250px;
        }

#footer {
            clear: both;
            background: green;
        }
    </style>

-----------
圣杯布局   
------
    <div id="header">顶部区域</div>
    <div id="mainer">
    <div id="main">
        <div id="leftBar">
           
        </div>
        <div id="innerMain">
          
        </div>
    </div>
    </div>
    <div id="sideBar">
    </div>
    <div id="footer">底部区域</div>

//通过这样设置css样式就可以实现一部分区域自适应
    <style>
        #header{
            background: red;
        }
        #mainer{
            padding:0 250px 0 200px;
        }
        #leftBar{
            background: blue;
            width:200px;
            margin-left:-100%;
            right:200px;

}
        #innerMain{
            background: yellow;
            width:100%;
        }
        #rightBar{
            background: fuchsia;
            width: 250px;
            margin-right: -250px;
        }
        .column{
            float:left;
            position: relative;
        }
        #footer{
            clear:both;
            background: green;
        }

</style>

一些css布局的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  10. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. 【BZOJ3600】没有人的算术 - 替罪羊树+线段树

    题意: 题解: Orz vfleaking……真·神题 做法大概是先把题意中定义的“数”都赋一个实数权值,用平衡树来维护整个从大到小排序过的序列,再用线段树查询最值: 这样做为什么是对的?考虑插入一个 ...

  2. UVALive-8138 Number Generator 概率dp+优化

    题目链接:https://cn.vjudge.net/problem/UVALive-8138 题意 有一个随机数生成器,输出1-n的整数. 现在已经输出了k个数,问再取几个数才能使取出的所有数的个数 ...

  3. [洛谷P4887]第十四分块(前体)

    题目大意: 给定一个长度为\(n\)的序列\(a\),\(k\),和\(m\)次询问. 每次询问给定区间\([l,r]\),求满足\(l\leqslant i< j\leqslant r\)且\ ...

  4. alg--分治法

    分治--分而治之, 把大的问题分成n个小的问题,分别处理,然后汇总小问题的结果. 具体介绍可以参考这位大哥的blog: https://www.cnblogs.com/steven_oyj/archi ...

  5. Linux设备驱动--块设备（三）之程序设计（转）

    http://blog.csdn.net/jianchi88/article/details/7212701 块设备驱动注册与注销 块设备驱动中的第1个工作通常是注册它们自己到内核,完成这个任务的函数 ...

  6. maven tomcat 插件

    在 pom.xml 中添加如下内容 <!-- 配置 tomcat 插件 --> <build> <plugins> <plugin> <group ...

  7. The Basics of Numpy

    在python语言中,Tensorflow中的tensor返回的是numpy ndarray对象. Numpy的主要对象是齐次多维数组,即一个元素表(通常是数字),所有的元素具有相同类型,可以通过有序 ...

  8. Hit 2255 Not Fibonacci

    今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...

  9. Debian以下的ntp服务(ntpdate)的安装

    /*********************************************************************  * Author  : Samson  * Date   ...

  10. 【剑指Offer学习】【面试题26：复杂链表的复制】

    题目:请实现函数ComplexListNode clone(ComplexListNode head),复制一个复杂链表. 在复杂链表中,每一个结点除了有一个next 域指向下一个结点外,另一个sib ...