下面是一些三角形样式，部分我在仿站练习时，用到了的图案，加了点颜色美化，记录一下...

各种三角形的效果图和代码记录

三角形，倒三角形，左三角形，右三角形

上三角

效果图：

代码样式：

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid #f44336;
}

右三角

效果图：

代码样式：

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:100px solid #2196f3;
}

下三角

效果图：

代码样式：

#triangle{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:100px solid #e91e63;
}

左三角

效果图：

代码样式：

#triangle{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:100px solid #9c27b0;
}

左上直角三角形

效果图：

代码样式：

#triangle{
   width: 0px;  
   height: 0px;  
   margin: 10px 10px;  
   float: left;  
   border-right: 100px solid transparent;
   border-top: 100px solid #ff5722;  
}

右上直角三角形

效果图：

代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;
  border-top: 100px solid #ffca28;  
}

右下直角三角形

效果图：

代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-right: 100px solid transparent; 
  border-bottom: 100px solid #4caf50; 
}

左下直角三角形

效果图：

代码样式：

#triangle{
  width: 0px;  
  height: 0px;  
  margin: 10px 10px;  
  float: left;  
  border-left: 100px solid transparent;  
  border-bottom: 100px solid #009688;  
}

在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

作为初学者的我，有时会感到困惑「(°ヘ°)，这路径什么鬼Σ (ﾟДﾟ;) ，怎么写的啊(⊙_⊙)?，
下面我就介绍一下了解到的相对路径与绝对路径。

根相对路径（也称相对跟目录）的路径以“/”开头，路径是从当前站点的根目录开始计算。

/ 代表根目录，慎用

../ 代表上一级目录

../../ 代表上两级目录

/..代表下级目录

/../.. 代表下两级目录

标准写法：

同级 直接引用文件名

<link rel="stylesheet" type="text/css" href="main.css" />

下级 同级目录/下级目录/文件名

<link rel="stylesheet" type="text/css" href="css/main.css" />

HTML有2种路径的写法：相对路径和绝对路径。

相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。

1.HTML相对路径(Relative Path)

用途：指定由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系
如果源文件和引用文件在同一个目录里，直接写引用文件名即可，这时引用文件的方式就是使用相对路径。

下面建立两个HTML文档info.html和index.html，用作示例，要求都是在xiaomo.html加入index.html超链接。
eg1：相对路径的简单应用

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/index.html
eg2：如何表示上级目录

../表示源文件所在目录的上一级目录，http://www.moshanghua.com/表示源文件所在目录的上上级目录，以此类推。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/index.html
eg3：如何表示上上级目录

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/wowstory/index.html

写法：index.html
eg4：如何表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

假设：xiaomo.html路径是：c:/Inetpub/wwwroot/sites/blabla/xiaomo.html

index.html路径是：c:/Inetpub/wwwroot/sites/blabla/html/index.html
2.HTML绝对路径(Absolute Path)

大家都知道，在我们平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径。

例如只要看到这个路径：c:/website /img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。

类似于这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。
注：
如果是纯手工编写html或者css、js的话，建议用相对路径，比如：../../css/main.css

如果是动态文件，比如jsp、php等，最好用网站的绝对路径。比如

{ctx}/css/main.css，其中ctx是自己定义的变量，它的值等于类似于http://localhost这种地址。
相对路径的缺点：
例如：../images/msh.png，这种写法，一旦我改变了引用页面文件的目录，这张图片就无法显示了。如果换成网站的绝对路径{ctx}/images/msh.png，那么不论我怎么移动引用的页面文件，只要图片的地址不变，都是可以访问的。
绝对路径的缺点：
对于静态文件，往往无法自动获取网站的根路径（{ctx}），所以要写绝对路径比较麻烦。

CSS 链接

在写这篇文章之前，只是知道有链接的不同状态下的样式这东西的存在，并未去认真了解过的链接的不同状态可以有不同的样式。

能够设置链接样式的 CSS 属性有很多种（例如 color, font-size, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：
- :link - :visited - :hover - :active

