文章目录
  1. 1. logo小图标
  2. 2. logo区的优化

基本上每个网站都有自已网站的logo小图标,那么今天我来说下logo小图标以及如何优化logo区

logo小图标

1.如何生成小图标
自己或者网页美工制作小图标,也可以去别的网站截图
2.转化logo小图标,使其变成favicon.ico格式
利用 http://www.bitbug.net/进行转换生成的是favicon.ico 的小图标
3.使用小图标
在页面的head标签下加<link rel="shortcut icon" href="favicon.ico" />
//注意:这你的路径要写正确,一般这个小图标都是更index.html,js文件夹是同级别的
以上步骤全部完成后的结果为,看下图:

logo区的优化

  • 一般情况下,logo给的是背景图片
  • 我们继续在h1 里面放一个链接a 要和 logo盒子一样大。
  • 注意 a链接 里面要放上网站标题。(是为了优化)
  • 链接里面的文字对用户体验不好,这里不需要看见,做法:利用text-indent:-2000em
  • 给链接添加 title 提示文本 增强用户体验。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="foundleft floatL">
    <h1>
    <a href="#">
    欢迎来到京东
    </a>
    </h1>
    </div>
    .foundleft a{display: block;height: 172px;text-indent: -100000px;}
    //按照上面代码的格式写,记住div加的是背景图用background加,不要用img加

以上步骤完成后的结果为,看下图:

文章目录
  1. 1. logo小图标
  2. 2. logo区的优化