首页 > 代码库 > 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部分效果实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。