如何分三栏

图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)

千次阅读 2013-06-17 11:30:28

float分三栏的具体代码见下面的内容：三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端...

你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉，这里和大家分享一下，CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项中的绝对定位，第二种则是使用CSS中的浮动（float）概念。

DIV CSS布局中绝对定位和浮动

CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute、static、relative和fixed）中的绝对定位（absolutepositioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。

绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。

一、绝对定位

绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。
那么让我们试一试用绝对定位如何实现下面的布局。

这是一个三栏的布局，并且是居中显示的。其中，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置，因为每个人显示器的分辨率是不同的，在1024X768分辨率的显示器上定位的居中效果，在别的分辨率的显示器上看到的效果肯定不会是居中显示的，那么，该如何解决这个问题呢？

幸好，在绝对定位模型中有个极为有用的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。

所以，利用这个特性，我们给A、B、C栏的外部加上一个容器D，如下图：

然后，我们让容器D居中，并给它加上一个属性：position:relative，这样，再用绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上角的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。

但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图：

这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。
如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是任意一栏中的文本长度无法确定的话，除了使用JavaScript，我们也只能放弃绝对定位的念头，转而投入到浮动布局的怀抱。

二、浮动

浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。

浮动的语法虽然简单，但却不那么容易掌握，下面让我们举例说明如何用浮动来进行布局。同样，我们要实现一个带页脚的三栏布局。如下图：

如何用浮动实现这样的效果呢？其实很简单：

1、设定E的宽度，让E居中

2、设定A、B、C的宽度，将A、B、C分别向左浮动

3、给页脚设置clear属性

需要说明的是，浮动布局依然遵循常规文档流，所以与绝对定位相比，浮动定位时HTML源文件中元素声明的位置显得格外重要。当然，解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序，也有方法不用交换各栏的次序也可以实现同样的布局，但是，这就要用到一种比较晦涩的使用负边距值的方法。一般情况下，人们十有八九会选择交换源文件中左中两栏的声明次序。

float分三栏的具体代码见下面的内容：

三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。

绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。

现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。

基本方法

基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。

三栏布局的一个例子

请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。下面是XHTML代码：

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>

下面是CSS代码：

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

代码说明

HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。

div#header和div#footer样式（style）中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间。div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。

div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过你也可以把它的宽度设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中，float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而，如果这些div被其它div包含，那么float将会把它们挤压到包含它们的div的边缘。

在div#middle样式中，clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。

这个例子非常粗糙和简单，但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。

收起

展开全文

自适应网页中3种三栏布局的用法

千次阅读 2016-12-14 11:19:21

首先解释一下什么是“三栏布局”：顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页左右两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可...

首先解释一下什么是“三栏布局”：顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页左右两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化。无论在自适应网页或响应式网页中，三栏布局都是最为常见和基础的布局方式之一。

目前为止，三栏布局的常用写法有三个：绝对定位法，外距负值法以及自身浮动法。

为方便演示，限定示例的布局结构：左中右三栏布局，左右两栏宽度固定为200px，中间栏宽度自适应。

1.绝对定位法：

这是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

绝对定位法

这个方法中，左中右三个div的顺序可以任意调整，而下面两个方法则不可以。

优点：理解容易，上手简单，受内部元素影响而破坏布局的概率低。

缺点：若中间栏含有最小宽度限制，或含有固定宽度的内部元素，当浏览器宽度小到一定程度，会发生布局层重叠。当用户设备为宽屏设备时，用户通常不会把浏览器缩小到1000px及以下。

2.外距负值法：

这种方法在实际应用次数最多。中间主体使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210px的margin值。左右两栏都采用margin负值定位，左栏左浮动，margin-left为-100%（-100%相对于其父元素<body></body>的宽度而言）；右侧栏也是左浮动，其margin-left为-200px（-200px相对于其本身的宽度而言）。

外距负值法

注意：几个div的顺序，无论是左浮动还是右浮动，主体部分div的书写位置必须固定，左右两栏则无必要规定，通常先左后右就好。

优点：三栏相互关联，真正意义上的自适应，有一定的抗性——布局不易受内部影响。

缺点：较难理解，上手不易，代码相对复杂。出现百分比宽度，过多负值定位，若在布局上出现bug，排查不易。

3.自身浮动法：

此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现自适应。

自身浮动法

注意：主体div放在最后，左右两栏div顺序任意。

优点：代码足够简洁与高效。

缺点：若使用此方法，中间主体需避免明显的clear样式（clear:both）。

4.扩展——上下固定、中间自适应的页面布局方式（position:absolute）：

