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

快来打我* 2023-07-24 13:24 5阅读 0赞

一：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上可看到提示文字
 *  代码演示

<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）

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读