语法与说明：

:link 伪类向未访问的链接添加特殊的样式。

Selector : link { sRules }

设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性（特性）的a对象，此伪类不发生作用。
:visited 伪类向已访问的链接添加特殊的样式。

Selector : visited { sRules }

设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性（特性）的a对象，此伪类不发生作用。
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

Selector : hover { sRules }

设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。
:active 伪类向激活的元素添加特殊的样式。(:active 在鼠标点击与释放之间发生的事件)

Selector : active { sRules }

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。

定义和用法：

:link 伪类向未访问的链接添加特殊的样式。
这个伪类应用于尚未访问过的链接；也就是说，链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。

a:link { font-size:14px; text-decoration:underline; color:#000000; } 

:visited 伪类向已访问的链接添加特殊的样式。

a:visited { font-size: 14px;text-decoration:underline; color:#ff0000; } 

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

a:hover { font-size:14pt; text-decoration:underline; color:#00bfff; } 
a:hover span{ color:red; } 

:active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。
这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。

a:active { font-size:14px; text-decoration:underline; color:#ee82ee; }

注：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后！

CSS list-style-type 属性

list-style-type，是指在CSS中，不管是有序列表还是无序列表，都统一使用list-style-type属性来定义列表项符号。
语法：

list-style-type :value

属性值：

说明：

设置或检索对象的列表项所使用的预设标记。
若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。
仅作用于具有display值等于list-item的对象（如li对象）。
注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
所有主流浏览器都支持 list-style-type 属性，IE5.5尚不支持所有CSS2的值。
示例：

li { list-style-type: square }

list-style-type实例

设置不同的列表样式：

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-alpha}
ol.lower-alpha {list-style-type:lower-latin} 

CSS 定位机制

CSS 有三种基本的定位机制：

• 普通流
• 浮动
• 绝对定位

一、普通流

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

二、定位

１、相对定位

被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

<html>
<head>
<style>
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;
    }
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>

效果如下图所示：

２、绝对定位

相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<html>
<head>
<style>
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;
    }
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>

效果如下图所示：

备注：相对于已相对定位的祖先元素对框进行绝对定位，在大多数现代浏览器中都可以实现的很好。

３、固定定位

相对于浏览器窗口，其余的特点类似于绝对定位。

三、浮动

浮动的框可以在左右移动，直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
如果包含块太窄，无法容纳水平排列的浮动元素，那么其他浮动块向下移动，直到有足够多的空间。如果浮动元素的高度不同，那么当它们向下移动时可能会被其他浮动元素卡住。
行内元素会围绕着浮动框排列。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

清除浮动

简单介绍下清除浮动的2中方法。

方法一：结合:after选择器清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1 {
        border: 1px solid red;
        background-color: yellow;
    }
    
    .clear:after {
        content: "." ;
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    
    .box2 {
        width: 50px;
        height: 50px;
        float: left;
        background-color: orange;
    }
    
    p {
        float: right;
    }
    </style>
</head>
<body>
    <div class="box1 clear">
        <div class="box2">
            box2        </div>
        <p>
            lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦        </p>
    </div>
</body>
</html>

方法二，在容器最后添加一个空元素并且清理它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box1 {
        border: 1px solid red;
        background-color: yellow;
    }
    
    .empty{
        clear: both;
    }
    
    .box2 {
        width: 50px;
        height: 50px;
        float: left;
        background-color: orange;
    }
    
    p {
        float: right;
    }
    </style>
</head>
<body>
    <div class="box1 clear">
        <div class="box2">
            box2        </div>
       
        <p>
            lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦 lallalalalalal啦啦啦        </p>
        <br class="empty" />
    </div>
</body>
</html>

效果均如下所示：

附录：

CSS position 属性总结：

所有主流浏览器都支持 position 属性。position属性规定元素的定位类型，影响元素框生成的方式。
可能的值

CSS 定位属性
CSS 定位属性允许你对元素进行定位。