background 超链接导航栏案例定位

最新推荐文章于 2022-11-23 07:00:00 发布

weixin_30376323

最新推荐文章于 2022-11-23 07:00:00 发布

阅读量212

点赞数

文章标签：移动开发 javascript markdown ViewUI

原文链接：http://www.cnblogs.com/ls13691357174/p/9467747.html

版权

19-background

先来讲讲颜色表示法

一共有三种：单词、rgb表示法、十六进制表示法

rgb:红色绿色蓝色三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：

黑色：

光学显示器，每个元件都不发光，黑色的。

白色：

颜色可以叠加，比如黄色就是红色和绿色的叠加：

再比如：

就是红、绿、蓝三种颜色的不同比例叠加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,.5);*/
            /*background-color: #112233;*/
            /*background-color: #123*/
            /*background-color: #f00*/
            /*background-color:#123321;*/
            background-color: #666;


            /*43*/

            /*

            16进制

            2*16+11

            2b



            255

            15*16+15
            ff

            */
        }
    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

颜色

16进制表示法
红色：

所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表：
十进制数十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六进制中，13 这个数字表示什么？
表示1个16和3个1。那就是19。这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。

16进制中的2b等于10进制多少？
答：2*16+11 = 43。

16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175

16进制中的ff等于10进制多少？
答：15*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

等价于：

所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：

等价于

比如：

等价于

只能上面的方法简化，比如

无法简化！
再比如

无法简化！

要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

那么发现默认的背景图片，水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式

属性值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

给元素设置padding之后，发现padding的区域也会平铺背景图片。

repeat应用案例

还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置

属性值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0 0；

这两个值必须挨在一起。

雪碧图技术（精灵图技术）

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图，每个小图标节点如何显示单独的小图标呢？

其实就是截取大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    body{
        height: 2000px;
    }

    /*body{
        background-image: url(../day49/images/2.jpg);
    }*/
        .box{
            width: 25px;
            height: 13px;
            /*border: 1px solid red;*/
            /*background-image: url(./1.gif);*/
            /*background-repeat: no-repeat;*/
            /*
                background-position 如果为正值 相当于调整位置图的位置

            */
            /*background-position: 20px 30px;*/

            /*background-position: -25px -60px;*/

            background: url(./1.gif) no-repeat -25px -60px;


            /*让中心banner居中显示*/
            /*background-position: center top;*/

        }
        .广告{
            width: 100%;
            height: 120px;
            background-image: url('https://i1.mifile.cn/a4/cms_15337986888589_wGuOE.jpg');
            background-repeat: no-repeat;
            background-position: center top;
        }

        .active{
            width: 32px;
            height: 32px;
            background-image: url('https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png');
            background-repeat: no-repeat;
            /*固定*/
            background-attachment: fixed;
            border: 1px solid red;


            /*如果为负值 在一张大图 扣小图

            精灵图 技术

            */
            background-position: 0 -200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt="">
    </div>    

    <div class="广告">
        
        <a href="">
            
        </a>
    </div>

    <div class="active">
        
    </div>
</body>
</html>

精灵图抠图

我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，

那么我们可以此属性来制作通天banner。

18-超链接导航栏案例

直接上代码了

html结构

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

<div class="nav">
        <ul>
            <li>
                <a href="">路飞学城</a>
            </li>
            <li>
                <a href="">老男孩</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    </div>

View Code

写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏，并排显示元素，第一想浮动，想到使用浮动之后，一定记得清除浮动元素。

css代码如下：

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a标签除外，不继承父元素的color*/


        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

View Code

20-定位

定位

定位有三种：

1.相对定位 2.绝对定位 3.固定定位

这三种定位，每一种都暗藏玄机，所以我们要一一单讲。

相对定位:relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .child1{
            background-color: red;
        }
        .child2{
            background-color: green;
            position: relative;
            /*
            top left right bottom
            */
            top: -30px;
            left: 100px;
        }
        .child3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    
</body>
</html>

相对定位

相对定位:相对于自己原来的位置定位

现象和使用：

1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：

1.不脱标

2.形影分离

3.老家留坑（占着茅房不拉屎，恶心人）

所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：

1.微调元素位置

2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

参考点：

自己原来的位置做参考点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            position: relative;
            top: -5px;
        }
        input{
            font-size: 30px
        }
    </style>
</head>
<body>
    
    <a href="#">百度一下</a>
    <!-- <img src="../day49/images/2.jpg" alt=""> -->
    <input type="text">
</body>
</html>

相对位置微调元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 200px auto;
            position: relative;
        }
        .father2{
            width: 400px;
            height: 400px;
            background: black;
            margin-left: 30px;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top: 30px;
            left: 150px;
            
        }
        .child2{
            width: 200px;
            height: 250px;
            background-color: yellow;
        }
    </style>
</head>
<body style="height: 2000px;">
    
    <div class="father">
        <div class="father2">
            <div class="child"></div>
            <div class="child2"></div>
        </div>
    </div>
</body>
</html>

父相子绝

绝对定位 :absolute

特性：

1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：

一、单独一个绝对定位的盒子

1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

3.不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding

作用：页面布局常见的“父相子绝”，一定要会！！！！

绝对定位的盒子居中

当做公式记下来吧！

