利用:after伪元素给网站logo带上圣诞帽

2016-12-17 18:24 来自本站原创 47,322 14 9
[摘要]

转眼间又是一年圣诞节,到处都是圣诞元素,咱们站长也给网站的logo带个圣诞帽子吧,一段css代码轻松搞定。

虽然笔者对过圣诞节不怎么感冒,但是现在的商家都把圣诞节作为一个营销节点,到处都充斥着圣诞元素,咱们做站的跟不上节奏怎么行?一起动动手给网站logo带上圣诞帽,今天分享的方法是利用纯css代码,不动前端布局,这样对新手朋友来说非常的友好。

利用:after伪元素给网站logo带上圣诞帽

通常来说,装饰logo要么修改logo图片,要么就动html结构,在logo后面加个绝对定位的图片,但是今天咱们不动图片,不动html,只修改css文件,直接贴出demo代码,点下面的按钮可以直接预览效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>给logo带上圣诞帽子</title>
 <style type="text/css">
 *{margin:0;padding:0;border:0;}
 .header{width:100%;height:65px;background:#33363b;}
 .header .nav{width:1080px;margin:0 auto;position:relative;}
 .logo{display:block;width:205px;height:65px;}
 .logo img{width:205px;height:65px;}
 .logo:after{content:url(shengdanHat2.png);display:block;position:absolute;top:-3px;left:140px;/* 根据实际情况修改定位*/}
 p {font-size: 50px;width: 1080px;margin: 0 auto;font-weight: bold;z-index: 999;}
 </style>
</head>
<body>
<div class="header">
 <div class="nav">
 <div class="logo">
 <a href="https://www.yaxi.net">
 <img src="360X114-2.png" alt="雅兮网">
 </a>
 </div>
 </div>
</div>
<p>Demo By yaxi.net </p>
</body>
</html>

在线Demo

使用方法:

1、上传圣诞帽子图片素材

2、首先确定你的logo元素样式class或者id 名称,在其选择器名称后添加:after伪元素以及值(上述代码中),注意帽子图片路径

3、给logo父元素增加相对定位属性 position:relative,如已有则可以忽略。

每个模板的结构都不一样,所以大家需要根据自己的实际情况调整,关键点就是给logo选择器后面加after伪元素,并给logo父元素添加相对定位。

笔者分享两个圣诞帽子图片,大家有更好的可以自行替换并修改定位值。

利用:after伪元素给网站logo带上圣诞帽利用:after伪元素给网站logo带上圣诞帽

由于伪元素在IE7及以下的浏览器中兼容性比较差,所以本例只适用于IE8以上的现代浏览器(其实现在还用IE6、IE7的用户,估计也欣赏不了什么漂亮的网页了吧,哈哈)

延伸:after伪元素

浏览器支持

所有主流浏览器都支持 :after 伪元素。

定义和用法

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

本文最后更新于2017年3月29日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:14   其中:访客  0   博主  0
    加载中...
    1. 5年前 (2018-12-14) 20楼

      一开始也有同样的想法,但是前端技术菜,所以放弃了,感谢大佬分享

    2. 7年前 (2016-12-21) 19楼

      技术高手啊,可以拿出去炫一下了

    1 2
    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 14 9 47,322
    Top