专栏首页DeveWork分享一款带尖角浮出 公告栏 样式

分享一款带尖角浮出 公告栏 样式

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏,这个广告栏是纯用css+html打造的,没有使用图片。该代码最初来自大前端,经过简单的改造Jeff 移植到了WordPress主题中。下面先给出演示地址先(当然,本站也算是一个演示地址):

带尖角浮出公告栏样式:演示地址

做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的,制作三角形也可以用这个原理。据我所知,制作三角形的话还可以直接用css(好像border属性+margin=0),当然也可以直接用图片。其实我认为用图片也没啥问题啊,用css做个三角形的代码占用空间比个用图片的都大,如果我将图片用cssscript合并,请求数几乎不增,总体还占用更少空间。啊啊……说多了,直接上代码了(源代码来自大前端,在这里提供本站使用的这个左侧角的代码):

Html部分:

<div class="poptip"> <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span> Hi,又一个WordPress站点上线了!目前<br>是测试状态,欢迎各位反馈主题bug!来自Devework.com </div>

css部分:

.poptip{background:#FFFCEF;color: #DB7C22;float:left;position: relative;top:8px;left:40px;height: 35px;padding: 6px 10px 5px;font-size: 12px;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;} .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;} .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;} .poptip-arrow em{color:#FFBB76;} .poptip-arrow i{color: #FFFCEF;} .poptip-arrow-left{left:-6px;height: 12px;width: 6px;top: 12px;margin-top:-6px;} .poptip-arrow-left em{left:1px;} .poptip-arrow-left i{left:2px;}

希望尖角居中显示,可以在.poptip-arrow这个span上加上style="left:50%"或者style="top:50%" 这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。

还是那句,需要根据具体情况修改相关代码,直接套用是不行的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • 无插件仅代码实现 WordPress 分页导航(2)

    最近在折腾 Jeff的阳台 的新主题,在老外的一个主题那里找到了分页导航的一段没有见过的代码,相对应之前的代码而言比较简洁(核心代码仅仅十来行),在这里推荐给大...

    Jeff
  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • 目前全球待解决的十大挑战有哪些?

    从全球范围来看,单纯地减少温室气体的排放并不足以抑制气温的急剧上升,还应去除大气中留存的大量二氧化碳。这不仅需要巨额的资金投入,更棘手的问题是如何有效地处理这部...

    用户1737318
  • 设计模式之空对象模式

    空对象模式是通过实现一个默认的无意义对象来避免null值出现, 简单地说,就是为了避免在程序中出现null值判断而诞生的一种常用设计方法.

    烟草的香味
  • @keyframes 属性——动画示例

    Html5知典
  • python 三元表达式 if for 构建List 进阶用法

    Python中,for...[if]...语句一种简洁的构建List的方法,从for给定的List中选择出满足if条件的元素组成新的List,其中if是可以省略...

    用户1214487
  • 6-css样式

    背景图片定位的值可以是应为left,right,top,bottom,center

    达达前端
  • [9-13]Shell系列3——分支结构

    本文旨在复习shell实现分支结构的3种if语句和case多分支结构语句,以及补充if和case的执行效率

    py3study
  • shell逻辑判断、文件属性判断、if特殊用法、case判断

    if 条件1;then commond1;elif 条件2;then commond2;else commond3;fi

    阿dai学长

扫码关注云+社区

领取腾讯云代金券