一、左右布局

可以用float标签实现，左侧定宽，右侧自适应。

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    margin-left: 200px;
    background-color:black;
}

二、左中右布局

可以用浮动float布局实现。

 .left{
       width: 300px;
       height: 100px;
       background-color: #823384;
       float:left;
}
 .center{
       height: 100px;
       background-color: #d29922;
       margin-left:200px;
       margin-right:200px;
}
.right{
       width: 300px;
       height: 100px;
       background-color: #0c8ac5;
       float:right;
}

三、水平居中

目前知道2种方法实现水平居中，以后可继续补充。

• 1、首先给div块级元素设置固定宽高，示例：

height: 100px;
width: 50px;

然后给div块级元素设置左右外间距，示例：

margin-left: auto;
margin-right: auto;

• 2、在块级元素div中加入内联元素，示例：

<div>
   <p>123</p>
    466
</div>

说明：123和456都是块级元素div的内联元素.
然后给块级元素div增加此块级元素div内的内联元素都水平居中的样式，示例：

text-align: center

四、垂直居中

/*固定宽度水平居中*/
.center {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/*子元素display:inline-block,父元素设text-align:center实现水平居中*/
div{
  text-align:center;
}
div .center{
  display:inline-block;
}

五、CSS三角形

先编写一个空元素

<div class="triangle"></div>

然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

.triangle { 
border-color: transparent transparent green transparent; 
border-style: solid;
 border-width: 0px 300px 300px 300px; 
height: 0px; 
width: 0px;
 }