1 *{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         .box{
 6             width: 100%;
 7             height: 69px;
 8             background: #000;
 9         }
10         .box .c{
11             width: 960px;
12             height: 69px;
13             background-color: pink;
14             /*margin: 0 auto;*/
15             position: relative;
16             left: 50%;
17             margin-left: -480px;
18 
19             /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
20         }

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 100%;
            height: 400px;
            position: relative;
            background-color: red;
        }
        .wrap{
            width: 500px;
            height: 400px;
            position: absolute;
            background-color: green;
            /*
            margin: 0 auto 不起作用;
            
            left:50%;
            margin-left:宽度的一般;

            */
            left: 50%;
            margin-left: -250px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap"></div>
    </div>
    
</body>
</html>

绝对定位盒子居中

固定定位: fixed

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 100px;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999999;
        }
        .wrap{
            width: 100%;
            height: 1000px;
            background-color: green;
            /*margin-top: 100px;*/
        }
        .top{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: 100px;
            line-height: 100px;
            text-align: center;
        }
        .wrap a{
            position: relative;
            z-index: 99;
        }
    </style>
</head>

<body style="height: 2000px">

    <div class="header"></div>

    <div class="wrap">
        <a href="#">百度与喜爱</a>
    </div>

    <div class="top">回到顶部</div>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        
        $('.top').click(function() {
            $('html,body').animate({
                scrollTop:0
            },2000)
        });
    </script>
</body>
</html>

固定定位

21-z-index

z-index

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;

        }
        a{
            text-decoration: none;
        }
        .header{
            width: 100%;
            height: 120px;
            /*background-color:#333;*/
        }
        .container{
            width: 1226px;
            height: 100%;
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 62px;
            height: 55px;
            background-color:red;
            margin-top: 20px;
            position: relative;
        

        }
        .logo:hover{
            box-shadow: 0 15px 31px rgba(0,0,0,.5);
            top:-2px;
        }
        .header .head-info{
            float: left;
            
            padding-top: 30px;
        }
        .head-info ul li{
            float: left;
            width: 84px;
            height: 87px;
        }

        .header .head-form{
            float: right;
            width: 297px;
            /*height: 50px;*/
            margin-top: 30px;
        }
        .head-form form{
            position: relative;
            width: 297px;
            height: 50px;
        }

        .head-form form input{
            outline:none;
            float: left;
            border: 1px solid #e0e0e0;
            background: #fff;

        }

        .head-form form input[type = 'text']{
            
            width: 223px;
            height: 48px;
            padding: 0 10px;
        }
        .head-form form input[type = 'submit']{
                
                width: 52px;
                height: 50px;
               
                font-size: 24px;
                line-height: 24px;
                color: #616161;
               
        }
        .search-hot{
            position: absolute;
            right: 61px; 
            top: 14px;
        }
        .search-hot a{
            color: #757575;
            font-size: 12px;
            background-color: #eee;
            padding: 0 5px;
        }
        .search-hot a:hover{
            background-color: #ff6700;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="logo">
                <a href="#">
                    <img src="" alt="">
                </a>
            </div>

            <div class="head-info">
                <ul>
                    <li class="it">1</li>
                    <li class="item">2</li>
                    <li class="item">3</li>
                    <li class="item">4</li>
                    <li class="item">5</li>
                
                </ul>
            </div>

            <div class="head-form">
                <form action="">
                    
                    <input type="text">
                    <input type="submit">
                    <div class="search-hot">
                        <a href="#">小米8</a>
                        <a href="#">小米MIX 2S</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
</body>
</html>

小米案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tianliang{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
            z-index: 2;
            border-radius: 50%;

        }
        .lin{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
            z-index: 3;
        }
        .sendie{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 280px;
            left: 350px;
            z-index: 2;
        }
        .timi{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            top: -50px;
            left: 350px;

        }
    </style>
</head>
<body>
    <div class="tianliang">
        <div class="sendie"></div>
    </div>
    <div class="lin">
        <div class="timi"></div>
    </div>
</body>
</html>

从父现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 200px auto;
            position: relative;
        }
        .father2{
            width: 400px;
            height: 400px;
            background: black;
            margin-left: 30px;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            z-index: 10;
            
            
        }
        .child2{
            width: 200px;
            height: 250px;
            background-color: yellow;
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body style="height: 2000px;">
    
    <div class="father">
        <div class="father2">
            <div class="child"></div>
            <div class="child2"></div>
        </div>
    </div>
</body>
</html>

z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        
        @font-face {
          font-family: 'iconfont';
          src: url('./font/iconfont.eot');
          src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
          url('./font/iconfont.woff') format('woff'),
          url('./font/iconfont.ttf') format('truetype'),
          url('./font/iconfont.svg#iconfont') format('svg');
        }

        .iconfont{
          font-family:"iconfont" !important;
          font-size:16px;font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <i class="iconfont">&#xe605;</i>

</body>
</html>

iconfont的使用

阿里巴巴矢量图例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">

    <style type="text/css">

        @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe605;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe605;</div>
                </li>
            
        </ul>
        <h2 id="unicode-">unicode引用</h2>
        <hr>

        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
        </blockquote>
        <p>unicode使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
        <pre><code class="lang-js hljs javascript">@font-face {
  font-family: <span class="hljs-string">'iconfont'</span>;
  src: url(<span class="hljs-string">'iconfont.eot'</span>);
  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
        <pre><code class="lang-js hljs javascript">.iconfont{
  font-family:<span class="hljs-string">"iconfont"</span> !important;
  font-size:<span class="hljs-number">16</span>px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>


</body>
</html>