css无序列表黑点如何换成三角形

1、首先创建一个HTML示例文件。

2、其次设置一个span元素为块级元素。

3、然后分别设置border的四边都为不同的颜色。

4、最后通过设置上边框和左右边框宽度实现三角形即可。

css定义一条导航栏

首先建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：

ul {width:宽度值；height：高度值； list-style:none；}

如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left}

每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html

简单的动画”复选框

设置HTML创建一个标准的无序列表（为了方便测试，特别复制出一份代码）

<ul>

<li>

<input type="checkbox" name="manager" id="manager" />

<label for="manager">Project Manager</label>

</li>

<li>

<input type="checkbox" name="webdesigner" id="webdesigner" />

<label for="webdesigner">Web Designer</label>

</li>

<li>

<input type="checkbox" name="webdev" id="webdev" />

<label for="webdev">Web Developer</label>

</li>

<li>

<input type="checkbox" name="seo" id="seo" />

<label for="seo">SEO</label>

</li>

<li>

<input type="checkbox" name="itstaff" id="itstaff" />

<label for="itstaff">IT Staff</label>

</li>

<li>

<input type="checkbox" name="csr" id="csr" />

<label for="csr">Customer Service Representative</label>

</li>

</ul>

首先，隐藏复选框

/* Hide the Ordinary Checkbox */

input[type="checkbox"] {

display: none

}

然后需要在我们的列表和标签标记的相对位置和填充设置一些样式。

下一步需要使用伪代码在标签之前和之后设置样式。对于这部分，我们将设置复选框Font Awesome，用一个矢量图标。

/* Checkbox Icons */

label {

position: relative

padding-left: 30px

font-size: 30px

cursor: pointer

color: #fff

padding: 16px 28px 0 0

}

label:before, label:after {

font-family: FontAwesome

font-size: 50px

/*absolutely positioned*/

position: absolutetop: 0left: -49pxright: 10px

}

现在我们需要设置图标步骤之前和之后的复选框。

label:before {

content: '\f096'/*checkbox unchecked */

}

label:after {

content: '\f00c'/*checkbox checked*/

max-width: 0

overflow: hidden

opacity: 0.5

font-size: 27px

top: 16px

left: -42px

color: #f2ca27

-webkit-transition: all 0.50s

-moz-transition: all 0.50s

-o-transition: all 0.50s

transition: all 0.50s

}

最后一步是设定一个目标，文本框和复选框后的伪代码，并给它一个最大宽度25像素之间和不透明度1。

/* Animating the Checkbox Icon */

input[type="checkbox"]:checked + label:after {

max-width: 25px

opacity: 1

margin-right: 90px

}

---