• CSS初始化内容mark+字体图标


    1. /* 清除内外边距*/
    2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
    3. margin:0;
    4. padding:0;
    5. }
    6. body { background:#fff; color:#666; font-size:14px; font-family: "微软雅黑",Verdana, Arial, Helvetica, sans-serif; }
    7. /*让斜体不倾斜*/
    8. em,
    9. i {
    10. font-style: normal;
    11. }
    12. /*去掉列表前面的小点*/
    13. li {
    14. list-style: none;
    15. }
    16. /*链接样式标签*/
    17. a {
    18. color:#333;
    19. text-decoration:none;
    20. }
    21. a:hover { color: #0306FF;}
    22. /*让图片没有边框 去掉图片底侧的空白缝隙*/
    23. img {
    24. border: 0; /*ie6*/
    25. vertical-align: middle;
    26. }
    27. /*清除浮动*/
    28. .clearfix:after {
    29. content: "";
    30. display: block;
    31. height: 0;
    32. visibility: hidden;
    33. clear: both;
    34. }
    35. .clearfix {
    36. /*ie6 、7专门清除浮动的样式*/
    37. *zoom: 1;
    38. }

    ico图标的引用(用来作为识别网站的标志,缩略网址前边的小图标就是ico图标)

    1.需要设计师提供图片( .jpg .jpeg .gif .png等图像格式)

    2.登录对应的网站制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net,将图片转换成ico格式的文件

    favicon.ico 这个图标建议放根目录下。

    3.使用代码

    字体图标

    进入icomoon(官网https://icomoon.io/)点击IcoMoon App,里面选择自己要的图标.

    选择的图标 会显示在Selection()里面,点击Generate Font创建字体图标,并会进入下载页面

    点击Download,下载字体图标到本地后解压文件夹。我们将用到fonts和style.css

    如何使用字符?

    1、fonts文件夹拷贝到我们项目的根目录中。

    2、打开style.css文件,复制以下代码至你的css文件中(或者style样式里面都行)

    【主要是为了在样式中声明我们使用的icomoon,要注意路径问题】

    1. /*声明*/
    2. @font-face {
    3. font-family: 'icomoon';
    4. src: url('../fonts/icomoon.eot?7kkyc2');
    5. src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    6. url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    7. url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    8. url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    9. font-weight: normal;
    10. font-style: normal;
    11. }

    3、在需要用到的地方添加字体样式调用(比如你要在div li里面引用icomoon字体图标,这里的font-family属性值必须和上面font-face里面的一致)

    1. div li {
    2. font-family: 'icomoon';
    3. font-size: 16px;
    4. line-height: 26px; }

    4、HTML码中调用

    <li class="icomoon">i>
    
  • 相关阅读:
    PCB板的技术详解和叠构剖析
    【MySQL新手到通关】第一章 数据库概述
    Linux nVidia显卡超频面板
    深入理解强化学习——多臂赌博机:梯度赌博机算法的数学证明
    全新升级的AOP框架Dora.Interception[4]: 基于Lambda表达式的拦截器注册方式
    十大排序算法汇总
    SpringCloud Alibaba微服务第5章之项目初始化
    Java 类和对象
    LSTM基础理论与实例
    Juniper Networks Junos OS EX远程命令执行漏洞(CVE-2023-36845)
  • 原文地址:https://blog.csdn.net/u013773608/article/details/122822565