用到的情况不多，较为常见还是顶部div固定定位（position:fixed;），但原理类似。

最后说一句，以上代码都不用记，只要保存链接，用到之时直接CV一下就好~

收起

展开全文

布局 html css3 自适应

布局：三栏布局（7种方法）

万次阅读 2017-08-10 16:03:47

本文就三栏布局而言，介绍了7种实现的方案。实现效果：左右栏定宽，中间栏自适应

布局：三栏布局（7种方法）

前端是不可避免的会遇到布局的问题，本文就三栏布局而言，介绍了4种实现的方案。

实现效果： 左右栏定宽，中间栏自适应



1、绝对定位布局：position + margin

html结构：



    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>

css样式：



     body,html{
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    /*左右进行绝对定位*/
    .left,.right{
        position: absolute;
        height:100%;  
        top: 0;
        background: #ff69b4;
    }
    .left{
        left: 0;
        width: 100px;
    }
    .right{
        right: 0;
        width: 200px;
    }
    /*中间用margin空出左右元素所占的空间*/
    .main{
        height:100%; 
        margin: 0 100px 200px 0;
        background: #659;
    }

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。



2、浮动布局： float + margin

html结构：



    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>

css样式：



        body,html{
            height: 100%;
            padding:0;
            margin: 0;
        }
        /*左边栏左浮动*/
        .left{
            float:left;
            height:100%;
            width:100px;
            background:#ff69b4;
        }
        /*中间栏自适应*/
        .main{
            height:100%;
            margin:0 200px 0 100px;
            background: #659;
        }
        /*右边栏右浮动*/
        .right{
            float:right;
            height:100%;
            width:200px;
            background:#ff69b4;
        }



3、flex布局

html结构：

    <div class="container">
        <div class="left"></div>
        <div class="main">center</div>
        <div class="right">right</div>
    </div>

css样式：

     .container{
            display: flex;
        }
        .left{
            width:200px;
            background: red;
        }
        .main{
            flex: 1;
            background: blue;
        }
        .right{
            width:200px;
            background: red;
        }

这种布局方式，高度由内容决定。



4、table布局 

html结构:

    <div class="container">
        <div class="left">left</div>
        <div class="main">center</div>
        <div class="right">right</div>
    </div>

css样式：



         .container{
            display: table;
            width:100%;
        }
        .container>div{
            display: table-cell;
        }
        .left{
            width: 100px;
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            width: 200px;
            background: red;
        }

高度由内容决定。



5、Grid网格布局

html结构：

    <div class="container">
        <div class="left">left</div>
        <div class="main">center</div>
        <div class="right">right</div>
    </div>

css样式：



        .container{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;  /*设置行高*/
            grid-template-columns: 100px auto 200px;  /*设置列数属性*/
        }
        .left{
            background: red;
        }
        .main{
            background: blue;
        }
        .right{
            background:red;
        }

6、圣杯布局

html结构：



    <div class="container">
        <div class="main col">Main</div>
        <div class="left col">Left</div>
        <div class="right col">Right</div>
    </div>

css样式：



        /* 两边定宽，中间自适用 */
        body,html,.container{
            height: 100%;
            padding:0;
            margin: 0;
        }
        .col{
            float: left;   /* 三个col都设置float: left,为了把left和right定位到左右部分 */
            position:relative;
        }
         /*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/
        .container{
            padding:0 200px 0 100px;
        }
        /*左边栏*/
        .left{
            left:-100px;
            width: 100px;
            height:100%;
            margin-left: -100%;
            background: #ff69b4;
        }
        /*中间栏*/
        .main{
            width:100%;
            height: 100%;
            background: #659;
        }
        /*右边栏*/
        .right{
            right:-200px;
            width:200px;
            height:100%;
            margin-left: -200px;
            background: #ff69b4;
        }

总结：圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签



7、双飞翼布局

html结构：



    <div class="container">
        <div class="main col ">
            <div class="main_inner">Main</div>
        </div>
        <div class="left col ">Left</div>
        <div class="right col ">Right</div>
    </div>

css样式：



        body,html,.container{
            height: 100%;
            padding:0;
            margin: 0;
        }
        .col{ 
            float: left; /* 把left和right定位到左右部分 */
        }
        .main{ 
            width:100%;
            height:100%;
            background: #659;
        }
        .main_inner{   /* 处理中间栏的内容被遮盖问题 */
            margin:0 200px 0 100px;
        }
        .left{
            width: 100px;
            height: 100%;
            margin-left: -100%;
            background: #ff69b4;
        }
        .right{
            height:100%;
            width:200px;
            margin-left: -200px;
            background: #ff69b4;
        }

双飞翼布局的好处：

（1）主要的内容先加载的优化。

（2）兼容目前所有的主流浏览器，包括IE6在内。

（3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。


8、对比圣杯布局和双飞翼布局：

（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

（2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别结局中间栏内容被覆盖的问题。

（3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。

收起

展开全文

布局圣杯布局双飞翼布局

HTML之基本布局设计之三栏式、两栏式设计

千次阅读 2015-11-21 10:27:40

本文主要介绍的是如何构建布局，主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素，接...三栏式 HTML代码 <!DOCTYPE html> <title>This is my


本文主要介绍的是如何构建布局，主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id等众多html的常用元素，接下来就直接上代码吧~

三栏式 


HTML代码
<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<meta charset="utf-8">
<title>This is my title</title>
      <style>
          #big-box{
             display:block;
             border:1px solid blue;
             width:650px;
             height:400px;
             margin:auto;
}
          #header{
             padding:auto;
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}

          #left{
             border:1px solid blue;
             margin-left:10px;

             height:250px;
             width:175px;
             float:left;
}
          #main{
             border:1px solid blue;
             height:250px;
             width:250px;
             margin-left:auto;
             margin-right:auto;

}
          #right{
             border:1px solid blue;
             margin-right:10px;
             margin-top:-250px;
             height:250px;
             width:175px;
             float:right;
}
          #footer{
             margin-top:10px;
             border:1px solid blue;
             clear:both;
             margin-left:10px;
             margin-right:10px;
}
      </style>
