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

这里所说的带尖角浮出公告栏就是指本站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 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Angular2、Ionic、TypeScript、es6的关系?

其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,a...

1273
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

3016
来自专栏java一日一条

Mac下提升工作效率的方式

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。笔者主要从事iOS开发,一般在macbo...

1293
来自专栏腾讯开源的专栏

【开源公告】通用 Web 组件化框架 Omi 正式开源

Omi 从 3.0 开始基于 preact 二次开发,完全可以共享 preact 和 react 的生态,也有了自己独特的风格和优势。

7.5K7
来自专栏分布式系统和大数据处理

Web标准中的常见问题

大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使...

1125
来自专栏tkokof 的技术,小趣及杂念

Dev-C++,Time to say goodbye ?(更新2012-02-04)

  记得在那段很久以前的学生时代,自己曾经很反感Visual Studio的过度臃肿,再加上当时学校的实验PC陈腐老旧:经常假死的Windows 2000,外加...

1062
来自专栏BestSDK

20个对前端开发人员有用的文档和指南

是时候来更新一下我们需要选择的工具或技术了。请欣赏我们的文档和指南系列的第五部,别忘了让我们知道任何其他我们尚未列入该系列的其他文档或指南。 1.SitePoi...

2527
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

5627
来自专栏腾讯大讲堂的专栏

使用Laya引擎开发微信小游戏

使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。

1.8K8
来自专栏Youngxj

自定义易玩稀的媒体范

1935

扫码关注云+社区

领取腾讯云代金券