静态网页制作小技巧（logo及字体图标）

一：logo的制作：
1.waht？？ logo，logo乃一个网站的灵魂，在这个看脸的时代，你懂得兄弟（会心一笑）
2.网页中logo部分的制作，当然要高大上，让老大（搜索引擎）宠幸呀！！！
3.别逼逼了，开始你的表演ok？
4.来了来了他真的来了。

• logo优化
  1）logo里首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要；
  2）h1里面放一个a标签，可以返回首页，给a一个大小和logo的背景图片
  3）a标签内要写文字（网站名称），为了搜索引擎收录我们，但文字不要显示出来
  *用text-indent 移到盒子外面（text-indent:-9999px）然后overflow:hidden（淘宝做法）
  *直接给font-size:0，不显示文字（京东做法）
  4）最后给a标签一个title 让鼠标放在logo上可看到提示文字
• 代码演示

 <!-- logo -->
        <div class="logo">
            <h1>
                <a href="#" title="真香">真香</a>
            </h1>
        </div>

OVER

二：字体图标
1.使用方法一

• 字体图标的下载
  1）点击（https://icomoon,io）下载自己项目所需
  2）下载完成后打开style.css复制首段，把复制的首段粘贴至项目css文件中
  3）把其中的fonts文件夹复制至项目根目录
  4）打开下载的deom,html复制所需图标（前面是数字，后面是图标），粘入所需地方（此处以i标签为例）
  5）在css文件中书写的格式（切记第一句要声明字体图标font-family:‘icomoon’）
• 代码演示

<i class="arrow"></i>
/*字体图标首段*/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?3a2xdr');
    src: url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?3a2xdr') format('truetype'), url('../fonts/icomoon.woff?3a2xdr') format('woff'), url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*写入arrow样式*/
.arrow {
    font-family: 'icomoon';
    margin-left: 6px;
}

2.使用方法二
大体一致，此方法引入字体图标编号（代码）

<i class="icomo"></i>

/*用伪元素减轻了HTML代码量（emmm差不多好像）*/
.icomo::before {
    font-family: 'icomoon';
    content: "\e956";
    margin-right: 3px;
}

ps:小陈小陈，心想事成（Jdoit···CW）