</head>
<body>
  <div id="big-box">
      <p id = "header">header header header header header header header header header header</p>

      <div id="left">
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
        <p>left left left</p>
      </div>
      <div id="main">
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
      </div>
      <div id="right">
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
        <p>right right right</p>
      </div>

        <p id = "footer">footer footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer</p>
  </div>
</body>
</html>

**小结： 

1、对于以上的实现，其中中间部分居中可以通过先设置最外表包含中间三个部分的div然后再将中间部分的margin-left和margin-right设置为auto就行了； 

2、另外要让左边与中间的距离和右边与中间的距离相同的方式就是设置左边的margin-left与右边的margin-right相同即可，因为之前设置中间部分的margin-right和margin-left为auto所以就会自动调节为两边的距离相同； 

3、此时右边的会在它原本所处的位置上float：right而不是和左边部分中间部分同高，此时设置margin-top的值为左边部分中间部分的height的负数即可。**

两栏式 

<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<meta charset="utf-8">
<title>This is my title</title>
      <style>
          #big-box{
             display:block;
             border:1px solid blue;
             width:640px;
             height:410px;
             margin:auto;
}
          #header{
             padding:auto;
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
          #left{
             border:1px solid blue;
             margin-left:10px;
             width:240px;
             height:265px;
             float:left;
}
          #left1{
             border:1px solid blue;
             margin:5px;
             height:125px;;
}
          #left2{
             border:1px solid blue;
             margin:5px;
             height:125px;            
}

          #main{
             border:1px solid blue;
             margin-left:auto;
             margin-right:10px;
             height:265px;
             width:370px;
}
          #footer{

             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
      </style>
</head>
<body>
  <div id="big-box">
      <p id = "header">header header header header header header header header header header</p>
      <div id="left">
        <div id="left1">
           <p>left1 left1 left1</p>
           <p>left1 left1 left1</p>
           <p>left1 left1 left1</p>
        </div>
        <div id="left2">
           <p>left2 left2 left2</p>
           <p>left2 left2 left2</p>
           <p>left2 left2 left2</p>
        </div>
      </div>
      <div id="main">
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
      </div>

        <p id="footer">footer footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer</p>
  </div>
</body>
</html>



<!DOCTYPE  html>
<html  lang="zh-cn">
<head>
<meta charset="utf-8">
<title>This is my title</title>
      <style>
          #big-box{
             display:block;
             border:1px solid blue;
             width:640px;
             height:430px;
             margin:auto;
}
          #header{
             padding:auto;
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
          #left{
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             width:240px;
             height:280px;
             float:left;
}
          #left12{
             display:inline-block;
             border:1px solid blue;
             width:230px;
             height:130px;
             margin:5px;
}
          #left1{
             border:1px solid blue;
             margin:5px;
             float:left;
}
          #left2{
             border:1px solid blue;
             width:166px;
             margin:5px;
             float:right;
}
          #left3{
             border:1px solid blue;
             margin:5px;
             clear:both;
} 
          #main{
             border:1px solid blue;
             margin-top:25px;
             margin-left:260px;
             height:280px;
             width:370px;

}
          #footer{
             padding:auto;
             border:1px solid blue;
             margin-top:10px;
             margin-left:10px;
             margin-right:10px;
}
      </style>
