首页 > 代码库 > css伪类和logo部分效果实现

css伪类和logo部分效果实现

css伪类及logo插入图

关于css的一些小知识点

  • 伪类 
    伪类的权重与类的权重相同。 
    伪类有权重,a:link---a:visited---a:hover---a:active 
    工作中为了用户体验,link和visited状态一样,hover状态不同,active不写。 
    a选择器:color, text-decoration两个属性不能去继承更改。

  • 文字换插入图 
    background-image背景图片: 
    重复加载在border以内的区域。 
    background: url(pic.jpg) no-repeat left top fixed

    例如网站导航部分logo位置


  .logo {
width:100px;
height:100px;
background:url(logo.png) no-repeat;
}


<h1 class="logo"><a href="">我是网站标题<a></h1>

h1标签里不加入文字的缺点:

h1标签中没有描述文字,本身h1权重最大,可以提高搜索引擎优化,在搜索框里输入的都是文字关键字,需要按照关键字去匹配,h1中有相关文字就能提升排名,但是内部加载一张插入图,没有任何的关键字存在,相当于放弃h1标签去做SEO。 

解决方法:h1中a标签之内不要放插入图,书写相关的关键字。图片可以用背景图代替。 
隐藏文字方法:如果设置font-size:0px;会存在兼容性问题 
所以给a内文字设置缩进,同时overflow:hidden;

css伪类和logo部分效果实现