</head>
<body>
  <div id="big-box">
      <p id = "header">header header header header header header header header header header</p>
      <div id="left">
        <div id="left12">
        <div id="left1">
           <p>left1</p>
           <p>left1</p>
           <p>left1</p>
        </div>
        <div id="left2">
           <p>left2 left2</p>
           <p>left2 left2</p>
           <p>left2 left2</p>
        </div>
        </div>
        <div id="left3">
           <p>left3 left3 left3</p>
           <p>left3 left3 eft3</p>
           <p>left3 left3 left3</p>
        </div>
      </div>
      <div id="main">
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
        <p>main main main</p>
      </div>

      <div id = "footer">
        <p>footer footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer</p>
      </div>
  </div>
</body>
</html>



<!DOCTYPE HTML>
<html>
<head>
    <title>古诗词-人间词话七则</title>
    <style>
        html {
            background:#F3EBBC;
            font-size: 20px;
        }
        #all{
            width:1000px;
            margin:auto;
}
        a:visited{
            color:blue;
            text-decoration:underline;
}
        #search{
            margin-top:-45px;
            margin-left:280px;
}
        #linktop{
            background:#DED38C;
}
        #linkright{
            margin-left:10px;
            width:200px;
            margin-top:20px;
            border:1px solid blue;
            float:right;
            word-break:keep-all;
}
        #main{
            margin-top:20px;
            float:left;
            width:750px;

}
        #title{
            position:relative;
            z-index:1;
            top:-230px;
            left:280px;
}
        #author{
            position:relative;
            z-index:1;
            top:-220px;
            left:350px;
}
        #content{
            position:relative;
            top:-150px;
            text-indent:2em;
}
    </style>

</head>
<body>        <div id = "all">
              <img src = "images/logo.jpg">
              <div id = "search">    
              <input type="text" value="search" style="width:600px;" <p> search</p>
              </div>
              <div id = "linktop">
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%85%88%e7%a7%a6">先秦</a>
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e4%b8%a4%e6%b1%89">两汉</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%ad%8f%e6%99%8b">魏晋</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%8d%97%e5%8c%97%e6%9c%9d">南北朝</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%9a%8b%e4%bb%a3">隋代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%94%90%e4%bb%a3">唐代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e4%ba%94%e4%bb%a3">五代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%ae%8b%e4%bb%a3">宋代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e9%87%91%e6%9c%9d">金朝</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e5%85%83%e4%bb%a3">元代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e6%98%8e%e4%bb%a3">明代</a> 
              <a href="http://so.gushiwen.org/type.aspx?p=1&c=%e6%b8%85%e4%bb%a3">清代</a> 
              </div>
              <div id="linkright">
            <a href="http://so.gushiwen.org/guwen/book_2.aspx">论语</a>
            <a href="http://so.gushiwen.org/guwen/book_5.aspx">史记</a>
            <a href="http://so.gushiwen.org/guwen/book_6.aspx">周易</a>
            <a href="http://so.gushiwen.org/guwen/book_7.aspx">易传</a>
            <a href="http://so.gushiwen.org/guwen/book_11.aspx">孟子</a>
            <a href="http://so.gushiwen.org/guwen/book_19.aspx">左传</a>
            <a href="http://so.gushiwen.org/guwen/book_20.aspx">大学</a>
            <a href="http://so.gushiwen.org/guwen/book_21.aspx">中庸</a>
            <a href="http://so.gushiwen.org/guwen/book_22.aspx">尚书</a>
            <a href="http://so.gushiwen.org/guwen/book_23.aspx">礼记</a>
            <a href="http://so.gushiwen.org/guwen/book_24.aspx">周礼</a>
            <a href="http://so.gushiwen.org/guwen/book_25.aspx">仪礼</a>
            <a href="http://so.gushiwen.org/guwen/book_26.aspx">庄子</a>
            <a href="http://so.gushiwen.org/guwen/book_28.aspx">老子</a>
            <a href="http://so.gushiwen.org/guwen/book_11.aspx">孟子</a>
            <a href="http://so.gushiwen.org/guwen/book_29.aspx">墨子</a>
            <a href="http://so.gushiwen.org/guwen/book_30.aspx">荀子</a>
            <a href="http://so.gushiwen.org/guwen/book_32.aspx">列子</a>
            <a href="http://so.gushiwen.org/guwen/book_34.aspx">管子</a>
            <a href="http://so.gushiwen.org/guwen/book_36.aspx">吴子</a>
            <a href="http://so.gushiwen.org/guwen/book_39.aspx">素书</a>
            <a href="http://so.gushiwen.org/guwen/book_45.aspx">孝经</a>
            <a href="http://so.gushiwen.org/guwen/book_55.aspx">将苑</a>
            <a href="http://so.gushiwen.org/guwen/book_56.aspx">六韬</a>
            <a href="http://so.gushiwen.org/guwen/book_57.aspx">反经</a>
            <a href="http://so.gushiwen.org/guwen/book_71.aspx">冰鉴</a>
            <a href="http://so.gushiwen.org/guwen/book_74.aspx">论衡</a>
            <a href="http://so.gushiwen.org/guwen/book_78.aspx">智囊</a>
            <a href="http://so.gushiwen.org/guwen/book_40.aspx">汉书</a>
            <a href="http://so.gushiwen.org/guwen/book_41.aspx">后汉书</a>
            <a href="http://so.gushiwen.org/guwen/book_31.aspx">韩非子</a>
            <a href="http://so.gushiwen.org/guwen/book_33.aspx">淮南子</a>
            <a href="http://so.gushiwen.org/guwen/book_35.aspx">尉缭子</a>
            <a href="http://so.gushiwen.org/guwen/book_1.aspx">山海经</a>
            <a href="http://so.gushiwen.org/guwen/book_15.aspx">三字经</a>
            <a href="http://so.gushiwen.org/guwen/book_16.aspx">百家姓</a>
            <a href="http://so.gushiwen.org/guwen/book_17.aspx">千字文</a>
            <a href="http://so.gushiwen.org/guwen/book_27.aspx">鬼谷子</a>
            <a href="http://so.gushiwen.org/guwen/book_37.aspx">伤寒论</a>
            <a href="http://so.gushiwen.org/guwen/book_42.aspx">商君书</a>
            <a href="http://so.gushiwen.org/guwen/book_53.aspx">战国策</a>
            <a href="http://so.gushiwen.org/guwen/book_54.aspx">三国志</a>
            <a href="http://so.gushiwen.org/guwen/book_59.aspx">司马法</a>
            <a href="http://so.gushiwen.org/guwen/book_60.aspx">逸周书</a>
            <a href="http://so.gushiwen.org/guwen/book_49.aspx">搜神记</a>
            <a href="http://so.gushiwen.org/guwen/book_63.aspx">金刚经</a>
            <a href="http://so.gushiwen.org/guwen/book_66.aspx">地藏经</a>
            <a href="http://so.gushiwen.org/guwen/book_68.aspx">弟子规</a>
            <a href="http://so.gushiwen.org/guwen/book_75.aspx">菜根谭</a>
            <a href="http://so.gushiwen.org/guwen/book_77.aspx">水经注</a>
            <a href="http://so.gushiwen.org/guwen/book_3.aspx">孙子兵法</a>
            <a href="http://so.gushiwen.org/guwen/book_4.aspx">三十六计</a>
            <a href="http://so.gushiwen.org/guwen/book_8.aspx">资治通鉴</a>
            <a href="http://so.gushiwen.org/guwen/book_9.aspx">续资治通鉴</a>
            <a href="http://so.gushiwen.org/guwen/book_10.aspx">黄帝内经</a>
            <a href="http://so.gushiwen.org/guwen/book_12.aspx">本草纲目</a>
            <a href="http://so.gushiwen.org/guwen/book_13.aspx">了凡四训</a>
            <a href="http://so.gushiwen.org/guwen/book_14.aspx">梦溪笔谈</a>
            <a href="http://so.gushiwen.org/guwen/book_18.aspx">世说新语</a>
            <a href="http://so.gushiwen.org/guwen/book_38.aspx">天工开物</a>
            <a href="http://so.gushiwen.org/guwen/book_43.aspx">文心雕龙</a>
            <a href="http://so.gushiwen.org/guwen/book_44.aspx">吕氏春秋</a>
            <a href="http://so.gushiwen.org/guwen/book_46.aspx">孔子家语</a>
            <a href="http://so.gushiwen.org/guwen/book_47.aspx">颜氏家训</a>
            <a href="http://so.gushiwen.org/guwen/book_48.aspx">孙膑兵法</a>
            <a href="http://so.gushiwen.org/guwen/book_51.aspx">笑林广记</a>
            <a href="http://so.gushiwen.org/guwen/book_52.aspx">百战奇略</a>
            <a href="http://so.gushiwen.org/guwen/book_58.aspx">公孙龙子</a>
            <a href="http://so.gushiwen.org/guwen/book_61.aspx">黄帝四经</a>
            <a href="http://so.gushiwen.org/guwen/book_62.aspx">贞观政要</a>
            <a href="http://so.gushiwen.org/guwen/book_64.aspx">文昌孝经</a>
            <a href="http://so.gushiwen.org/guwen/book_65.aspx">六祖坛经</a>
            <a href="http://so.gushiwen.org/guwen/book_69.aspx">增广贤文</a>
            <a href="http://so.gushiwen.org/guwen/book_70.aspx">幼学琼林</a>
            <a href="http://so.gushiwen.org/guwen/book_50.aspx">搜神后记</a>
            <a href="http://so.gushiwen.org/guwen/book_72.aspx">容斋随笔</a>
            <a href="http://so.gushiwen.org/guwen/book_73.aspx">围炉夜话</a>
            <a href="http://so.gushiwen.org/guwen/book_79.aspx">农桑辑要</a>
            <a href="http://so.gushiwen.org/guwen/book_67.aspx">徐霞客游记</a>
            <a href="http://so.gushiwen.org/guwen/book_76.aspx">四十二章经</a>
            <a href="http://so.gushiwen.org/guwen/">更多>></a>
            </div>

            <div id = "main">

            <img src = "images/main.jpg" style="width:750px;opacity:0.2;">
            <div id = "title">
            <h1>人间词话七则</h1>
            </div>
            <div id="author">
            <h2>王国维</h2>
            </div>
            <div id = "content">
            <p>有有我之境，有无我之境。“泪眼问花花不语，乱红飞过秋千去。”“可堪孤馆闭春寒，杜鹃声里斜阳暮。”有我之境也。“采菊东篱下，悠然见南山。”“寒波澹澹起，白鸟悠悠下。”无我之境也。有我之境，以我观物，故物我皆著我之色彩。无我之境，以物观物，故不知何者为我，何者为物。古人为词，写有我之境者为多，然未始不能写无我之境，此在豪杰之士能自树立耳。</p>
            <p>境非独谓景物也。喜怒哀乐，亦人心中之一境界。故能写真景物，真感情者，谓之有境界。否则谓之无境界。</p>
            <p>境界有大小，不以是而分优劣。“细雨鱼儿出，微风燕子斜”何遽不若“落日照大旗，马鸣风萧萧”。“宝帘闲挂小银钩”何遽不若“雾失楼台，月迷津渡”也。</p>
            <p>词至李后主而眼界始大，感慨遂深，遂变伶工之词而为士大夫之词。周介存置诸温韦之下，可为颠倒黑白矣。“自是人生长恨水长东”、“流水落花春去也，天上人间”，《金荃》《浣花》，能有此气象耶？</p>
            <p>古今之成大事业、大学问者，罔不经过三种之境界：“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。”此第三境界也。此等语皆非大词人不能道。然遽以此意解释诸词，恐为晏欧诸公所不许也。</p>
            <p>大家之作，其言情也必沁人心脾，其写景也必豁人耳目。其辞脱口而出，无矫揉妆束之态。以其所见者真，所知者深也。诗词皆然。持此以衡古今之作者，可无大误也。</p>
            <p>诗人对宇宙人生，须入乎其内，又须出乎其外。入乎其内，故能写之。出乎其外，故能观之。入乎其内，故有生气。出乎其外，故有高致。美成能入而不出。白石以降，于此二事皆未梦见。           </p>
            </div>
            </div>
            </div>
</body>
</html>

收起

展开全文

html 布局设计

css布局：table布局、两栏布局、三栏布局
千次阅读 2017-10-06 14:15:51
css布局：table布局、两栏布局、三栏布局
收起
css 布局
CSS实现比例固定且大小随浏览器窗变化的自适应三栏布局
千次阅读 2017-02-24 10:34:20
头行、脚行和中间部分的最小宽度可设，当浏览器视窗宽度大于此值时，按比例增长，中间部分划分为三栏，三栏宽度比例固定，但宽度皆不固定，随览器视窗宽度变化而变化，三栏的高度固定。 2.代码如下： ...
收起
div+css三栏式布局
千次阅读 2016-03-19 01:04:28
最近组队报名参加了百度前端技术学院，里面有针对学习前端各个不同阶段的任务，然后在git上推送自己写的任务代码，也可以查看别人的代码，通过这种方式来...然后我选了几个任务，其中就有一个是div+css三栏式布局的。
收起
bootstrap 3-三栏简介布局
千次阅读 2017-01-25 16:30:14
三栏布局 1、栅格系统布局一个典型的栅格系统布局 .col-md-4 .col-md-4 .col-md-4 效果如下: a)行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中 b)使用.col-md-*栅格类...
收起
flex实现三栏布局原理
千次阅读 2018-05-16 10:43:50
介绍完了三个属性，我们再回过头来看flex实现三栏布局的原理我们left和right设置了固定的宽度，然后将flex-basis设置为0，使得容器的剩余空间仅为容器总宽度减去left和right的宽度，不减去center本身内容的...
收起
HTML+CSS三栏式布局（7种）
千次阅读 2019-04-22 20:00:01
特点：左右两栏利用中间的margin挤出空间，左侧向左浮动，右侧向右浮动，中间不设置宽度，随着屏幕的缩小，左右两栏的宽度会保持不变，中间的宽度会减小。 2.且对定位absolute（脱离文档流） ...
收起
html+css
CSS中的布局方式（两栏布局、三栏布局）
千次阅读 2018-10-15 20:39:57
前面的实现都一样，三栏都向左浮动，center的宽度为100%，left的margin-left为-100%，right的margin-left为其自身宽度的负值。但此时左右边栏实际上是在center上方的，会遮盖center内容。此时为container设置...
收起
两栏布局 flex
css使用弹性布局/定位布局实现三栏布局
千次阅读 2019-04-28 01:08:33
三栏布局：初学css的时候，什么是三栏布局？好高大上的样子。简单来说：就是网页分成三块，中间自适应，左右两边固定应用场景：视频播放进度条，两边固定，中间进度条根据电子屏幕自适应长度。弹性布局...
收起
使用sap BO sap BO报表制作财务三栏明细账
千次阅读 2017-10-31 10:09:27
2.财务需要根据这些分录明细数据做出传统三栏明细账 3.三栏明细账可以保存电子文件使用sap BO WEBI功能如下： 1.多个查询联合 2.嵌套查询 3.变量=函数，公式（模型字段重分类，数据多次加工处理），合并字段使用 4...
收起
css左右两栏、左中右三栏布局
千次阅读 2018-09-06 16:33:28
左右两栏： <style type="text/css"> .wrap{ margin: 0 auto; width: 1200px; } #left{/*左边宽度固定*/ width: 200px; height: 500px; background: pink; float: left; ...
收起
css布局
flex、绝对定位的三栏布局，以及flex的扩充
千次阅读 2018-07-22 16:34:21
在上一篇文章写了两栏等高、双飞翼和圣杯三栏布局。今天来继续完善三栏布局方式以及对flex布局继续完善。三栏布局依然是下面这样。 flex <section class='body'> <artical class='...
收起
笔试题目 -- css3弹性盒子flex实现三栏布局
千次阅读 2018-07-23 16:46:27
刚开始学习前端的时候，没有注意到...题目：请用flex实现三栏布局，高度已知，左右栏宽度300px，中间自适应。弹性盒子本身就是并排的，我们设置宽度即可。用一个容器container包裹三栏，设置comtainer容器的d...
收起
Flex布局 CSS属性
前端经典布局——左中右三栏
千次阅读 2020-10-27 17:52:19
1.flex弹性盒子 header和footer设置样式，横向撑满。 container中的left、center、right依次排布即可给container设置弹性布局 display: flex; left和right区域定宽，center设置 flex: 1; 即可 ...
收起
网页三栏布局五种实现方式（左中右）
千次阅读 2020-05-07 14:46:26
适用：高度固定左右宽度固定中间自适应 <html> <head> <title>三栏布局</title> <meta charset="utf-8"> <style> * { padding: 0; margin: 0; ...
收起
css
CSS响应式布局--三栏布局实例演示及优缺点详解
千次阅读 2018-10-05 12:20:39
学前端的小伙伴们都知道，CSS学起来很...本次介绍的内容是CSS响应式布局--三栏布局这是一道前端面试有关css内容的常考题。一般上来就会问：请你实现一下三栏布局：一般的同学只是想到了一两种比如 float、a...
收起
CSS layout
[css] 使用flex实现三栏布局，两边固定，中间自适应
千次阅读 多人点赞 2021-02-14 20:21:36
[css] 使用flex实现三栏布局，两边固定，中间自适应同意里面的一个回答，现在有很多简单的实现方式，传统的这个也是一种hack的方式，真的没必要去追究了，但是核心知识点可以掌握。 1.把 center 放在最前面，优先...
收起
html--三栏布局（两边固定宽度，中间自适应）
千次阅读 2016-12-06 11:47:54
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin...于是实现了三栏自适应布局。 #left{ width: 180px; height: 100%; background: blue; position: absolute; left:
收起
布局
div实现页面划分为左，中，右三栏
千次阅读 2019-09-17 10:58:04
1、实现方法 2、注意的问题 1、实现方法利用css分栏，一个整体的div id为wrap ，包含三个div，分别代表左栏（wrap-1）、中栏(wrap-m)、右栏（wrap-r）通过float...
收起
zen cart首页与产品页各个页面显示单栏双栏三栏的方法
千次阅读 2012-07-24 17:39:14
zencart如何实现首页是3栏而内页是2栏？ Zen Cart每个页面的栏目都是可以单独控制的。将右栏目在全站范围打开，然后，对只要显示两个栏目的页面单独进行设置。比如，要将商品信息页面设置为两栏： 1. 在你...
收起
c
三栏布局方案：左右宽度固定，自适应布局
千次阅读 2016-11-20 16:50:03
一、absolute+margin 主内容栏自适应宽度左侧边栏固定宽度右侧边栏固定宽度 #main{ height:100%; margin:0 210px; } #left,#right{ width:
收起
html三级导航栏编写
千次阅读 2020-02-09 16:48:03
<!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...三级导航</title> <style> * { margin:0; padding:0; } ul,ol,li { list-styl...
收起
html
CSS_Layout三分栏__左右两栏宽度固定,中间自适应
千次阅读 2010-03-17 14:40:00
三分栏：左右两栏宽度固定，中间栏宽度自适应 <!-- body{ min-width:800px; } h1, h2, div p{ margin:0; padding:10px; } #wrapper{ width:90%; margin:0 auto; background:#ddd; ...
收起
layout css float div html
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
万次阅读 多人点赞 2016-08-08 22:04:20
今天太累了，写不了了，先留着写。 1.css3之前三种方法：圣杯布局 2 ， css3新特性多栏布局弹性盒模型布局
收起
CSS3 布局 css
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
千次阅读 2020-04-19 19:34:06
文章目录【考拉海购网站】之【分类导航栏】第一步，分析页面布局第二步，写需要的html标签【考拉海购网站】之【分类导航栏】之前我们做了顶部导航和搜索框的部分，这一篇我来讲解如何...3，三级菜单内容 &...
收起
css css3 html5 javascript 前端
HTML+CSS 简单的顶部导航栏菜单制作
千次阅读 多人点赞 2021-04-26 14:38:36
导航栏的制作：技术要求： CSS HTML各类标签实现目的：导航栏菜单代码分析：基本样式清除无序列原点删除 ...分三栏布局：使用浮动 logo一栏；选择框一栏；搜索框一栏 logo部分： ...
收起
css html
前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应
千次阅读 2017-06-13 15:14:36
右侧默认宽度，且将margin-left的值设为200px，即为左栏的宽度。 body{margin:0;} .left{ position:absolute; top:0; width:200px; height:400px; background:#99F; left:0;} .main{ height:400px; ...
收起

图解DIV-CSS布局中绝对定位和浮动用法(两种分三栏布局的方法)

自适应网页中3种三栏布局的用法

布局：三栏布局（7种方法）

布局：三栏布局（7种方法）

1、绝对定位布局：position + margin

2、浮动布局： float + margin

3、flex布局

4、table布局

5、Grid网格布局

6、圣杯布局

7、双飞翼布局

8、对比圣杯布局和双飞翼布局：

HTML之基本布局设计之三栏式、两栏式设计

css布局：table布局、两栏布局、三栏布局

CSS实现比例固定且大小随浏览器窗变化的自适应三栏布局

div+css三栏式布局

bootstrap 3-三栏简介布局

flex实现三栏布局原理

HTML+CSS三栏式布局（7种）

CSS中的布局方式（两栏布局、三栏布局）

css使用弹性布局/定位布局实现三栏布局

使用sap BO sap BO报表制作财务三栏明细账

css左右两栏、左中右三栏布局

flex、绝对定位的三栏布局，以及flex的扩充

笔试题目 -- css3弹性盒子flex实现三栏布局

前端经典布局——左中右三栏

网页三栏布局五种实现方式（左中右）

CSS响应式布局--三栏布局实例演示及优缺点详解

[css] 使用flex实现三栏布局，两边固定，中间自适应

html--三栏布局（两边固定宽度，中间自适应）

div实现页面划分为左，中，右三栏

zen cart首页与产品页各个页面 显示单栏双栏三栏的方法

三栏布局方案：左右宽度固定，自适应布局

html三级导航栏编写

CSS_Layout三分栏__左右两栏宽度固定,中间自适应

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】

HTML+CSS 简单的顶部导航栏菜单制作

前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

zen cart首页与产品页各个页面显示单栏双栏三栏的方法